I want to add animation in pie chart from zero to given values of the pie chart using google charts. Is it possible in Android? I tried it as
function aniChart(d,o){
for (var i=1; i<100; i++) {
data.setValue(0, 1, i);
}
for (var i=99; i>00; i--) {
data.setValue(1, 1, i);
}
setTimeout(function(){
chart.draw(data, options);
}, 1000);
};
aniChart();
Chart is changing its values but not via animation.
Full HTML file
<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 piechart 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 pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'ITEM');
data.addColumn('number', 'VALUE');
data.addRows([
['Item 1', Android.getNum1()],
['Item 2', Android.getNum2()],
['Item 3', Android.getNum3()],
['Item 4', Android.getNum4()],
['Item 5', Android.getNum5()]
]);
// Set chart options
var options = {'title':'Android-er: Load Google Charts (pie chart) with WebView',
'width':600,
'height':600
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
function aniChart(d,o){
for (var i=1; i<100; i++) {
data.setValue(0, 1, i);
}
for (var i=99; i>00; i--) {
data.setValue(1, 1, i);
}
setTimeout(function(){
chart.draw(data, options);
}, 1000);
};
aniChart();
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:600; height:600"></div>
</body>
</html>
Related
I'm making a dashboard in Google Spreadsheet and would like to use cell data. Now you need to hard code the data and the values for redFrom, redTo etc etc but I want them to be dynamic and dependant on a certain value in a cell. Same applies to the values shown by the gauge.
The dashboard will to track monthly income and the gauge will indicate if someone if in the green for that month based on the percentage relative to their target.
This is the standard example from google:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
setInterval(function() {
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 13000);
setInterval(function() {
data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 5000);
setInterval(function() {
data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
chart.draw(data, options);
}, 26000);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 120px;"></div>
</body>
</html>
So I want it to be something like this:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['A1', A2],
['B1', B2],
['C1', C2]
]);
var options = {
width: 400, height: 120,
redFrom: D1, redTo: D2,
yellowFrom:D3, yellowTo: D4,
minorTicks: 5
};
Is this possible? Thanks!
if the charts will be running in an html page,
you can query the sheet using --> google.visualization.Query
following is an example, using a sample spreadsheet --> gauge data
columns A & B are used for the gauge chart data
columns D-I are for the from / to color values
the setQuery method is used to separate the two ranges into data tables
first, get the chart data, the options data, then draw the chart...
google.charts.load('current', {
packages: ['gauge']
}).then(function () {
// get chart data
var queryChart = new google.visualization.Query('https://docs.google.com/spreadsheets/d/16IeSOMvl4-B3qFr386kjZA-vSRIHTNvSIigqyracGj0/edit#gid=0');
queryChart.setQuery('select A,B');
queryChart.send(function (responseChart) {
var dataChart = responseChart.getDataTable();
// get options data
var queryOptions = new google.visualization.Query('https://docs.google.com/spreadsheets/d/16IeSOMvl4-B3qFr386kjZA-vSRIHTNvSIigqyracGj0/edit#gid=0');
queryOptions.setQuery('select D,E,F,G,H,I');
queryOptions.send(function (responseOptions) {
var dataOptions = responseOptions.getDataTable();
var options = {
minorTicks: 5
};
options.redFrom = dataOptions.getValue(0, 0);
options.redTo = dataOptions.getValue(0, 1);
options.yellowFrom = dataOptions.getValue(0, 2);
options.yellowTo = dataOptions.getValue(0, 3);
options.greenFrom = dataOptions.getValue(0, 4);
options.greenTo = dataOptions.getValue(0, 5);
var chart = new google.visualization.Gauge(document.getElementById('chart_div'))
chart.draw(dataChart, options);
});
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I make a system/website that is fully resizable with css and VW(viewport width). In that system/website I have a GoogleChart that works with pixels. Now I want to scale the chart with Javascript/jQuery/CSS (transform scale). On page load is enough.
Can anyone help me in the right direction for this?
Here is a JSFiddle with the problem: https://jsfiddle.net/j9a9wpdj/
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width': 400,
'height': 300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
#test {
width: 80vw;
height: 40vw;
background-color: #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="test">
<div id="chart_div"></div>
</div>
[CONCLUSION]
This is what works for me:
function zoomit() {
$("#chart-wrapper").css('zoom', $(window).width() / $("#chart-wrapper").width());
}
$(document).ready(zoomit);
$(window).resize(zoomit);
Use the drawchart function to redraw the chart when window is resized. Adjust the width and height in below function as necessary. Updated fiddle
Code added to your script:
var width = 400;
var height = 300;
// Set chart options
var options = {
'title': 'How Much Pizza I Ate Last Night',
'width': width,
'height': height
};
$(function() {
$(window).resize(function() {
width = $('#test').width();
height = $('#test').height();
google.charts.setOnLoadCallback(drawChart);
})
});
Working example:
var width = 400;
var height = 300;
// Load the Visualization API and the corechart package.
google.charts.load('current', {
'packages': ['corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {
'title': 'How Much Pizza I Ate Last Night',
'width': width,
'height': height
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
$(function() {
$(window).resize(function() {
width = $('#test').width();
height = $('#test').height();
google.charts.setOnLoadCallback(drawChart);
})
});
#test {
width: 80vw;
height: 40vw;
background-color: #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="test">
<div id="chart_div"></div>
</div>
I want to create a loop, in my google chart, i have 200 points in the chart, and it moves 1 point to the right per second,but i want to repeat the chart when it reach all points.
here is my code of the chart:
function drawChart5() {
var options = {
'backgroundColor': 'transparent',
width: 1200,
height: 240,
animation: {
duration: 1000,
easing: 'in',
},
hAxis: {viewWindow: {min:0, max:200}}
};
var chart = new google.visualization.AreaChart(
document.getElementById('visualization'));
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y');
var MAX = 100;
var x=0;
var f=20;
var T= 1/f;
var PI = Math.PI;
var DT=T/MAX;
for (var i = 0; i < 2*MAX; i++)
{
x=(Math.sin((2*PI)*f*i*DT));
data.addRow([i.toString(), x]);
console.log(x)
}
function drawChart() {
google.visualization.events.addListener(chart, 'ready',
function() {
});
chart.draw(data, options);
}
setInterval(function()
{
options.hAxis.viewWindow.min += 1;
options.hAxis.viewWindow.max += 1;
chart.draw(data,options)
},2 000);
drawChart();
}
This is the chart
I would achieve the effect you are going for like this:
Use a DataView instead of a DataTable, and use DataView.setColumns() to create a calculated column that runs the formula defined above. As far as I can tell, the algorithm you use to calculate your values is deterministic, so all you need to run your calculations is the x-value and you can determine the y-value for any given position.
With this method, you'll never have to populate a DataTable yourself, because the chart uses your function to calculate the y-value on demand. Whatever range your chart displays, it will calculate the values it needs when the chart is drawn.
When I try to create a column chart using the Google charts visualization javascript API the bar ends up a lot fatter than I expected.
Here's a comparison of two charts that demonstrates the problem. First, a chart with two data points where the resulting bars look normal, then a chart with a single data point where the resulting bar looks weird.
The only difference between the two snippets is:
// two bars
data.addRows([
[1, 1],
[2, 1],
]);
vs.
// one bar
data.addRows([
[1, 1]
]);
Two bars (looks normal)
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawAxisTickColors);
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
// two bars
data.addRows([
[1, 1],
[2, 1],
]);
var options = {
title: 'Tidy lil bars',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Single bar (looks weird)
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawAxisTickColors);
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
// one bar
data.addRows([
[1, 1],
]);
var options = {
title: 'Big ol bar',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
You can use bar.groupWidth to control the width of the columns
from the configuration options...
The width of a group of bars, specified in either of these formats:
Pixels (e.g. 50).
Percentage of the available width for each group (e.g. '20%'), where '100%' means that groups have no space between them.
Type: number or string
Default: The golden ratio, approximately '61.8%'.
i.e. --> bar: { groupWidth: 100 }, //100px
google.charts.load('current', {
callback: drawAxisTickColors,
packages: ['corechart', 'bar']
});
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addRows([
[1, 1],
//[2, 1],
]);
var options = {
bar: { groupWidth: 100 }, //100px
title: 'Tidy lil bars',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am triying to put two google charts of the same style, but when i try it, one is visible and one didnt appear.
So, here's the code.
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2014', 1000],
['2015', 1170],
['2016', 660],
['2017', 1030]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
What variables I need to change to make an other chart like this??
the script is looking for the id selector, in html the id is unique
so add a new div with antoher id and at the end of your script do
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
var chartOther = new google.charts.Bar(document.getElementById('columnchart_material_other'));
chart.draw(data, options);
chartOther.draw(data, options );
if you want to use a classname you could draw the same charts for all elements with class some like this:
var charts = document.getElementsByClassName("yourclass");
for (var i = 0; i < charts; i++) {
var chart = new google.charts.Bar(charts[i]);
chart.draw(data, options);
};