Develop Reference

Include pie chart and sankey diagram in Google Charts dashboard

I'm trying to combine two charts and a filter, specifically a Pie Chart and Sankey Diagram with no success. There is a similar answered question, but the difference with my problem is that I am embedding my charts inside a dashboard so I can use the slicer filter.
I have tried several ideas to solve it but only the Pie Chart and the slicer appear or simply nothing appears.
Ideas I have tried:
Passing only the columns I need in the view property of the ChartWrapper class.
Naming the columns and casting the data types as shown in the examples for the Sankey diagram
Passing only the data I need to the Sankey through the dataTable property of the ChartWrapper class
For the moment, I have used the sample code from Google Charts documentation. What I am trying to do is to make appear both charts, so I can arrange de visualizations in the dashboard and then use my own data.
Thanks for the help!
Sample code bellow:
I include the loader in the partials/header file
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<%- include("partials/header"); -%>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', {
'packages': ['corechart', 'controls', 'sankey']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Donuts eaten');
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
['Michael', 5, 'A', 'X', 2],
['Elisa', 7, 'A', 'Y', 7],
['Robert', 3, 'A', 'Z', 6],
['John', 2, 'B', 'X', 1],
['Jessica', 6, 'B', 'Y', 9],
['Aaron', 1, 'B', 'Z', 4],
['Margareth', 8, 'C', 'X', 4]
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Donuts eaten'
},
'view': {
'columns': [0, 1]
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
},
'view': {
'columns': [0, 1]
}
});
var sankeyChart = new google.visualization.ChartWrapper({
'chartType': 'Sankey',
'containerId': 'sankey_div',
'options': {
'width': 600
},
'view': {
'columns': [2, 3, 4]
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, pieChart, sankeyChart);
// Draw the dashboard.
dashboard.draw(data);
}
</script>
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
<div id="sankey_div" style="width: 900px; height: 300px;"></div>
</div>
<%- include("partials/footer"); -%>

Making simple linechart, index error, google visualization

I'm trying to draw a line chart from a data table. This should be quite simple. The line chart draws just fine until I try to access a column further down the spreadsheet.
When I draw the data table for the second column like this I get an awesome linegraph:
var costsTable = new google.visualization.DataTable();
costsTable.addColumn('number', 'colIndex');
costsTable.addColumn('string', 'colLabel');
costsTable.addRow([0, data1.getColumnLabel(0)]); //month
costsTable.addRow([2, data1.getColumnLabel(2)]); //costs
BUT when I replace the second row with the sixth row:
costsTable.addRow([6, data1.getColumnLabel(6)]); //consumption
I get this error:
> Invalid row index undefined. Should be in the range [0-1].
I don't understand what is causing this error because I put in 2 as the index and it works just fine.
If I replace the second row with
costsColumnsTable.addRow([1, data3.getColumnLabel(2)]); //costs
I get the error:
> Data column(s) for axis #0 cannot be of type string
This doesn't make sense to me how the line graph can be drawn perfectly with an index of 2, but not six.
I've logged the values of the working dataTable, and it is indeed assigning the given indexes and receiving the specified column label.
The dataTable looks like:
0, Month
2, Amount Billed
Which are my chosen indexes and labels. However, I cannot do this with another index.
Here's my entire chart function:
function drawElectricalLine(data3){
var linechartCost = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'line_chart',
dataTable: data3,
options: {
animation:{
duration: 1000,
easing: 'out',
},
width: 800,
height: 400,
title: 'Monthly Electric Costs',
explorer: {},
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Amount Billed ($)'
//' Consumption (kWh)'
}
}
});
var initState= {selectedValues: []};
var costsColumnsTable = new google.visualization.DataTable();
costsColumnsTable.addColumn('number', 'colIndex');
costsColumnsTable.addColumn('string', 'colLabel');
costsColumnsTable.addRow([0, data3.getColumnLabel(0)]); //month
costsColumnsTable.addRow([2, data3.getColumnLabel(2)]); //costs
//costsColumnsTable.addRow([6, data3.getColumnLabel(6)]); //costs ---> causes error
initState.selectedValues.push(data3.getColumnLabel(2));
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'electrical_selector',
dataTable: costsColumnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: '',
caption: 'Consumption',
allowTyping: false,
allowMultiple: true,
allowNone: false
}
},
state: initState
});
setChartView(linechartCost, costsColumnsTable, columnFilter);
}//end drawElectricalLine
function setChartView(linechart, columnsTable, columnFilter) {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
linechart.setView(view);
linechart.draw();
}
All I'm trying to do is draw a basic line chart from my month column data1.getColumnLabel(0) and my consumption column data1.getColumnLabel(6)
And I do not see why I cannot assign a different index without getting an error.
UPDATE:
I fixed the first column to be type string. My data1.getColumnLabel(0) is not even in index 1 :(

google.visualisation.DataTable() positioning pagination div

I have this data in a Google DataTable:
And I want to position the page buttons on top of the table. But it seems to me Google doesn't support to do this. Is there any best approach do you guys know?
HERE IS jsfiddle link what I am trying now.
jsfiddle.net/Kwangsub_Ahn/ohh8397h/7/
HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>
JAVASCRIPT
google.load("visualization", "1.1", {
packages: ["table"]
});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('string', 'Project');
data.addColumn('string', 'System');
data.addColumn('number', 'No');
data.addRows([
['7/31/2014', 'project1', 'system1', 5],
['5/2/2014', 'project2', 'system2', 2],
['5/2/2014', 'project1', 'system1', 5],
['1/31/2014', 'project3', 'system4', 1]
]);
var view = new google.visualization.DataView(data);
var id = document.getElementById('table_div');
var table = new google.visualization.Table(id);
table.draw(view, {
allowHtml: true,
width: '100%',
height: '100%',
page: 'enable',
pageSize: 10
});
}

