CODEWITHSUNDEEP
javascriptjsonhighcharts
Paulo Wayne
Paulo Wayne

Reputation: 39

How can i get the json data with the specific between Year?

I have a data structure json with Year and its value and I will display it on my highcharts.

How can I filter it between years? Example if I choose in my dropdownlist between 2016 to 2018 it will only shows the data 2016 2017 and 2018 only.

Here's my datastructure

[
{
    "New_Students": "321",
    "NSYEAR": "2014",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
},
{
    "New_Students": "1923",
    "NSYEAR": "2015",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
},
{
    "New_Students": "293",
    "NSYEAR": "2016",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
},
{
    "New_Students": "29",
    "NSYEAR": "2017",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
},
{
    "New_Students": "524",
    "NSYEAR": "2018",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
}
    ]

and here's my output so far.

enter image description here

Here's my code on getting json data

 var strCampus = "<%=MyProperty%>";
    var MyUpdateDate = "<%=UpdateDate%>";
    var ParamYear;
    var OnClickYearVal;
    var Year = [];
    var user_data = [];
    //Rdata.ParamYear = ParamYear;

 var drill_down_data = [];
    $(function () {
        $.getJSON('http://localhost:37590/get_NSData/' + strCampus, function (jsonData) { 


            const data = jsonData
            console.log(data);


let categories = [],
  series = [],
  i,
  j;
  var chartSeriesData = [];
  var chartDrilldownData = [];

     for (i = 0; i < data.length; i++) {

          categories[i] = data[i].NSYEAR + '-' + [parseFloat(data[i].NSYEAR) + 1];
          Year = [data[i].NSYEAR]
          series.push({
          name: [+data[i].NSYEAR] + ' School Year',
          data: [{ y: +data[i].New_Students }],

      });

      for (j = 0; j < i; j++) {
        series[i].data.unshift(null);
      }

  }

Thank you in advance help.

Upvotes: 2

Views: 112

Answers (3)

ppotaczek
ppotaczek

Reputation: 39149

You can use the setExtremes axis method to bind a dropdown event with the chart range:

var chart = Highcharts.chart('container', {
    ...,
    xAxis: {
        minRange: 0,
        ...
    }
});

document.getElementById('selectFrom')
    .addEventListener('change', function() {
        chart.xAxis[0].setExtremes(Number(this.value), chart.xAxis[0].max);
    });

document.getElementById('selectTo')
    .addEventListener('change', function() {
        chart.xAxis[0].setExtremes(chart.xAxis[0].min, Number(this.value));
    });

Live demo: http://jsfiddle.net/BlackLabel/xevgsjdo/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

Upvotes: 2

Vikash_Singh
Vikash_Singh

Reputation: 1896

Use filter and also typeOf NSYEAR is string so you have to convert into number:

    function getFilterDataBetweenYears(fromYear, toYear) {
        return data.filter(obj => {
            if (+obj["NSYEAR"] >= fromYear && +obj["NSYEAR"] <= toYear) {
                return obj;
            }
        });
    }

Upvotes: 1

Mr Shumar
Mr Shumar

Reputation: 261

Parse your JSON data and use Array.prototype.filter()

For example:

// allData is your parsed JSON data
const filteredByYear = allData.filter(function(single) {
    if (single["NSYEAR"] >= 2016 && single["NSYEAR"] <= 2018) {
        return single;
    }
});

Upvotes: 1

Related Questions