CODEWITHSUNDEEP
javascriptjquerycsvhighcharts
kittyhawk
kittyhawk

Reputation: 698

Parse CSV for multiple categories in Highcharts

I call a web service to get data that looks like this:

Timestamp,Speed1,Speed2
10/5/2015 12:00:00 AM,86,46.2
10/5/2015 1:00:00 AM,78,51
10/5/2015 2:00:00 AM,77,52
10/5/2015 3:00:00 AM,80,49
10/5/2015 4:00:00 AM,112,42
10/5/2015 5:00:00 AM,79,50

I want to produce a line chart with 2 categories, one for each "Speed", with the time on the x-axis and the speed on the y-axis. I am having trouble parsing the CSV to produce a Highcharts series for this. Currently, I can see one category when I do this:

 $.get('GetSummaries.asmx/GetSummaryCsv', { }, function (csv) {

            var speedSeries = [];

            var lines = csv.trim().split('\n');
            $.each(lines, function (lineNo, line) {
                var items = line.split(',');
                if ((lineNo !== 0) && (line != "")) {
                    var x = new Date(items[0]),
                        speed1 = parseInt(items[1]),
                        speed2 = parseInt(items[2]);

                    var year = x.getFullYear();
                    var month = x.getMonth();
                    var day = x.getDate();
                    var hour = x.getHours();
                    var min = x.getMinutes();
                    var thisDate = Date.UTC(year, month, day, hour, min);


                    speedSeries.push([thisDate, speed1, speed2]);

                }
            });

            options.series.push({
                data: speedSeries,
                type: 'line',
                color: 'DarkBlue'
            });

            var chart = new Highcharts.Chart(options);
        });

How do I create the array(s) to produce a chart with two lines--one for each speed category?

Upvotes: 1

Views: 232

Answers (1)

davcs86
davcs86

Reputation: 3935

You need 2 series to do it,

var csv = "Timestamp,Speed1,Speed2\n"+
"10/5/2015 12:00:00 AM,86,46.2\n"+
"10/5/2015 1:00:00 AM,78,51\n"+
"10/5/2015 2:00:00 AM,77,52\n"+
"10/5/2015 3:00:00 AM,80,49\n"+
"10/5/2015 4:00:00 AM,112,42\n"+
"10/5/2015 5:00:00 AM,79,50\n";    

var speedSeries = [[],[]];
var lines = csv.trim().split('\n');
$.each(lines, function (lineNo, line) {
  var items = line.split(',');
  if ((lineNo !== 0) && (line != "")) {
    var x = new Date(items[0]),
        speed1 = parseInt(items[1]),
        speed2 = parseInt(items[2]);

    var year = x.getFullYear();
    var month = x.getMonth();
    var day = x.getDate();
    var hour = x.getHours();
    var min = x.getMinutes();
    var thisDate = Date.UTC(year, month, day, hour, min);


    speedSeries[0].push([thisDate, speed1]);
    speedSeries[1].push([thisDate, speed2]);

  }
});

var options = {series:[],chart:{renderTo:"chart"}, xAxis: {type: 'datetime'}};

options.series.push({
  data: speedSeries[0],
  type: 'line',
  color: 'DarkBlue',
  name:"Speed 1"
});
options.series.push({
  data: speedSeries[1],
  type: 'line',
  color: 'Red',
  name:"Speed 2"
});

var chart = new Highcharts.Chart(options);
#chart{
    width: 500px;
    height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart"></div>

Upvotes: 2

Related Questions