make a chart from csv file? - Javascript highcharts

Javascript examples for highcharts:Chart CSV Data

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart CSV Data

Description

make a chart from csv file?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {// w  w w . ja  va 2  s  .c o  m
    var normalizeData = function(data){
        var dataArray = [{data:[]},{data:[]},{data:[]}],
            xArray = [];
        $.each(data.split("\n"), function(i, v){
            var dataItem = v.split("\t");
            dataArray[0].data.push(parseFloat(dataItem[1]));
            dataArray[1].data.push(parseFloat(dataItem[2]));
            dataArray[2].data.push(parseFloat(dataItem[3]));
        });
        return {
            categories: xArray,
            data: dataArray
        };
    }
    //fake your csv result
    var fakeData = "0\t1.03645399076138\t18.680054645644\t26.8678147836078\n1\t2.44625498591384\t18.680054645644\t26.8678147836078\n2\t5.45509322517529\t18.680054645644\t26.8678147836078\n3\t2.36362640018202\t18.680054645644\t26.8678147836078\n4\t2.28307829582599\t18.680054645644\t26.8678147836078\n5\t3.41138672777039\t18.680054645644\t26.8678147836078",
    values = normalizeData(fakeData),
    options = {
      chart: {
        renderTo: 'container2',
        defaultSeriesType: 'column'
      },
      title: {
        text: 'Ewarespar Residuals'
      },
      xAxis: {
        categories: values.categories
      },
      yAxis: {
        title: {
          text: 'Units'
        }
      },
      series: values.data
    },
    chart = new Highcharts.Chart(options);
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container2" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials