CODEWITHSUNDEEP
highcharts
genxgeek
genxgeek

Reputation: 13347

Highcharts display date as series label from JSON data?

I have data that can either be weekly or monthly that gets returned as json.

Can somebody explain how I can just return the series in the payload to group by each series? That is, display the x-axis as the label?

I want to use one chart to display (weekly, monthly, daily) with a json data payload but use only one chart to display that json payload for either time slice.

For example:

Weekly Payload:

[
     {
        "date-label":"Week 24",
        "series1":789118,
        "series2":49475,
     },
     {
        "date-label":"Week 25",
        "series1":5759546,
        "series2":286657,
     }
 ]

Monthly Payload:

[
     {
        "date-label":"June",
        "series1":789118,
        "series2":49475,
     },
     {
        "date-label":"July",
        "series1":5759546,
        "series2":286657,
     }
 ]

Upvotes: 0

Views: 523

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

How many points do you have?

If there is only a couple (~10?) you can use categories, and then result should be:

new Highcharts.Chart({
  xAxis: {
    categories: ['June', 'July' ... ]
  }, 
  series: [{
    data: [123, 124 ...]
  }, {
    data: [123, 124 ...]
  }]
});

If you have more points, so it wouldn't be possible to display all categories, you need to change format from 'Week 24' or 'June' to timestamp, so something like this:

new Highcharts.Chart({
  xAxis: {
    type: 'datetime'
  }, 
  series: [{
    data: [[timestamp, 123], [timestamp, 124] ...]
  }, {
    data: [[timestamp, 123], [timestamp, 124] ...]
  }]
});

Where timestamp is in milliseconds.

Upvotes: 1

Related Questions