title: Highcharts with JSON data and multiple series
body: <p>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.  </p>
  
  <p>The data comes from a JSON file, with the variables being loaded using a method I got from <a href="http://jonathanmanning.com/2012/10/31/highcharts-jquery-graphing-library-example-with-json-data-source/" rel="nofollow">another site</a>...  My data is a numeric y value for each month, with customTooltip being additional data I want to show on hover.</p>
  
  <pre><code>$.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);
  
  });
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>{
  "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
      ]
  }
  }
  </code></pre>