0

I am working with highcharts.js, and will ultimately have a number of charts that will need to change based upon a chosen select value. All of the different charts will be read from csv files in the final product.

Here is an example fiddle: https://jsfiddle.net/o0d3mpnb/1/

And here is the code i'm using in the final project to pull from the csv:

$(function() {
    Highcharts.setOptions({
        lang: {
            decimalPoint: '.',
            thousandsSep: ','
        }
    });

    $.get('/procurement/reports/voucher-total-dollar.csv', function(csv) {
        $('#donut-1').highcharts({
            credits: {
                enabled: false
            },
            chart: {
                type: 'column',
                height: 300
            },
            title: {
                text: 'VOUCHERS TOTAL $ AMOUNT',        
                xAxis: {
                categories: [
                    'Totals'                            
                ],
                crosshair: true
            },
            yAxis: {                
                title: {
                    text: 'Total'
                }
            },
            legend: {
                enabled: true
            },
            tooltip: {              
                pointFormat: 'Total: <b>${point.y}</b>'
            },
            data: {
                csv: csv,               
                firstRowAsNames: true
            }
        });
    });
});

I have figured out how to update the data and redraw the chart depending on the value of the selection chosen. What I haven't figured out is how to go back to the original data-set if the "all" option is selected.

For the purpose of sharing, the code is pulling the original "csv data" from an id in the document, but this will need to be an external file eventually, as in the code above.

So my question is two-fold:

  1. How do i revert back to the data from the original csv file when the "all" select option is chosen? and

  2. How do I load the updated data from different csv files rather than from data-array that is currently in the jquery?

I've fairly new to jquery and have never used highcharts before this project, and have been simply stumbling my way through all this until now. Any help would be greatly appreciated. Thanks!!

joshmath
  • 3
  • 2

1 Answers1

1

In response to 1: you'll need to add another condition in your $(...).change: 

else if (travelOption == 'all') { 
  chart.series[0].setData([ /* insert data here */ ]); 
  chart.redraw(); 
}

I'd do this by creating a function that updates the charted data, then calling it for the data. 

function updateSeries(data) { 
    ... 
} 

switch (travelOption) { 
    case 'all': 
        updateSeries(add(series1, series2))
        break 
    ... 
}

In response to 2: assuming you're doing web development, you'll need to make an AJAX request from the server, see, for example: How to read data From *.CSV file using javascript?

Community
  • 1
  • 1
c2huc2hu
  • 2,447
  • 17
  • 26
  • thanks for the response. so, is there a way to say "go back to the original data set" without reentering the data? I guess that's what I was wondering originally. It won't be a big deal to just reset it though. For the ajax call, and yes it is for web, i appreciate the link, it's got some good stuff in there. Although, I don't specifically know how to do the ajax call when using the chart.series[0].setData([ /* insert data here */ ]); format we're using to update the data. Does that make since? A regular ajax $.get(path/to/file) works fine initially – joshmath Jul 27 '16 at 19:05
  • I don't think there's a way to go back to the original data unless you're using a drilldown (which is a slightly different feature) For the Ajax call, you'd probably either read everything at the beginning of your code, in a load function, for example. Alternatively, if there's a lot of data, you could include the ajax call when you call .change(), so that you can only select the data you need – c2huc2hu Jul 27 '16 at 21:35