javascript - update - Highcharts con datos JSON y series múltiples

highcharts series data function

Question

Intento renderizar un gráfico de líneas de Highcharts, pero tengo algunos problemas para que la serie se muestre cuando se carga la página. Firebug no muestra ningún error, así que supongo que es un problema con la forma en que se estructuran mis datos o cómo se pasa a Highcharts.

Los datos provienen de un archivo JSON, con las variables que se cargan usando un método que obtuve de otro sitio ... Mis datos son un valor numérico y para cada mes, con customTooltip como datos adicionales que deseo mostrar al pasar el mouse.

$.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);

});

Aquí hay un mejor ejemplo. Lo que realmente quiero mostrar es la ''y'' como el eje y con los datos ''n'' e ''y'' en el vuelo estacionario. JSONLint dijo que esto es válido.

{
"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

Debería ver esto: http://api.highcharts.com/highcharts#series.data

Si especifica cada punto como un objeto, puede agregar cualquier propiedad que desee a cada punto y acceder a él en su formateador de herramientas a través de este punto.

Con los datos actualmente formateados

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);
});

Esto debería producir:

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

Luego, en su función de formateador, puede acceder a cada uno de ellos como this.point.y o this.point.n

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

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