0

I've tried similar examples through stackoverflow as well as Highcharts Support, however still cannot get a graph to display properly. Trying to display a spline graph with data from a csv file with format hour,temperature as shown below in an example:

22,84
23,83
00,82
01,81
02,79
03,77
04,75

Here is the currently html/javascript I have:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="../../js/highcharts.js"></script>
    <script src="../../js/modules/exporting.js"></script>


    <script type="text/javascript">

    $(document).ready(function() {

    var time = [];
    var temp = [];

    $.get('forecast.csv', function(data) {
               var lines = data.split('\n');
               $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                time.push(parseInt(items[0]));
                temp.push(parseInt(items[1]));
               });
        });

        var options = {
          chart: {
             renderTo: 'container',
              type: 'spline'
          },
          title: {
              text: 'Temperature Forecast'
          },
          xAxis: {
             title: {
                text: 'Hour'
             },
             categories: time
          },      
          yAxis: {
                 title: {
                    text: 'Temperature'
                 }
          },
          series: [{
                 data: temp
          }]
          };                      

    var chart = new Highcharts.Chart(options);

    });

    </script>
</head>

<body>

    <div id="container" style="width: 100%; height: 400px"></div>

</body>

My graph displays, however there is no data. Any ideas? Thanks..

1 Answer 1

2

You need to add a two dimensional array as data. You can declare a global variable and add the data to that varible.

var chartData=[]
    var dataTemp = new Array(parseInt(items[0]), parseInt(items[1]));
chartData.push(dataTemp);

and

series: [{
                 data: chartData
          }]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.