0

I try to display line graphs to show trend of multiple categories over time horizon. Below is my code. But it can't display any graphs. Thus, I wonder if it's because the data structure is incorrect. Below are HTML and JavaScript for my situation. JSFiddle Onlie

HTML Script

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://rawgit.com/mholt/PapaParse/master/papaparse.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<pre id="line_bl" style="display:none">Date,Installation,Manufacturing,Sales,Project Development,Other,
2017-06-26,0.25,7,0.5,2.25,null,
2017-07-03,null,6.5,2.4,2.65,0.7,
2017-07-10,null,6.3,3.4,3.65,0.65,
2017-07-17,0.75,6.25,2.25,2.75,0.5,
</pre>

<div id="trend_bl"></div>

JavaScript

Highcharts.chart('trend_bl', {

    title: {
        text: 'Trend by Business Lines'
    },
    yAxis: {
        title: {
            text: 'Resource Allocation'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            pointStart: 2010
        }
    },

    data: {
        line_bl: document.getElementById('line_bl').innerHTML
    },
});

The result I want should look similar to below: Line Graph

J.He
  • 25
  • 1
  • 5
  • at the moment all you have is a string of data highcharts doesnt know what to do with it. its needs to be an array or object to start with. – Tik Jul 24 '17 at 03:27

1 Answers1

0

your csv data should look like

<pre id="line_bl" 
style="display:none">Date,Installation,Manufacturing,Sales,Project Development,Other
2017-06-26,0.25,7,0.5,2.25, ,
2017-07-03, ,6.5,2.4,2.65,0.7,
2017-07-10, ,6.3,3.4,3.65,0.65,
2017-07-17,0.75,6.25,2.25,2.75,0.5,</pre>

null should be replaced by empty. as null is not numerical value

update to remove series 6

Error is because there was comma at end of every individual series row

<pre id="line_bl" 
style="display:none">Date,Installation,Manufacturing,Sales,Project Development,Other
2017-06-26,0.25,7,0.5,2.25,
2017-07-03, ,6.5,2.4,2.65,0.7
2017-07-10, ,6.3,3.4,3.65,0.65
2017-07-17,0.75,6.25,2.25,2.75,0.5</pre>

Updated fiddle

Using data.parsed using data with null value

  data: {
    csv: document.getElementById('csv').innerHTML,
    parsed: function(columns) {
      var newColumns = [];
      Highcharts.each(columns, function(c, j) {
        newColumns.push([]);
        Highcharts.each(c, function(p, i) {
          newColumns[j].push(parseFloat(p) || null)
        })
      })
      this.columns = newColumns;
    }
  },

Fiddle

Deep 3015
  • 9,929
  • 5
  • 30
  • 54
  • But in the graph there is an additional series 6. – J.He Jul 24 '17 at 06:27
  • check this https://jsfiddle.net/Ltdupscf/5/ from post comment https://stackoverflow.com/q/45327619/3898339 given by Grzegorz Blachliński. Using null or any non numeric values in csv – Deep 3015 Jul 26 '17 at 14:02