This is a snippet from my code:
$.get('https://dl.dropboxusercontent.com/u/75734877/data.csv', function (data) {
var lines = data.split('\n');
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if (lineNo === 0) {
$.each(items, function (itemNo, item) {
if (itemNo > 1) { // "DateTime" word in first line
options.series.push({
name: "Rainfall Intensity",
data: [],
tooltip: {
valueSuffix: " mm/hr."
},
color: "#0000ff"
}, {
name: "Accumulated Rainfall",
data: [],
tooltip: {
valueSuffix: " mm"
},
yAxis: 1,
color: "#ff0000"
});
}
});
} else {
$.each(items, function (itemNo, item) {
if (itemNo === 0) {
options.xAxis.categories.push(item);
} else if (itemNo === 2) {
options.series[2].data.push(parseFloat(item));
} else if (itemNo === 3) {
options.series[3].data.push(parseFloat(item));
}
});
}
});
var chart = new Highcharts.Chart(options);
});
While the graph displays correctly, there seems to be an issue with duplicated categories. I based this code on a similar example, but modified it to accommodate multiple series on the Y-axis, resulting in this problem.
Here's the image: