load data in highcharts from 2 different csv files

问题:

I am trying to find out if I can get a graph using 2 sources (one for the categories, another for the actual data plotted.

I find myself often in need to use the same category for different series; but I can't code in the chart itself, since they are not global. As example picture a temperature sensor data: it uses Celsius and my category fits in a specific user case; which apply to all my temperature sensors but if I need to use data coming from a pressure sensor, then I need to change unit of measure and other parameters in the category.

To alleviate; I can simply write functions on the fly, that generate directly from the server, a ton of specific csv files; but I thought that I can just grab bits and pieces instead from the files that the server already returns.

But I can't find an example about how would you set different files as source for the category and the series. Is this possible or should I just make a ton of ad hoc single csv files?

EDIT I am using the standard example that is on the highcharts site, to load a csv file; it is not on JSFiddle so I can just paste the link to that web example: http://www.highcharts.com/studies/data-from-csv.htm

What I did was to duplicate the $.get function, using a different file name, but it won't work; so I tried to change also the data name, and that didn't work either:

    $(document).ready(function() {


                var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'column'
                    },
                    title: {
                        text: 'Fruit Consumption'
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {
                        title: {
                            text: 'Units'
                        }
                    },
                    series: []
                };

                /*
                 Load the data from the CSV file. This is the contents of the file:

                    Apples,Pears,Oranges,Bananas,Plums
                    John,8,4,6,5
                    Jane,3,4,2,3
                    Joe,86,76,79,77
                    Janet,3,16,13,15

                 */ 
                $.get('data.csv', function(data) {
                    // Split the lines
                    var lines = data.split('\n');
                    $.each(lines, function(lineNo, line) {
                        var items = line.split(',');

                        // header line containes categories
                        if (lineNo == 0) {
                            $.each(items, function(itemNo, item) {
                                if (itemNo > 0) options.xAxis.categories.push(item);
                            });
                        }

                        // the rest of the lines contain data with their name in the first position
                        else {
                            var series = { 
                                data: []
                            };
                            $.each(items, function(itemNo, item) {
                                if (itemNo == 0) {
                                    series.name = item;
                                } else {
                                    series.data.push(parseFloat(item));
                                }
                            });

                            options.series.push(series);

                        }

                    });

$.get('data2.csv', function(data) {
                    // Split the lines
                    var lines = data.split('\n');
                    $.each(lines, function(lineNo, line) {
                        var items = line.split(',');

                        // header line containes categories
                        if (lineNo == 0) {
                            $.each(items, function(itemNo, item) {
                                if (itemNo > 0) options.xAxis.categories.push(item);
                            });
                        }

                        // the rest of the lines contain data with their name in the first position
                        else {
                            var series = { 
                                data: []
                            };
                            $.each(items, function(itemNo, item) {
                                if (itemNo == 0) {
                                    series.name = item;
                                } else {
                                    series.data.push(parseFloat(item));
                                }
                            });

                            options.series.push(series);

                        }

                    });

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


            });

回答1:

Here you can find example how to load three files as series: http://www.highcharts.com/stock/demo/compare

So the only difference would be that you are using just one series, and second file will be used for categories data.

In above solution added is some global counter, to render chart after all files are received.

Second solution will be to call second AJAX inside callback for a first one, snippet:

$.getJSON(url1, function(data) {
    $.getJSON(url2, function(data2) {
        // create chart here
    });
});

Edit:

If you have two CSV files, this is what you need to change:

$.get(url1, function(data1) {
    $.get(url2, function(data2) {
        // parse data1
        var parsedData1 = ...
        // parse data2
        var parsedData2 = ...

        $("#container").highcharts({
           series: [{
               data: parsedData1
           }, {
               data: parsedData2
           }]
        });
    });
});