Reputation: 13
I want to write my own custom Data Visualization for Google Data Studio using Chart.js. But how can I connect the Data from Google Datastudio to my own Chart?
I'm developing it locally so I've followed the suggestions over here: https://developers.google.com/datastudio/visualization/library-guide but I don't fully comprehend them.
I tried the following to get the Data:
var rowData = data.tables.DEFAULT;
var arrayOfObjects = dscc.rowData.rows.map(function(d) {
return {
dimID: d.dimID[0]
};
});
and then connecting it to my Chart configuration:
new Chart(ctx, {
type: "polarArea",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
// data: [12, 15, 10, 5, 2, 3],
data: arrayOfObjects
}
]
},
options: {}
});
I thought I could get back an array of Objects and use this in my Chart.js data configuration but I get the following error:
Uncaught TypeError: Cannot read property 'rows' of undefined at drawViz (index.js:36) at eval (index.js:82), etc.
How would I get the data into my chart? (Sorry my English is not the best, I hope I could explain it in a comprehensive way)
Upvotes: 1
Views: 466
Reputation: 156
The Chart.js configuration you're looking at seems to be expecting an array of numbers. To get that, I'd use the objectTransform
.
Assuming this polar area chart is taking 1 metric (values) and 1 dimension (labels), and the configIds are (metricID
and dimensionId
), I'd write code that's something like:
const drawViz(data){
const rows = data.tables.DEFAULT;
// obtain an array of dimension values (for the labels)
const labels = rows.map((d) => d['dimensionId'][0])
// obtain an array of values (from the metric selected)
const vals = rows.map((d) => d['metricId'][0])
new Chart(ctx, {
type: "polarArea",
data: {
labels: labels,
datasets: [
{
data: vals
}
]
},
options: {}
});
}
dscc.subscribeToData(drawViz, {transform: objectTransform});
Upvotes: 1