dondes17
Posts: 1
Joined: Sat Aug 19, 2017 1:24 pm

Data json and Highcharts

Sat Aug 19, 2017 2:53 pm

Hello !
This is the first time i use highcharts and i have a worry to get my data back from a json ....

Here is the json :

Code: Select all

{
  "p1": [
    [946681200000, 2.63], [978303600000, 3.0], [1009839600000, 3.0], [1041375600000, 2.69], [1072911600000, 2.25], [1104534000000, 2.15], [1136070000000, 2.23], [1167606000000, 2.85], [1199142000000, 3.67], [1230764400000, 1.6], [1262300400000, 1.46], [1293836400000, 2.08], [1325372400000, 2.25], [1356994800000, 1.58], [1388530800000, 1.15], [1420066800000, 0.9], [1451602800000, 0.75], [1483225200000, 0.75]
  ],
  "p2": [
    [946681200000, 5.3], [978303600000, 5.3], [1009839600000, 4.8], [1041375600000, 4.5], [1072911600000, 4.4], [1104534000000, 4.2], [1136070000000, 4.1], [1167606000000, 4.1], [1199142000000, 4.0], [1230764400000, 3.6], [1262300400000, 3.4], [1293836400000, 3.0], [1325372400000, 2.9], [1356994800000, 2.8], [1388530800000, 2.5], [1420066800000, 2.3], [1451602800000, 1.9], [1483225200000, 1.5]
  ],
  "p3": [
    [946681200000, 5.6], [978303600000, 5.3], [1009839600000, 4.8], [1041375600000, 4.6], [1072911600000, 4.4], [1104534000000, 4.5], [1136070000000, 4.1], [1167606000000, 4.4], [1199142000000, 4.0], [1230764400000, 4], [1262300400000, 3.4], [1293836400000, 3.1], [1325372400000, 2.9], [1356994800000, 2.8], [1388530800000, 2.5], [1420066800000, 2.3], [1451602800000, 1.9], [1483225200000, 1.4]
  ],
  "p4": [
    [946681200000, 6], [978303600000, 5.85], [1009839600000, 4.8], [1041375600000, 4.9], [1072911600000, 4.2], [1104534000000, 4.1], [1136070000000, 3.9], [1167606000000, 4.1], [1199142000000, 4.0], [1230764400000, 4.3], [1262300400000, 3.6], [1293836400000, 2.9], [1325372400000, 3.1], [1356994800000, 3.2], [1388530800000, 2.5], [1420066800000, 2.2], [1451602800000, 2.1], [1483225200000, 1.9]
  ],
  "p5": [
    [946681200000, 6.3], [978303600000, 5.3], [1009839600000, 4.8], [1041375600000, 4.5], [1072911600000, 4.4], [1104534000000, 4.2], [1136070000000, 6], [1167606000000, 5.2], [1199142000000, 4.0], [1230764400000, 3.6], [1262300400000, 4.4], [1293836400000, 4.9], [1325372400000, 4.9], [1356994800000, 2.7], [1388530800000, 4.4], [1420066800000, 4.1], [1451602800000, 4.7], [1483225200000, 5.6]
  ],
  "p6": [
    [946681200000, 3.63], [978303600000, 3.0], [1009839600000, 4.0], [1041375600000, 4.69], [1072911600000, 3.25], [1104534000000, 2.15], [1136070000000, 3.23], [1167606000000, 1.85], [1199142000000, 2.67], [1230764400000, 5.6], [1262300400000, 1.46], [1293836400000, 2.08], [1325372400000, 3.25], [1356994800000, 5.58], [1388530800000, 5.15], [1420066800000, 3.9], [1451602800000, 0.75], [1483225200000, 0.75]
  ],
  "p7": [
    [946681200000, 5.3], [978303600000, 5.3], [1009839600000, 3.8], [1041375600000, 4.5], [1072911600000, 4.4], [1104534000000, 4.2], [1136070000000, 4.1], [1167606000000, 4.1], [1199142000000, 4.0], [1230764400000, 3.6], [1262300400000, 3.4], [1293836400000, 3.0], [1325372400000, 2.9], [1356994800000, 2.8], [1388530800000, 2.5], [1420066800000, 2.3], [1451602800000, 1.9], [1483225200000, 1.5]
  ],
  "p8": [
    [946681200000, 5.6], [978303600000, 5.3], [1009839600000, 3.8], [1041375600000, 4.6], [1072911600000, 3.4], [1104534000000, 4.5], [1136070000000, 4.1], [1167606000000, 4.4], [1199142000000, 4.0], [1230764400000, 4], [1262300400000, 3.4], [1293836400000, 3.1], [1325372400000, 2.9], [1356994800000, 2.8], [1388530800000, 2.5], [1420066800000, 2.3], [1451602800000, 1.9], [1483225200000, 1.4]
  ],
  "p9": [
    [946681200000, 6], [978303600000, 3.85], [1009839600000, 4.8], [1041375600000, 4.9], [1072911600000, 3.2], [1104534000000, 4.1], [1136070000000, 3.9], [1167606000000, 4.1], [1199142000000, 4.0], [1230764400000, 4.3], [1262300400000, 3.6], [1293836400000, 2.9], [1325372400000, 3.1], [1356994800000, 3.2], [1388530800000, 2.5], [1420066800000, 2.2], [1451602800000, 2.1], [1483225200000, 1.9]
  ],
  "p10": [
    [946681200000, 3.3], [978303600000, 5.3], [1009839600000, 4.8], [1041375600000, 4.5], [1072911600000, 4.4], [1104534000000, 4.2], [1136070000000, 6], [1167606000000, 5.2], [1199142000000, 3.0], [1230764400000, 3.6], [1262300400000, 4.4], [1293836400000, 4.9], [1325372400000, 4.9], [1356994800000, 2.7], [1388530800000, 4.4], [1420066800000, 4.1], [1451602800000, 4.7], [1483225200000, 5.6]
  ]
}
Here is my code in highcharts :

Code: Select all

$(document).ready(function() {
 $.getJSON('../data-js.json', function (data) {
    var chart = Highcharts.chart('container', {
            title: {
                text: null
            },

            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: 'none'
            },

            series: [{
                name: 'P',
                data: data???
            }]
        });
    });
});
How can I retrieve my data at the data level ??

kamil
Posts: 439
Joined: Tue May 30, 2017 9:12 am

Re: Data json and Highcharts

Mon Aug 21, 2017 1:05 pm

Hi dondes17

You should prepare your data before passing it to Highcharts. This documentation page explains how to do it: https://www.highcharts.com/docs/chart-concepts/series

Additionally, I see that you're using timestaps as x values. That has to specified in Highcharts, by setting xAxis.type to 'datetime'.

Best regards!

Example:
http://jsfiddle.net/kkulig/ou1tg7u9/

API reference:
http://api.highcharts.com/highcharts/xAxis.type
Kamil Kulig
Highcharts Developer

Return to “Highcharts Usage”