CODEWITHSUNDEEP
javascriptcsvhighcharts
eifersucht
eifersucht

Reputation: 691

How to show categorized Highcharts Chart using csv file

I'm trying to show a Chart with Highcharts, using javascript.

I've read the csv file using Highcharts modules/data.js and the Chart is showing without problems inside my container. enter image description here

mychart = Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    zoomType: 'xy'
  },
  data: {
    csv: csv,
    startColumn:0,
    endColumn:2
  },
  title: {
    text: 'DATA'
  },
  xAxis: {
    title: {
      text: 'X'
     },
  },
  yAxis: {
    title: {
      text: 'Y'
    }
  }
});

Basically the csv have 3 columns, with commas separating attributes and break lines for each row.

x, y, category
data1, data2, data3
data1, data2, data3
data1, data2, data3
data1, data2, data3
data1, data2, data3
...

The first and the seconds columns are the points coordinates and the third is the category. I want to display points based on one of the categories in the third row.

I don't know how to show all x & y points categorized by category column.

Upvotes: 0

Views: 174

Answers (1)

morganfree
morganfree

Reputation: 12472

You can think of a category as a series in Highcharts. So you need to create an array like this

series: [{
  name: 'Series ' + categoryNumber,
  data: [] // array with x and y coordinates
}, {
  name: ''
  data: []
}]

Then you can parse your csv file, it would be easier without data module.

var rows = csv.split('\n');

var series = [];
rows.forEach(row => {
  var cells = row.split(',').map(Number);
  var serie = series[cells[2]];

  if (!serie) {
    serie = series[cells[2]] = {data: []};
  }

  serie.data.push([cells[0], cells[1]]);
})

Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },

  series: series

});

example: http://jsfiddle.net/w7ug4dbw/

There is important for the chart series that you will not have gaps in your category - so if you have categories 0 - 2, you need to have data for all 0,1,2 category - if you don't, then you can receive the errors while using the chart. To overcome that, you would need to loop through the series array and delete all the gaps.

Upvotes: 1

Related Questions