1) there aren't any standard options you can set,
but you can move the button row manually,
when the chart's 'ready' and 'page' events fire
google.visualization.events.addListener(table, 'ready', moveButtons);
google.visualization.events.addListener(table, 'page', moveButtons);
function moveButtons() {
var content = id.children[0].children[1];
var parent = content.parentNode;
parent.insertBefore(content, parent.children[0]);
}
2) the chart will move the buttons back to the bottom after the 'sort' and 'page' events...
using moveButtons for the 'page' event works fine,
but need to handle 'sort' differently
if you don't want to allow sorting, simply set the following option, and don't attach an event...
sort: 'event'
if you want to allow sorting, you'll still need to set the above option,
but you'll also have to handle manually sorting the table
sort: 'event'
google.visualization.events.addListener(table, 'sort', sortTable);
function sortTable(sortOptions) {
data.sort([{
column: sortOptions.column,
desc: !sortOptions.ascending
}]);
options.sortColumn = sortOptions.column;
options.sortAscending = sortOptions.ascending;
table.draw(data, options);
}
see following working snippet...
google.charts.load('current', {
callback: drawTable,
packages: ['table']
});
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('string', 'Project');
data.addColumn('string', 'System');
data.addColumn('number', 'No');
data.addRows([
['7/31/2014', 'project1', 'system1', 5],
['5/2/2014', 'project2', 'system2', 2],
['5/2/2014', 'project1', 'system1', 5],
['1/31/2014', 'project3', 'system4', 1]
]);
var options = {
allowHtml: true,
width: '100%',
height: '100%',
page: 'enable',
pageSize: 2,
sort: 'event'
};
var id = document.getElementById('table_div');
var table = new google.visualization.Table(id);
google.visualization.events.addListener(table, 'ready', moveButtons);
google.visualization.events.addListener(table, 'page', moveButtons);
function moveButtons() {
var content = id.children[0].children[1];
var parent = content.parentNode;
parent.insertBefore(content, parent.children[0]);
}
google.visualization.events.addListener(table, 'sort', sortTable);
function sortTable(sortOptions) {
data.sort([{
column: sortOptions.column,
desc: !sortOptions.ascending
}]);
options.sortColumn = sortOptions.column;
options.sortAscending = sortOptions.ascending;
table.draw(data, options);
}
table.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
note: recommend using the newer library loader.js (vs. jsapi), according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.
this will only change the load statement, see above snippet...

Data column(s) for axis #0 cannot be of type string in google chart dashboard [duplicate]

