CODEWITHSUNDEEP
javascriptjsonhighcharts
Aeromax
Aeromax

Reputation: 59

How to match up category labels with multiple series?

I'm working on a project to brush up on my JS, and I'm finding Highcharts rather challenging. What I've done is set up project that pulls in current JSON data from an API, and displays results on a map. When you click on a state, you can view the historical data for that state. if you shift click, you can view more than one state.

My x-axis is formatted with dates from each state, as not each state began tracking data at the same time. When multiple states are selected, the information is incorrect because even though they all have the same date for the most recent data point (today), the first data point in the date array varies. For instance, if you click New York, their first data point starts on 3/04, but if you click Connecticut, the first data point starts on 3/07.

Is there a way I can reconcile this? Can I have my categories start from the most recent data point and work backwards, so the data points for today are concurrent?

Here's my pen: https://codepen.io/maxpalmer/pen/rNVRzVX?editors=0010

Stackoverflow is requiring I post some code, so here is the function I wrote that reassembles the api data into an array for each state for the area chart:


    for (i = 0; i < stateAbbrevs.length; i++){
      var values = new Array(), categories = new Array();
      // var categories = new Array();
      var state = stateAbbrevs[i];
      var stateObj = jsonData.filter(obj => obj.state == state);
      for (x = 0; x < stateObj.length;  x++) {
        var value = stateObj[x].positive;
        var date = formatDate(stateObj[x].date);
        var name = stateNames[i];
        values.push(value);
        categories.push(date);
      }
      values.reverse();
      categories.reverse();
      historicData[state] = { 
        name: name,
        data: values,
        categories: categories
      };
    }
}```

Upvotes: 2

Views: 51

Answers (1)

Aeromax
Aeromax

Reputation: 59

Ah, found it in the myriad Highcharts documentation. Comes down to reversing my data array, and then reversing it in the highcharts x-axis options.

https://api.highcharts.com/highcharts/xAxis.reversed

Upvotes: 1

Related Questions