Highcharts downsampling - CSV

Question

I'm developping a web-app and I use the JS Highcharts plugin to help me to draw some charts. Sometimes I load a CSV file with more than 100 000 lines with 4 columns.

Obviously, the chart plugin meet some problems. So, I can't downsample my CSV file directly but, I found a Downsampling Highcharts plugin (http://www.highcharts.com/plugin-registry/single/13/Highcharts-Downsample) that do the job !

But in fact, this plugin may only initialize a serie with a threshold value .. And I don't know how to apply this method on my series loaded by CSV ..

I load my CSV like that instead of "series" attribute specified by the plugin Usage :

data: {csv: csv},

The plugin doc tells us to use it like that :

series: [{
  downsample: {
    threshold: 1000 // 0 disables downsampling for this series.
  },
  data: // Your data (array of arrays with two values or array of numerical values)
}]

But I don't use "series" attribute because I load my series directly from a CSV file ..

So, I want to find a solution to downsample my CSV file using this Downsampling Hicharts plugin ..

Thank you so much !

score 0 · Answer 1 · answered Apr 11 '16 at 09:27

So, finally, i found a solution ! I parse my CSV file myself and I can specify the downsample attribute :

var options = {                      //Initialize my chart's option
                chart: {
                    zoomType: 'x',
                    renderTo: $('#chart-'+unused)[0]
                },
                title: {
                    text: elem.title
                },
                 credits: {
                    enabled: false
                },
                xAxis: {
                    categories: [], //initialize empty category array
                    type: "line"
                },
                yAxis: {
                    title: {
                        text: "milli-SI"
                    }
                },
                series: [] //initialize empty serie array
            };

var lines = csv.split('\n');
$.each(lines, function(lineNo, line) {
    var items = line.split(',');
    if (lineNo == 0) {
        $.each(items, function(itemNo, item) {
            if (itemNo > 0) {
                var series = {
                    data: [],
                    name: item,
                    downsample : {threshold: 2000} //initialize downsample for a specific serie
                };
                options.series.push(series);
            }
        });
    }

    else {
        $.each(items, function(itemNo, item) {
            if (item.length == 0)
                return;
            if (itemNo == 0) {
                options.xAxis.categories.push(item);
            } else {
                options.series[itemNo -1].data.push(parseFloat(item));
            }
        });
    }

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

Highcharts downsampling - CSV

1 Answers1