This question already has answers here:
Data column(s) for axis #0 cannot be of type string error in google chart
(6 answers)
Closed 6 years ago.
I am trying to make a google chart dashboard and tried the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
var listOfValues = document.getElementById("id1").value ;
var temp2 = null;
var temp3 = null ;
var longArray = ['Year','Positive','Negative','Neutral','Comments','Status','Score'];
var shortArrays = [], m, len;
var arrayOfArray = [];
var temp = listOfValues.split("-");
for(var i=0; i<temp.length; i++){
temp2 = temp[i].split(',');
if(temp2.length == 7){
for(var j=0; j<temp2.length;j++){
temp3 = temp2[j].split(',');
longArray.push(temp3[0]);
}
}
}
for (m = 0, len = longArray.length; m < len; m += 7) {
shortArrays.push(longArray.slice(m, m + 7));
console.log(shortArrays);
}
for (m = 0, len = shortArrays.length; m < len; m++) {
arrayOfArray.push(shortArrays[m]);
}
// Prepare the data
var data = google.visualization.arrayToDataTable(arrayOfArray);
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Year',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Define a category picker control for the Gender column
var categoryPicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPick2',
'options': {
'filterColumnLabel': 'Status',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
//Define a combo chart
var combo = new google.visualization.ChartWrapper({
'chartType':'ComboChart',
'containerId':'chart2',
'options': {
'title' : 'Sentiment Analysis',
// setting the "isStacked" option to true fixes the spacing problem
'isStacked': false,
'height': 300,
'width': 300,
'vAxis': {title: "Sentiment"},
'hAxis': {title: "Month"},
'seriesType': "bars",
'series': {5: {type: "line"}}
},
// 'view': {'columns': [0, 1,2,3]}
'view': {
// set the columns to use in the chart's view
// calculated columns put data belonging to each country in the proper column
columns: [0,1,2,3]
}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart4',
'options': {
'view': {'columns': [1,2]},
'width': '700px',
'height':'100px'
}
});
// Define a table
var table2 = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table2',
'options': {
'width': '200px'
},
'view': {'columns': [0,5]}
});
//Define a line chart
var line = new google.visualization.ChartWrapper({
'chartType':'LineChart',
'containerId':'lineChart',
'options': {
'label':'Sentiment Analysis'
},
'view': {'columns': [4,6]}
});
// Create a dashboard
// new google.visualization.Dashboard(document.getElementById('dashboard'));
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([categoryPicker2], [line,table2]).
bind([categoryPicker], [combo,table]).
// Draw the entire dashboard.
draw(data);
//draw(data2);
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
<div id="categoryPick2"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
<div style="float: right;" id="chart3"></div>
<div style="float: right;" id="chart4"></div>
<div style="float: right;" id="lineChart"></div>
<div style="float: right;" id="table2"></div>
</td>
</tr>
</table>
<input type="hidden" id="id1" value=" ${listVal}" />
<input type="hidden" id="id2" value=" ${header1}" />
</div>
<div id="chart_div2" ></div>
</body>
</html>
After executing this code I get table data clearly; but, it doesn't show the chart properly (I have used combo chart and Line chart). It is throwing the following error:
"Data column(s) for axis #0 cannot be of type string"
Can someone please tell how to solve this issue.
Thanks.
when you alert listOfValues you will get these values :
2010,84,65,45,facebook,bad,12345-2011,64,75,85,facebook,bad,2345-
Basically these are two rows in database which i have separated by a hyphen. Please let me know if you need further details.

Your data series must be type "number" in order to draw a chart (your x-axis data can be type "string"). Since you are spliting a string into an array, the array elements will all be strings. Assuming all of your data is numeric, you can replace this line:
longArray.push(temp3[0]);
with this:
longArray.push(parseFloat(temp3[0]));
or this, if your data is all integers:
longArray.push(parseInt(temp3[0], 10));
[Edit: more complete answer to deal with different datatypes]
There are two ways you can address this. The first way is to define your column data types up front:
var longArray = [
{label: 'Year', type: 'number'},
{label: 'Positive', type: 'number'},
{label: 'Negative', type: 'number'},
{label: 'Neutral', type: 'number'},
{label: 'Comments', type: 'string'},
{label: 'Status', type: 'string'},
{label: 'Score', type: 'number'}
];
You can also do some crude type detection when inputting your data:
for(var i=0; i<temp.length; i++){
temp2 = temp[i].split(',');
if(temp2.length == 7){
for(var j=0; j<temp2.length;j++){
// this does nothing except make temp2[j] into a 1-element array
// temp3[0] === temp2[j], since you split on ',' already
temp3 = temp2[j].split(',');
if (temp3[0] == parseInt(temp3[0])) {
longArray.push(parseInt(temp3[0]));
}
else if (temp3[0] == parseFloat(temp3[0])) {
longArray.push(parseFloat(temp3[0]));
}
else {
longArray.push(temp3[0]);
}
}
}
}
You can combine these two methods just in case something slips through. See them working here: http://jsfiddle.net/asgallant/xLKcx/
As an aside, I suggest cleaning up your code - you have a lot of spaghetti code in your section building the data array. Here's a simpler version: http://jsfiddle.net/asgallant/xLKcx/1/

