timechart = new google.visualization.Dashboard(document.getElementById('timechart'));
I get the undefined is not a function on this line. I have other charts initialized on the same page and they work fine. For reference, the rest of my relevant code:
var timechartGraph = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'timechart-graph',
'options': {
// Use the same chart area width as the control for axis alignment.
'legend': {'position': 'right'}
},
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [
{
'calc': function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 11);
},
'type': 'string'
},1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
});
var timechartRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'timechart-range-slider',
'options': {
// Filter by the date axis.
'filterColumnIndex': 11,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'hAxis': {'baselineColor': 'none'}
},
// Display a single series that shows the closing value of the stock.
// Thus, this view has two columns: the date (axis) and the stock value (line series).
'chartView': {
'columns': [11, 12]
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
//'minRangeSize': 86400000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
//'state': {'range': {'start': new Date(2012, 1, 9), 'end': new Date(2012, 2, 20)}}
});
timechartData = new google.visualization.DataTable();
timechart = new google.visualization.Dashboard(document.getElementById('timechart'));
timechart.bind(timechartRangeSlider, timechartGraph);
If you're loading just corechart right now, you're code probably looks something like this:
google.load('visualization', '1', {
'packages': ['corechart']
});
You have to load the controls package as well, like this:
google.load('visualization', '1', {
'packages': ['corechart', 'controls']
});
And that should make google.visualization.Dashboard defined.
Related
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"); -%>
My Chart has a datetime value and two number values (positive and negative).
The above image shows the results of drawing one bar, datetime being current date, the problem is, the bar covers 1990 to 2050, when it should only be covering the current month.
If I draw 2 bars, one for last month, and one for current month, everything is drawn properly.
I'm assuming GoogleCharts needs at least 2 dates for some reason. Does anyone have any idea how to fix this, or give some direction.
Thanks in advance,
Edit to ADD:
The Chart that I am using:
google.charts.load('current', {packages: ['corechart', 'controls']});
The single bar that I am drawing comes from this data store in historyChart:
[["2016-10-01T00:00:00+00:00", 5000.0, 0]]
I am inserting this data to the chart in this manner:
data.addColumn('datetime', 'Chart Filter');
data.addColumn('number');
data.addColumn('number');
data.addRows(historyChart);
The Chart wrapper and options are as followed:
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'programmatic_chart_div',
'options': {
displayExactValues:false,
vAxis: {
format: '$#,###', //add $sign in virtical axis
viewWindowMode: 'maximized',
},
hAxis:{
format: 'MMM-yyyy',
},
width: 900,
height: 450,
chartArea: {
'backgroundColor': {
'fill': '#F4F4F4',
'opacity': 100
},
top:50,
left:85,
width: 1000
},
title: "{{ member.username }}'s chart", //set user name as chart's title
isStacked:"true",
bar:{groupWidth: "95%"},
colors: ['#7FFF00', '#e6693e'],
}
});
// Create and draw the visualization.
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);
adding option for hAxis.ticks seems to help...
see following working snippet...
google.charts.load('43', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Chart Filter');
data.addColumn('number');
data.addColumn('number');
data.addRows([
[new Date("10/01/2016"), 5000.0, 0]
]);
var programmaticChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'programmatic_chart_div',
dataTable: data,
options: {
displayExactValues: false,
vAxis: {
format: '$#,###',
viewWindowMode: 'maximized'
},
hAxis:{
format: 'MMM-yyyy',
ticks: [new Date("10/01/2016")]
},
width: 900,
height: 450,
chartArea: {
backgroundColor: {
fill: '#f4f4f4',
opacity: 100
},
top: 50,
left: 85,
width: 1000
},
title: '{{ member.username }}\'s chart',
isStacked: 'true',
bar:{groupWidth: '95%'},
colors: ['#7fff00', '#e6693e']
}
});
programmaticChart.draw();
//dashboard.bind(programmaticSlider, programmaticChart);
//dashboard.draw(data);
},
packages: ['corechart', 'controls']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="programmatic_chart_div"></div>
I want to depict build status (Pass or fail) using a boolean type(true/false) on google's Calendar type charts. I am using the below HTML code for the same. But I am getting a red flag prompting me to add 2 columns . Any suggestions what could be wrong in this snippet ?
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["calendar"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'boolean',id :'pass/fail', role:'certainty' });
dataTable.addRows([
[ new Date(2012, 3, 13), true ],
[ new Date(2012, 3, 14), true ],
[ new Date(2012, 3, 15), true ],
[ new Date(2012, 3, 16), true ],
[ new Date(2012, 3, 17), false ]
// Many rows omitted for brevity.
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Build Execution Analytics",
height: 350,
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
</body>
</html>
each chart type has a specific Data Format
Calendar charts do not accept a boolean column
from the reference, allowed columns are...
column 0 -- date, datetime, or timeofday
column 1 -- number
column n -- string -- role: tooltip (optional)
I would suggest using a certain number for pass and another for fail
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id :'pass/fail' });
dataTable.addRows([
[ new Date(2012, 3, 13), 100 ], // pass
[ new Date(2012, 3, 14), 100 ], // pass
[ new Date(2012, 3, 15), 100 ], // pass
[ new Date(2012, 3, 16), 100 ], // pass
[ new Date(2012, 3, 17), 0 ] // fail
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
chart.draw(dataTable, {
title: 'Build Execution Analytics',
height: 350,
});
},
packages:["calendar"]
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>
I'm swinging between Highcharts and Google Charts to visualize my data. I like the charts produced by Highcharts, but I wonder whether Highcharts supports features like the Controls and Dashboard in Google Charts.
Below is a demo of how controls and dashboard in Google charts look like. If you run the code snippet, you can see two controls (a range slider and a gender filter) and two charts (a pie chart and a table chart). We can use the slider and filter to control how charts are displayed.
Can Highcharts do something like this? I didn't seem to find any related documentation. If it can, any sample code would be much appreciated.
// Load the Visualization API and the controls package.
google.load('visualization', '1.0', {
'packages': ['controls']
});
// Set a callback to run when the Google Visualization API is loaded.
google.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 = google.visualization.arrayToDataTable([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael', 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8]
]);
// 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'
}
});
// Create a category filter for gender
var genderFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'cfilter_div',
'ui': {
allowMultiple: false,
labelStacking: 'vertical'
},
'options': {
'filterColumnLabel': 'Gender'
}
});
// 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, 3]
}
});
var tableChart = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div'
});
// 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, tableChart]);
dashboard.bind(genderFilter, [pieChart, tableChart]);
// Draw the dashboard.
dashboard.draw(data);
}
<script src="https://www.google.com/jsapi"></script>
<div id="dashboard_div">
<table>
<tr>
<td>
<div id="filter_div"></div>
</td>
<td>
<div id="cfilter_div"></div>
</td>
</tr>
<tr>
<td>
<div id="chart_div"></div>
</td>
<td>
<div id="table_div"></div>
</td>
</tr>
</table>
</div>
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);