I want to add start up animation in google Column chart on starting the chart in Android Application. I tried to run the code given at GoogleChart that is
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
I have added the animation properties as:
animation: {
duration: 1000,
easing: 'linear',
startup: true
},
But the chart is not animating in Android App on the start.
I also tried to run the code in browser, the chart is working fine but is not animating.
there are several options Material charts do not support, including animation
see --> Tracking Issue for Material Chart Feature Parity #2143
Material charts --> google.charts.Bar -- packages: ['bar']
Core charts --> google.visualization.ColumnChart -- packages: ['corechart']
using a Core chart with the following option will display similar to Material
theme: 'material'
when using animation, the option is not part of any other
the code in the question has animation as part of chart -- (chart.animation)
it would be more like...
var options = {
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
see following working snippet for animation using Core chart...
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
height: 600,
theme: 'material',
title: 'Company Performance'
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_material"></div>
note: Core chart does not have option for chart
Related
In the code, I am trying to add a hyperlink below the chart. As I click it, it will take me to a new tab with a google chart image for download.Any helps?
https://codepad.remoteinterview.io/KOURCFTBEG
As I viewed a lot of examples, most of them put
google.visualization.events.addListener(chart, 'ready',function() {
console.log(chart.getChart().getImageURI());
document.getElementById('png').innerHTML = '<a href="' +
chart.getChart().getImageURI() + '">Printable version</a>';
});
It seems to me that this would create a downloadable link to an image of the google chart on the <div id=png>But in my case, no link or clickable button is created.
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawBar);
function drawBar() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2013', 1001, 401, 201],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
//---------------------------//
var chart = new google.charts.Bar(document.getElementById('chart_div'));
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function() {
console.log(chart.getChart().getImageURI());
document.getElementById('png').innerHTML = 'Printable version';
});
chart.draw(data, options);
}
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']},{'name':'visualization','version':'1.0','packages':['controls']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id='png'></div>
</body>
I followed the online source as similar as I can, but still get error like chart.getURI() is not function.
Here is the online source I referred most. Here is Fiddle.
Try this
<a href="link_to_image_download" target=_blank>Download here</a>
if you don't have a link to download, go to imgur.com and upload the image and add the share link into your href=
You can use print() as suggested by Google Developer API.
Here is the thing I assume you're looking for:
https://developers.google.com/chart/interactive/docs/printing
By removing getChart() in chart.getChart().getImageURI()and
,in package, by modifying bar to corechart can do the work.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBar);
function drawBar() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2013', 1001, 401, 201],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
//---------------------------//
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function() {
// console.log(chart.getImageURI());
document.getElementById('png').innerHTML = 'Printable version';
});
chart.draw(data, options);
}
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']},{'name':'visualization','version':'1.0','packages':['controls']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id='png'></div>
</body>
We have a Silverstripe project that uses the silverstripe-wkhtmltopdf module to output HTML/CSS/Javascript as PDF.
Simple Javascript like document.write works but I want to output Google Charts using their visualisation API:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', {packages: ['corechart', 'bar']});
</script>
The PDF wasn't showing any of the visualisation output so I used QTBrowser to debug the Javascript - as suggested here: Debugging javascript in wkhtmltopdf
The error I'm getting in QTBrowser is: Error: one or more fonts could not be loaded. from https://www.google.com/uds/api/visualization/1.0/b5ac9efed10eef460d14e653d05f5fbf/webfontloader,dygraph,format+en,default+en,ui+en,bar+en,corechart+en.I.js:737
The HTML looks correct at my end but I don't know the compatibility of QTBrowser, or how it relates to wkhtmltopdf.
Has anyone had any experience/ success with using wkhtmltopdf to output Google Charts?
Here's a good post which explains this topic and shows you how to achieve it
http://codingexplained.com/coding/php/using-google-visualization-with-wkhtmltopdf
<script type="text/javascript">
function init() {
google.load("visualization", "1.1", { packages:["corechart"], callback: 'drawCharts' });
}
function drawCharts() {
drawAccountImpressions('chart-account-impressions');
}
function drawAccountImpressions(containerId) {
var data = google.visualization.arrayToDataTable([
['Day', 'This month', 'Last month'],
['01', 1000, 400],
['05', 800, 700],
['09', 1000, 700],
['13', 1000, 400],
['17', 660, 550],
['21', 660, 500],
['23', 750, 700],
['27', 800, 900]
]);
var options = {
width: 700,
height: 400,
hAxis: { title: 'Day', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
curveType: 'function',
chartArea: {
top: 30,
left: 50,
height: '70%',
width: '100%'
},
legend: 'bottom'
};
var chart = new google.visualization.LineChart(document.getElementById(containerId));
chart.draw(data, options);
}
</script>
</head>
<body onload="init()">
<div id="chart-account-impressions"></div>
</body>
I'm using the google Material Charts static api library and I cannot figure out why the background color I"m entering is not reflecting the change when the page loads.
Here are the options I have:
var options = {
backgroundColor: '#E8E4D8',
chart: {
title: 'Coaches by Service',
subtitle: 'Coaches by Services: From 2016-09-10 until Today'
}
};
And here is how I'm instantiating the chart:
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
The chart title and subtitle are correctly displaying, any advice as to why the background color remains as the default white would be greatly appreciated.
Is there more you can share? Appears to work here...
Maybe, check the version you're loading.
Here, I use frozen version '44', instead of 'current'.
There have been recent issues.
google.charts.load('44', {
callback: drawChart,
packages: ['bar']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
backgroundColor: '#E8E4D8',
chart: {
title: 'Coaches by Service',
subtitle: 'Coaches by Services: From 2016-09-10 until Today'
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
For me it was missing google.charts.Bar.convertOptions
Originally it was like this.
chart.draw(data, options);
This works:
chart.draw(data, google.charts.Bar.convertOptions(options));
This question has been asked before, but in regards to the old corechart API, which I haven't had a problem with, not the new Material charts. For instance, the following code will create two charts as expected:
var data = [
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
];
google.load('visualization', '1', {
'packages': ['corechart']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
new google.visualization.ColumnChart(document.getElementById('groupedBar')).draw(
new google.visualization.arrayToDataTable(data), {});
new google.visualization.ColumnChart(document.getElementById('stackedBar')).draw(
new google.visualization.arrayToDataTable(data), {isStacked:true});
}
http://jsfiddle.net/crclayton/r67ega11/10/
However, the updated version:
google.load('visualization', '1.1', { // note version 1.1 and bar package
'packages': ['bar']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
new google.charts.Bar(document.getElementById('groupedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({}));
new google.charts.Bar(document.getElementById('stackedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({
isStacked: true
}));
}
http://jsfiddle.net/crclayton/r67ega11/6/
... will only render one of the charts, sometimes the first, sometimes the second. It won't throw an error, it will simply ignore the other. I've tried breaking them up into individual functions, assigning everything to variables, resetting google.setOnLoadCallback with the same results.
I've also found that when rendering different types of charts, I don't have that problem.
Any ideas?
It's most likely the same issue that was reported in google-visualization-issues repository:
The problems people have seen with the sizing of multiple instances of
material charts should be resolved with this new release. You can
change your code to load "1.1" now so that when the candidate release
becomes available, you will be using it.
There are at least two solutions available at the moment:
Option 1. Render charts synchronously
The general idea is to render chart synchronously. Since draw function is asynchronous, we utilize ready event handler for that purpose.
Replace:
function drawChart_() {
new google.charts.Bar(document.getElementById('groupedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({}));
new google.charts.Bar(document.getElementById('stackedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({
isStacked: true
}));
}
with:
function drawChart() {
var groupedBarChart = new google.charts.Bar(document.getElementById('groupedBar'));
google.visualization.events.addOneTimeListener(groupedBarChart, 'ready', function(){
var stackedBarChart = new google.charts.Bar(document.getElementById('stackedBar'));
stackedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({isStacked: true}));
});
groupedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({}));
}
Example
var data = [
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
];
google.load('visualization', '1.1', {
'packages': ['bar']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var groupedBarChart = new google.charts.Bar(document.getElementById('groupedBar'));
google.visualization.events.addOneTimeListener(groupedBarChart, 'ready', function(){
var stackedBarChart = new google.charts.Bar(document.getElementById('stackedBar'));
stackedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({isStacked: true}));
});
groupedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({}));
}
function drawChart_() {
new google.charts.Bar(document.getElementById('groupedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({}));
new google.charts.Bar(document.getElementById('stackedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({
isStacked: true
}));
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="chart.js"></script>
<div class="chart" id="groupedBar" style></div>
<div class="chart" id="stackedBar" style></div>
Option 2. Using the frozen version loader.
Since
The rollout of the v43 candidate release that would fix this problem
switch to using the frozen version loader.
Steps:
1)Add a reference to loader: <script
src="//www.gstatic.com/charts/loader.js"></script>
2)Then load a 43 version of library: google.charts.load("43",{packages:["bar"]});
3)Replace:
google.setOnLoadCallback(drawChart);
with
google.charts.setOnLoadCallback(drawChart);
Example
var data = [
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
];
google.charts.load("43",{packages:["bar","corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
new google.charts.Bar(document.getElementById('groupedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({}));
new google.charts.Bar(document.getElementById('stackedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({
isStacked: true
}));
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="groupedBar" style></div>
<div class="chart" id="stackedBar" style></div>
I working with Google line chart I want to draw a based line but I don't know how should I do that for example I want to draw line in 2004 between 400 and 600 how should I do that
here Google Sample:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
You can do this in a few different ways, depending on exactly what you want to achieve. The easiest way is to use "interval" role columns:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {role: 'interval', type: 'number'}, {role: 'interval', type: 'number'}],
['2004', 1000, 400, 400, 600],
['2005', 1170, 460, null, null],
['2006', 660, 1120, null, null],
['2007', 1030, 540, null, null]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
There is quite a bit of customization you can do with intervals, see the documentation.
Another way is to add a new series of data for this line, change the data type of the first column from "string" to "number", and add multiple rows of data with the same x-values, eg:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'vertical lines'],
[2004, 1000, 400, 400],
[2004, null, null, 600],
[2005, 1170, 460, null],
[2006, 660, 1120, null],
[2007, 1030, 540, null]
]);
var options = {
title: 'Company Performance',
interpolateNulls: true, // this prevents your other lines from breaking
series: {
2: {
// these options control your new series for the vertical lines
visibleInLegend: false, // hide from the legend
enableInteractivity: false // make the line non-interactive
color: '#9055a6' // set the color of the line
// etc...
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}