score:1

Accepted answer

I fixed the issue by adding the values to the chart as data [[x,y], [x,y], ...].

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
  </head>
  <body>
    <div id="container" style="position:absolute;bottom:0px;right:0px;left:0px;top:0px;"></div>
    <script>
      var data = [
        ['Time', 'dataset 1', 'dataset 2'],
        [0,      0,2],
        [0.2,    2,3],
        [0.3,    2.3,4.7],
        [0.6,    2,6.2],
        [1,      3.1, 3.1],
        [3,      3.5, 3.0],
        [3.4,    2.8, 1.7]
        /* ... */
      ];
      $(function () {
        // reformat data
        var seriesData = [];

        // add series json with nametag for every label
        data[0].forEach(function(name) {
          seriesData.push({name: name, data: []});
        });

        // for every datum add it to the data field of the series data.
        data.slice(1).forEach(function(datum) {
          datum.forEach(function(item, i) {
            seriesData[i].data.push([datum[0],item]);
          });
        });

        $('#container').highcharts({
          chart: {
            zoomType: 'x'
          },
          title: {
            text: 'Title',
            x: -20
          },
          xAxis: {
          },
          yAxis: {
            plotLines: [{
              value: 0,
              width: 1,
              color: '#808080'
            }]
          },
          legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 3
          },
          series: seriesData.slice(1)
        });
      });
    </script>
  </body>
</html>


Related Articles