dogrunjp
3/20/2014 - 1:38 PM

Draw Hicharts Line Chart with multi data and multi dimensional json

Draw Hicharts Line Chart with multi data and multi dimensional json

#JSON
#特に色指定の必要が無ければ"color"はいりません。
[
{
"datas":[
{"name": "Array A","color": "#DD421D","data":[140,200,250,260,380,400,500,550,650,800]},
{"name": "Array B","color": "#E27E1A","data":[80,90,110,180,210,210,230,240,250,280]},
{"name": "Array C","color": "#EF9E1D","data":[170,180,230,240,260,270,280,330,340,350]},
{"name": "Array D","color": "#AAC40E", "data":[40,50,130,250,180,160,150,160,140,130]},
{"name": "Array E","color": "#76B711","data":[20,30,50,60,65,70,90,110,115,120]},
{"name": "Array F","color": "#088BA0", "data":[10,10,30,40,50,60,70,75,80,80]}
]},
{"categories":["Jan", "Feb", "Mar","Apr","May","Jun","Jul","Aug","Sep","Oct"]}
]

#html($(document).ready.. )
var options = {
  chart:{
      renderTo: 'chart1',
      type: 'line'
  },
  title:{text:'foo'},
  ......
  xAxis:{categories:[]},
  series:{{}]
};
$.ajax({
        url:'series.json',
        type:'GET',
        async: true,
        dataType:"json",
        success: function(json){
            options.xAxis = json[1];
            options.series = json[0]['datas'];
            chart = new Highcharts.Chart(options);
         },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            ..
        }
});