I am trying to export google chart in a dashboard to png image through a button. But I get the following error-
One or more participants failed to draw()
undefined is not a function
Here is the code:
<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 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', 'Donuts eaten'],
['Michael' , 5],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var select = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Donuts eaten'
}
});
// Create a pie chart, passing some options
var chart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
'width': 500,
'height': 300,
'legend': 'right'
}
});
google.visualization.events.addListener(chart, 'ready', function(e) {
document.getElementById('png').outerHTML = 'Printable version';
});
// 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(select, chart);
// Draw the dashboard.
dashboard.draw(data);
}
</script>
</head>
<body>
<div id='png'></div>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
</body>
</html>
Please help me where I am going wrong.
A fiddle always helps!
https://jsfiddle.net/kujxsn7z/
The things I changed:
Created a div to hold the PNG output Your attempt to call
getImageURI() was failing because you were applying it on a
chartWrapper, not on a chart object. So to fix this you need to call,
in your instance:
chart.getChart().getImageURI()
So you reference your chartWrapper, use getChart to refer to the chart it contains, and then execute getImageIRI() on the chart object itself.
Related
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<div id="piechart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
var a = [['Work', 8], ['Eat', 2], ['TV', 4], ['Gym', 2], ['Sleep', 8], ['walk', 2], ['games', 2], ['chess', 2], ['drink', 4], ['dance', 6]];
a.sort(compareSecondColumn);
function compareSecondColumn(a, b) {
if (a[1] === b[1]) {
return 0;
}
else {
return (a[1] > b[1]) ? -1 : 1;
}
}
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],a[0],a[1],a[2],a[3],a[4]
]);
// Optional; add a title and set the width and height of the chart
var options = { 'title': 'the title', 'width': 550, 'height': 400 };
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</body>
</html>
i am using bar chart, it only display default blue color.
i have used an array which removes the column which doesnot have data(like 0)
like sorting the data
i want to display individual color for each column
like red, green any different colors for each bar
i like to add annotations also
thanks in advance
the column headings and values posted in the above comments seem to work fine here...
the only changes made...
add type property to style and annotation roles.
added different colors for style role.
see following working snippet...
var a = [['Work', 8, "#E53935", 8], ['Eat', 2, "#1E88E5", 2], ['TV', 4, "#43A047", 4]];
a.sort(compareSecondColumn);
function compareSecondColumn(a, b) {
if (a[1] === b[1]) {
return 0;
}
else {
return (a[1] > b[1]) ? -1 : 1;
}
}
google.charts.load('current', {
packages: ['corechart']
}).then(function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day', {role: 'style', type: 'string'}, {role: 'annotation', type: 'number'}],a[0],a[1],a[2]
]);
var options = {
title: 'the title',
width: 550,
height: 400,
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>
I want to show data values on the line chart, i.e. which appear on mouse over, i need them all displayed by default. I tried the solution here Google Charts API: Always show the Data Point Values in Graph
data.addColumn({type: 'number', role: 'annotation'});
I added this to my code (I'm not sure where to put it exactly) but It didn't make any change.
Here is part of my code:
<!DOCTYPE html>
<html>
<head>
<title>Week/Orders</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Week','Orders'],
<?php
while($row = mysqli_fetch_assoc($aresult)){
echo "['".$row["Week"]."', ".$row["Orders"]."],";
}
?>
]);
var options = {
title: 'Week Vs Orders',
'width':1700,
'height':600,
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curvechart" style="width: 900px; height: 400px"></div>
</body>
</html>
I have two values; Week and Orders. I need only the "Order" value displayed on the graph by default. How can I do this? Thanks.
you can use a DataView to add annotations to the chart
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = google.visualization.arrayToDataTable([
['Week','Orders'],
['1', 5],
['2', 6],
['3', 4]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var options = {
title: 'Week Vs Orders',
width: 1700,
height: 600,
legend: {position: 'bottom'}
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(view, options); // <-- use data view
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curvechart"></div>
I have the problem, that I dont manage to implement my data from a google spread sheet when using dashboard environment with chartwrapper and controlwrapper. I used the piechart example from the google charts website (https://developers.google.com/chart/interactive/docs/gallery/controls) and tried to modify without success. Maybe somebody can provide a pointer ! Thanks in advance (link to jsfiddle : https://jsfiddle.net/Chriseif/08mk90hu/1/#&togetherjs=MHq11Kn3hl)
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', {'packages':['corechart', 'controls']});
// 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() {
var query = new
google.visualization.Query("https://docs.google.com/spreadsheets/d/
1uJNf8RgPjcjm3pUWig0VL4EEww1PG-bNL8mtcxI6SYI/edit");
query.send(response);
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' '
+ response.getDetailedMessage());
return;
}
var data1 = response.getDataTable();
}
// 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': 'ChartRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnIndex ': 2
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart_div',
'options': {
'width': 900,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
// 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);
// Draw the dashboard.
dashboard.draw(data1);
}
</script>
</head>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
</body>
</html>
first, the query.send method is asynchronous, and accepts an argument for a callback function
because you need to wait for the data from the query,
all of the dashboard code should be inside the callback
else it will run before the data is returned...
// the argument should be the name of a function
query.send(handleQueryResponse);
// callback function to be called when data is ready
function handleQueryResponse(response) {
//draw dashboard here...
next, the range filter should operate on the column used for the x-axis
unless you are using a view, it will be column index 0 (zero is the first index)
var rangeSlider = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'filter_div',
options: {
filterColumnIndex: 0 // <-- x-axis column
}
});
also, when drawing charts from a spreadsheet,
you need to set a specific number format on each axis,
otherwise, it will display the word general as part of the number...
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
width: 900,
height: 300,
pieSliceText: 'value',
legend: 'right',
// set number formats
hAxis: {
format: '#,##0'
},
vAxis: {
format: '#,##0'
}
}
});
see following working snippet...
google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1uJNf8RgPjcjm3pUWig0VL4EEww1PG-bNL8mtcxI6SYI/edit");
query.send(handleQueryResponse);
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data1 = response.getDataTable();
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div')
);
var rangeSlider = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'filter_div',
options: {
filterColumnIndex: 0
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
width: 900,
height: 300,
pieSliceText: 'value',
legend: 'right',
hAxis: {
format: '#,##0'
},
vAxis: {
format: '#,##0'
}
}
});
dashboard.bind(rangeSlider, chart);
dashboard.draw(data1);
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
I have a set of
var data = new google.visualization.arrayToDataTable([
['Month', 'Rate', 'Interest', 'Principle', 'Balance','New Balance'],
['Jan', 321, 600, 816, 319, 890],
['Feb', 163, 231, 539, 594, 678],
]);
I want to Stack and Group the above data 2 at a time (Rate,Interest), (Principle, Balance) and last one New Balance as a separate Bar. How can this be achieved in Google charts.
I am new to this whole thing..any help appreciated here is some on info to get grouping data into 2 bars how can this be improved to fit my requirement.
How to make a grouped bar stack with Google charts?
using the option isStacked, if set to true, stacks the elements for all series at each domain value.
this means the values for all columns for each row will be displayed in one stack
as such, to create separate stacks, the data will need to be separated into rows
something like the following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month\nCategory', 'Bottom', 'Top'],
['Rate / Interest', 321, 600],
['Principle / Balance\nJan', 816, 319],
['New Balance', 890, null],
['Rate / Interest', 163, 231],
['Principle / Balance\nFeb', 539, 594],
['nNew Balance', 678, null],
]);
var options = {
height: 400,
isStacked: true,
legend: 'none',
width: 800
};
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(chartDiv);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Year', 'Asia', 'Europe'],
['2012', 900, 390],
['2013', 1000, 400],
['2014', 1170, 440],
['2015', 1250, 480],
['2016', 1530, 540]
]);
var options = {title: 'Population (in millions)', isStacked:true};
// Instantiate and draw the chart.
var chart = new google.visualization.BarChart(document.getElementById('container'));
chart.draw(data, options);
}`enter code here`
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
I want to show Google Pie Chart with tooltip. But, interactivity (like click) not required.
But, enableInteractivity = false removes toolTip by default. Is there anyway to show toolTip when enableInteractivity = false
enableInteractivity must be true for tooltips to work
but you can "cancel" the 'select' event by setting an empty selection
chart.setSelection([]);
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Percent', 10],
['Rest', 90],
]);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', function () {
chart.setSelection([]);
});
chart.draw(data);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>