Google Charts: How to replace data table elements in visualization, but not in original table (DataView approach not working)?

I'm trying to perform a fairly basic procedure. I have a lengthy data table with large cell sizes to use with Google Visualization. Before creating the page I'd like to replace the large cells with codes and abbreviations to keep the file sizes and loading times down. I can handle that. However, when a cell or column value/name/label shows up in the visualization itself I'd like to see a longform version of the value (ex. 'Male' in original dataset -> 'M' in Google Visualization data table -> 'Male' in category filter dropdown, tooltip, etc.), and this has been unexpectedly problematic.
I've tried to replicate the issue (and my failed attempt to fix it) in the modified Google Playground example below. In this example I've changed the initial dataset to have 'M' and 'F' in the Gender column, and I still want the visualization to display 'Male' and 'Female' in the dropdown and the displayed table as it does in the original visualization.
My attempt to fix is labeled ATTEMPT TO FIX GENDER below; basically, I'm trying to create a DataView of the original table and replace the Gender column with a calculated column transforming the 'M's and 'F's into 'Male's and 'Female's...but I'm not sure if this is a wise approach, even if I could get it to work (which I can't). The point of this runaround is to avoid replacing every short value in the original table with a long one; I only want to replace table values as they are being displayed in the visualization. But I can't find another approach here or elsewhere, and I'm a bit new to this stuff so I don't think I can come up with one without some guidance. At least, not if the past several hours of failure are any indication.
Any advice or suggestions would be sorely appreciated. The original code example is here.
function drawVisualization() {
// Prepare the data
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Gender');
data.addColumn('number', 'Age');
data.addColumn('number', 'Donuts Eaten');
data.addRows([
['Michael' , 'M', 12, 5],
['Elisa', 'F', 20, 7],
['Robert', 'M', 7, 3],
['John', 'M', 54, 2],
['Jessica', 'F', 22, 6],
['Aaron', 'M', 3, 1],
['Margareth', 'F', 42, 8],
['Miranda', 'F', 33, 6]
]);
*******//ATTEMPT TO FIX GENDER
/*var sexfix = function (data, row) {
var val = data.getValue(row, 1);
switch (val) {
case 'M':
val = 'Male';
break;
case 'F':
val = 'Female';
break;
default:
alert('error');
return 'Error!';
}
}
var dview = new google.visualization.DataView(data);
dview.setColumns([0,{calc: sexfix, type:'string'}, 2, 3]);
********/
// Define a slider control for the Age column.
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Age',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Gender',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'title': 'Donuts eaten per person',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
'pieSliceText': 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
// from the 'data' DataTable.
'view': {'columns': [0, 3]}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker], [pie, table]).
// Draw the entire dashboard.
draw(data);
}
​
EDIT: Solution below. In summary:
1) under dview.setColumns, include a label name as an option (e.g., "label: 'Gender'") so that controls and charts can refer to the calculated column by label;
2) draw the view, not the table (final line should be: "draw(dview)");
3) change the variable renaming in my sexfix code from general format "var = 'X'" to "return: {v: 'X' f: 'Xxxxxx'}"; and
4) either add the line "addFormattedValue: true" or use the "view:" option in the ControlWrappers and ChartWrappers to display formatted values.

I suspect that you have two problems in your code. The first is that when you added the "Gender" column to the DataView, you left off the column label, which is needed because your gender filter has the filterColumnLabel option set instead of filterColumnIndex. Add the label in to fix:
{calc: sexfix, type:'string', label: 'Gender'}
The second problem is that you are drawing your Dashboard with the DataTable instead of the DataView:
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker], [pie, table]).
// Draw the entire dashboard.
draw(dview);