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>
Related
I've created google line chart with the following settings:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
var options = {
backgroundColor:{fill:'transparent'},
legend:'none',
series:{0:{color:'#aa8e57'}},
lineWidth:4,
pointSize:7,
chartArea:{width: '86%'},
hAxis:{
textStyle:{color:'#ffffff',fontSize:12},
gridlines:{color:'#2a261d'},
baselineColor:'#b19c72'
},
vAxis:{
textStyle:{color:'#ffffff',fontSize:12},
gridlines:{color:'#2a261d'},
baselineColor:'#b19c72'
},
};
var dataMembers = new google.visualization.DataTable();
dataMembers.addColumn('string', 'Date');
dataMembers.addColumn('number', 'Users');
dataMembers.addRows([
['13.11.2018',5], ['14.11.2018',7], ['15.11.2018',10]
]);
var membersChart = new google.visualization.LineChart(document.getElementById('membersChart'));
membersChart.draw(dataMembers, options);
}
I read all docs and cant find out how to customize those white extra lines:
I've done a lot of experiments, but i can't find out how they appears and how to remove them from the chart. Or at least, change their color to match rest of gridlines.
those are --> minorGridlines
for the same color...
minorGridlines:{color:'#2a261d'},
to remove...
minorGridlines:{count:0},
see following working snippet...
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
var options = {
backgroundColor:{fill:'transparent'},
legend:'none',
series:{0:{color:'#aa8e57'}},
lineWidth:4,
pointSize:7,
chartArea:{width: '86%'},
hAxis:{
textStyle:{color:'#ffffff',fontSize:12},
gridlines:{color:'#2a261d'},
minorGridlines:{color:'#2a261d'},
baselineColor:'#b19c72'
},
vAxis:{
textStyle:{color:'#ffffff',fontSize:12},
gridlines:{color:'#2a261d'},
minorGridlines:{color:'#2a261d'},
baselineColor:'#b19c72'
},
};
var dataMembers = new google.visualization.DataTable();
dataMembers.addColumn('string', 'Date');
dataMembers.addColumn('number', 'Users');
dataMembers.addRows([
['13.11.2018',5], ['14.11.2018',7], ['15.11.2018',10]
]);
var membersChart = new google.visualization.LineChart(document.getElementById('membersChart'));
membersChart.draw(dataMembers, options);
}
body {
background-color: #000000;
}
#membersChart {
height: 600px;
width: 800px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="membersChart"></div>
This is my sample material bar graph and i want the image uri for the plotted graph
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'vertical', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
console.log(chart.getImageURI());
};
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dual_x_div" style="width: 900px; height: 500px;"></div>
But the console giving me error like
chart.getImageURI is not a function
you can use html2canvas
you'll need the following two files from the build
<script src="html2canvas.js"></script>
<script src="html2canvas.svg.js"></script>
then on the chart's 'ready' event...
google.visualization.events.addListener(chart, 'ready', function () {
// add svg namespace to chart
$(chartContainer).find('svg').attr('xmlns', 'http://www.w3.org/2000/svg');
// get image uri
html2canvas(chartContainer, {
allowTaint: true,
taintTest: false
}).then(function(canvas) {
console.log(canvas.toDataURL('image/png'));
});
});
UPDATE
another method is to convert the svg to an image and draw it on a canvas,
then pull the uri from the canvas...
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'vertical', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chartContainer = document.getElementById('dual_x_div');
var chart = new google.charts.Bar(chartContainer);
google.visualization.events.addListener(chart, 'ready', function () {
var canvas;
var domURL;
var imageNode;
var imageURL;
var svgParent;
// add svg namespace to chart
domURL = window.URL || window.webkitURL || window;
svgParent = chartContainer.getElementsByTagName('svg')[0];
svgParent.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
imageNode = chartContainer.cloneNode(true);
imageURL = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'}));
image = new Image();
image.onload = function() {
canvas = document.getElementById('canvas');
canvas.setAttribute('width', parseFloat(svgParent.getAttribute('width')));
canvas.setAttribute('height', parseFloat(svgParent.getAttribute('height')));
canvas.getContext('2d').drawImage(image, 0, 0);
console.log(canvas.toDataURL('image/png'));
}
image.src = imageURL;
});
chart.draw(data, options);
});
.hidden {
display: none;
visibility: hidden;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dual_x_div"></div>
<canvas class="hidden" id="canvas"></canvas>
I noticed this question was posted three years ago. Google Charts probably have had quite a few updates since then. According to Google Charts though, getImageURI should work for all core charts and geocharts. The chart in question is a bar chart, which is one of the core charts of Google Charts. So, getImageURI should work. Looking at your first line of codes, you specify bar as the packages. You need to change it to say corechart. So, you will have like the following line
google.charts.load('current', {packages: ['corechart']});
And then further down, change the chart definition to var chart = new google.visualization.BarChart(document.getElementById('dual_x_div'));
After making these changes, chart.getImageURI() should return what you want. I recently did a bar chart myself and that's how I got mine to work.
This is my sample material bar graph and i want the image uri for the plotted graph
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'vertical', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
console.log(chart.getImageURI());
};
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dual_x_div" style="width: 900px; height: 500px;"></div>
But the console giving me error like
chart.getImageURI is not a function
you can use html2canvas
you'll need the following two files from the build
<script src="html2canvas.js"></script>
<script src="html2canvas.svg.js"></script>
then on the chart's 'ready' event...
google.visualization.events.addListener(chart, 'ready', function () {
// add svg namespace to chart
$(chartContainer).find('svg').attr('xmlns', 'http://www.w3.org/2000/svg');
// get image uri
html2canvas(chartContainer, {
allowTaint: true,
taintTest: false
}).then(function(canvas) {
console.log(canvas.toDataURL('image/png'));
});
});
UPDATE
another method is to convert the svg to an image and draw it on a canvas,
then pull the uri from the canvas...
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'vertical', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chartContainer = document.getElementById('dual_x_div');
var chart = new google.charts.Bar(chartContainer);
google.visualization.events.addListener(chart, 'ready', function () {
var canvas;
var domURL;
var imageNode;
var imageURL;
var svgParent;
// add svg namespace to chart
domURL = window.URL || window.webkitURL || window;
svgParent = chartContainer.getElementsByTagName('svg')[0];
svgParent.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
imageNode = chartContainer.cloneNode(true);
imageURL = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'}));
image = new Image();
image.onload = function() {
canvas = document.getElementById('canvas');
canvas.setAttribute('width', parseFloat(svgParent.getAttribute('width')));
canvas.setAttribute('height', parseFloat(svgParent.getAttribute('height')));
canvas.getContext('2d').drawImage(image, 0, 0);
console.log(canvas.toDataURL('image/png'));
}
image.src = imageURL;
});
chart.draw(data, options);
});
.hidden {
display: none;
visibility: hidden;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dual_x_div"></div>
<canvas class="hidden" id="canvas"></canvas>
I noticed this question was posted three years ago. Google Charts probably have had quite a few updates since then. According to Google Charts though, getImageURI should work for all core charts and geocharts. The chart in question is a bar chart, which is one of the core charts of Google Charts. So, getImageURI should work. Looking at your first line of codes, you specify bar as the packages. You need to change it to say corechart. So, you will have like the following line
google.charts.load('current', {packages: ['corechart']});
And then further down, change the chart definition to var chart = new google.visualization.BarChart(document.getElementById('dual_x_div'));
After making these changes, chart.getImageURI() should return what you want. I recently did a bar chart myself and that's how I got mine to work.
I need a one column column-chart that has a vertical axis from 0 to 150000 and a bar that fills it (they have met their deductible completely). I thought I had what I read to do this as below, but that gives me a vertical axis of 0 to 400,000 and a bar up to 150,000.
Alternatively, I could use suggestions on how to display a single field whereas one can pay in full or in 4 payments to meet that deductible.
PLEASE help!
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(barDisassembly);
function barDisassembly() {
var data = google.visualization.arrayToDataTable([
['Categories', 'Disassembly Fee'],
['N-1701', 150000]
]);
var options = {
chart: {
width: 200,
height: 400,
legend: { position: 'top', maxLines: 3 },
vAxis: {
viewWindowMode:'explicit',
viewWindow:{
max:150000,
min:0
}
}
}
};
var bar = new google.visualization.ColumnChart(document.getElementById('bar_disassembly'));
bar.draw(data, options);
}
</script>
Remove chart from the options.
The only configuration options associated with chart are subtitle and title...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(barDisassembly);
function barDisassembly() {
var data = google.visualization.arrayToDataTable([
['Categories', 'Disassembly Fee'],
['N-1701', 150000]
]);
var options = {
width: 400,
height: 400,
legend: {
position: 'top',
maxLines: 3
},
vAxis: {
viewWindow: {
max: 150000,
min: 0
}
}
};
var bar = new google.visualization.ColumnChart(document.getElementById('bar_disassembly'));
bar.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="bar_disassembly"></div>
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.