Feeding a combo highchart from Google Spreadsheet or json - highcharts

Question

I'm doing a combo scatter and line charts (it's a electoral poll tracker) following this example from HC docs:
series: [{
type: 'scatter',
name: 'Party1',
data: [10.1,9.2,9.8]
}, {
type: 'scatter',
name: 'Party2',
data: [6.5,6.5,6.8]
}, {
type: 'spline',
name: 'Party1-tracker',
data: [10.1,9.8,10.0]
}, {
type: 'spline',
name: 'Party2-tracker',
data: [6.5,6.5,6.6]
}]
On another document, I can make a chart from a Google Spreadsheet. I've followed this Jack Dougherty example: https://jackdougherty.github.io/highcharts-with-google-sheets/bubble.html
data: {
// insert the key from your public Google Sheet
googleSpreadsheetKey: '1fYJOd-2agLPg38qhblS8qoZGWGkKcK-3uTsMpf37Hys',
// insert Google Sheet column headers (x, y, z...) to match column numbers (0, 1, 2...)
seriesMapping: [{x: 0, y: 1, z: 2, name: 3, country: 4, category: 5}],
complete: function(data) {
categoriesIntoSeries(data);
changeSeriesColors(data);
}
},
plus
/**
* Here, all data is split into categories depending on the 'category' property
* Needed for correct legend display
*/
function categoriesIntoSeries(data) {
rows = data.series[0].data;
data.series = [];
for (i = 0; i < rows.length; i++) {
cat = rows[i].category;
catExists = false;
for (j = 0; j < data.series.length; j++) {
if (data.series[j].name == cat) {
// Add a data point to existing series
data.series[j].data.push(rows[i]);
catExists = true;
}
}
if (!catExists) {
// When category is encountered for the first time, create a series
data.series.push({name: cat, data: [rows[i]]})
}
}
}
What I've tried unsuccessfully is (maybe it's impossible) to connect each column from my spreadsheet to each 'series' element. Something like this:
{
type: 'scatter',
name: 'Party1',
data: /*get data from spreadsheet column 1 or a json field*/
}
I'll be thankful if you can tell us if it's possible and, if yes, point me to some documentation or example on how to do this

Answer 1

You can use seriesMapping array for this. It should contain a mapping for every column from the sheet.
Refer to this live demo: http://jsfiddle.net/kkulig/b45s1Luh/
seriesMapping: [{
x: 0,
y: 1 // first column series
}, {
x: 0,
y: 2 // second column series
}, {
x: 0,
y: 3 // third column series
}]
}
API reference: https://api.highcharts.com/highcharts/data.seriesMapping