how do you chart multiple variables as line chart using highcharts

Question

I need to put multiple variables as a line chart to highcharts. Since the number of variables are very high, I need to be able to grab the data and chart it dynamically.

I have multiple of servers that I need to put the cpu utilization of all of the servers in one chart with different lines. My Data would look something like this from the sql query:

ServerName  DateTime           CPU
ServerA     1/2/2013 12:00:00  30
ServerA     1/2/2013 01:00:00  20
ServerA     1/2/2013 02:00:00  50
ServerB     1/2/2013 12:00:00  30
ServerB     1/2/2013 01:00:00  30
ServerB     1/2/2013 02:00:00  5
ServerC     1/2/2013 01:00:00  10
serverC     1/2/2013 02:00:00  50
ServerC     1/2/2013 03:00:00  70

I was looking at the below code, but since I cannot see the data, I cannot really make anything out of it. How would I add the result of a sql query as above to the multiple line series chart using highstock charts?

$(function() {
    var seriesOptions = [],
        yAxisOptions = [],
        seriesCounter = 0,
        names = ['MSFT', 'AAPL', 'GOOG'],
        colors = Highcharts.getOptions().colors;

    $.each(names, function(i, name) {

        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?',   function(data) {

            seriesOptions[i] = {
                name: name,
                data: data
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter++;

            if (seriesCounter == names.length) {
                createChart();
            }
        });
    });



    // create the chart when all data is loaded
    function createChart() {

        $('#container').highcharts('StockChart', {
            chart: {
            },

            rangeSelector: {
                selected: 4
            },

            yAxis: {
                labels: {
                    formatter: function() {
                        return (this.value > 0 ? '+' : '') + this.value + '%';
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'
                }]
            },

            plotOptions: {
                series: {
                    compare: 'percent'
                }
            },

            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                valueDecimals: 2
            },

            series: seriesOptions
        });
    }

});

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2013-07-02T10:22:26

You need parse your dates "1/2/2013 12:00:00" to JS timestamp (time in milisecods). You can use i.e. Date.UTC() function. Secondly you have to use numbers to display chart (not strings) for CPU values.

how do you chart multiple variables as line chart using highcharts

1 Answers