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"); -%>
Related
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>
Okay so I'm really new at this, so please bear with me. I'm trying to create a Google interactive line chart with custom HTML tooltips that are images from other sources around the web. But I can't get this to work; it won't even show up. This is what I have so far (guided by developers.google.com):
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
// Load the Visualization API and the chart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Date');
dataTable.addColumn('number', 'Slices');
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addRows([
['January 1, 2015', 3, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">'],
['January 2, 2015', 2, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">'],
['January 3, 2015', 5, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">'],
['January 4, 2015', 4, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">'],
['January 5, 2015', 2, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">']
]);
// Set chart options
var options = {
tooltip. {isHtml: true},
focusTarget: 'category',
'title':'How Much Pizza I Ate',
'width':900,
'height':400,
legend: { position: 'bottom' }
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}
</script>
</head>
I know I'm probably doing something completely wrong. I would appreciate someone's help. Thank you!
This is an error:
tooltip. {isHtml: true}
should be:
tooltip: {isHtml: true}
If that doesn't fix the issue, also try moving your callback into the load:
google.load('visualization', '1', {"callback" : drawChart, 'packages': ["corechart"]});
//google.setOnLoadCallback(drawChart);
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);
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.
I am trying to draw a baseline on a chart that uses date values to chart. Here is the code, and here is what the chart looks like:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Assignment');
data.addColumn('date', 'Dummy');
data.addRows([
['A', new Date(2011,1,1)],
['B', new Date(2012,1,1)],
['C', new Date(2013,1,1)],
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{
width:600, height:400,
hAxis: {baseline: new Date(2012,6,1), baselineColor: 'red'}
}
);
}
This is not the expected behavior -- the baseline is set to be on July 1st, 2012, yet it is appearing all the way to the left (January 1st, 2011).
If you do this with a non-date Axis chart, the behavior is different:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Assignment');
data.addColumn('number', 'Dummy');
data.addRows([
['A', 1],
['B', 2],
['C', 3],
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{
width:600, height:400,
hAxis: {baseline: 1.5, baselineColor: 'red'}
}
);
}
What the heck is going on here? Is it impossible to set the baseline of a date-axis chart?