Highcharts with JSON data and multiple series

Question

I'm trying to render a Highcharts line chart, but am having some issues getting the series to show up when the page loads. Firebug doesn't show any errors, so I'm guessing that it's a problem with how my data is structured or how it is being passed to Highcharts.

The data comes from a JSON file, with the variables being loaded using a method I got from another site ... My data is a numeric y value for each month, with customTooltip being additional data I want to show on hover.

$.getJSON("json/mydata.txt",function(jdata) {

var arr = [];
$.each(jdata, function(key, val) {
    var y = val.y;
    var name = key;
    var customTooltip = val.n;
    arr.push({y: y, customTooltip: customTooltip})
})

var jseries = {name:arr.name, data:[{ny:arr.customTooltip, y:arr.y}]};

var options = {
            chart: {
                renderTo: 'fallcontainer',
                defaultSeriesType: 'line'
                },
            title: {
                text: 'Monthly Rate',
                style: {
                    margin: '10px 100px 0 0' // center it
                }
                },
            subtitle: {
                text: 'Source',
                style: {
                    margin: '0 100px 0 0' // center it
                }
                },
            xAxis: {

                categories: ['Jan 12', 'Feb 12', 'Mar 12']
                },
            yAxis: {
                title: {
                    text: 'Rate',
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }],
                min:0
                },
            legend: {
                layout: 'vertical',
                align:'right',
                verticalAlign:'middle',
                x:0,
                title:'Care Setting'
                },
            plotOptions: {
                },
            credits: {
                enabled:false
                },
            series:[]
};

options.series.push(jseries);

var chart = new Highcharts.Chart(options);

});

Here's a better example. What I really want to display is the 'y' as the y-axis with the 'n' and 'y' data on the hover. JSONLint said this is valid.

{
"Total": {
    "y": [
        9.39,
        90.35,
        90.36,
        92.69,
        93.02,
        90.32,
        90.6,
        9.09,
        9.5,
        90.69,
        9.6,
        90.69,
        9.53,
        6.92
    ],
    "name": "Total",
    "n": [
        962,
        969,
        999,
        233,
        235,
        968,
        999,
        963,
        989,
        293,
        986,
        293,
        989,
        908
    ]
},
"Cat1": {
    "y": [
        6.38,
        6.63,
        90.3,
        9.65,
        90.25,
        8.99,
        92.39,
        99.39,
        9.28,
        99.35,
        99.36,
        93.38,
        8.69,
        8.03
    ],
    "name": "Cat1",
    "n": [
        6,
        6,
        90,
        90,
        90,
        8,
        93,
        93,
        99,
        93,
        93,
        96,
        99,
        9
    ]
}
}

Answer 1

You should look at this: http://api.highcharts.com/highcharts#series.data

If you specify each point as an object, you can add any property you want to each point and access it in your tooltip formatter through this.point.

With the data as currently formatted

var seriesArr = [];
$.each(jdata, function(key, data) {
  var series = {name : key, data : []};

  $.each(data.y, function(index, value) {
    series.data.push({y: value });
  });

  $.each(data.n, function(index, value) {
    series.data[index].n = value;
  });
  seriesArr.push(series);
});

This should yield :

seriesArr : [{
    name : 'Total',
    data : [
      {y:9.39, n:9.62},
      ...
    ]
  },
...
]

Then in your formatter function, you can acccess each as this.point.y or this.point.n

tooltip: {
  formatter: function () {
    return 'Y value is : ' + this.point.y + '<br>' + 'N value is : ' + this.point.n;
  }
},

Working: http://jsfiddle.net/sgearhart2/9P5fC/