I took this code from their official site.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['motionchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Fruit');
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addColumn('string', 'Location');
data.addRows([
['Apples', new Date (1988,0,1), 1000, 300, 'East'],
['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
['Bananas', new Date (1988,0,1), 300, 250, 'West'],
['Apples', new Date (1989,6,1), 1200, 400, 'East'],
['Oranges', new Date (1989,6,1), 750, 150, 'West'],
['Bananas', new Date (1989,6,1), 788, 617, 'West']
]);
var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
chart.draw(data, {width: 600, height:300});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 600px; height: 300px;"></div>
</body>
</html>
When i run the code, nothing shows up. What possibly can be the problem? I'm using Chrome.
I could fix this.
The problem was I had these lines in the header:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization', 'version':'1','packages':['timeline']}]}"></script>
And then the java script executes google.load('visualization', '1', {'packages':['motionchart']});
It seems this "double load" is the problem
I removed the first line and it worked
Related
When my chart animates to display new data, the labels on the columns disappear and are not rendered again. All the the data is being imported correctly and displayed on the columns. The label data is only displayed on the initial render of the chart.
The success handler returns 'values', an array of three numbers, for example: [10, 8, 2] and is working correctly.
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="genderChart" style="overflow: hidden"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(initChart);
var chart;
var options = {
legend: {position: "none"},
chartArea: {width:'100%'},
animation: {duration: 1000, easing: 'out'}
};
function initChart() {
chart = new google.visualization.ColumnChart(document.getElementById('genderChart'));
drawGenderChart();
}
function drawGenderChart() {
google.script.run.withSuccessHandler(function (values){
genderData = values;
}).getGenderData();
label00 = JSON.stringify(genderData[0]);
label01 = JSON.stringify(genderData[1]);
label02 = JSON.stringify(genderData[2]);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Gender');
data.addColumn('number', 'Students');
data.addColumn({role: 'style'});
data.addColumn({role: 'annotation'});
data.addRows([
['Male', genderData[0], '#9fc5e8', label00],
['Female', genderData[1], '#d5a6bd', label01],
['Non-binary', genderData[2], '#b7b7b7', label02]
]);
chart.draw(data, options);
}
setInterval(drawGenderChart, 1000);
</script>
</body>
</html>
Apps Script:
function getGenderData() {
var sheet = SpreadsheetApp.getActive().getSheetByName("Console");
var range = sheet.getRange("A3:C4");
var values = range.getValues();
return values.flat();
}
google.script.run runs asynchronously, so you need to wait for it to finish,
before drawing the chart.
to accomplish, simply place the rest of the code within the success handler...
google.script.run.withSuccessHandler(function (values){
genderData = values;
label00 = JSON.stringify(genderData[0]);
label01 = JSON.stringify(genderData[1]);
label02 = JSON.stringify(genderData[2]);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Gender');
data.addColumn('number', 'Students');
data.addColumn({role: 'style'});
data.addColumn({role: 'annotation'});
data.addRows([
['Male', genderData[0], '#9fc5e8', label00],
['Female', genderData[1], '#d5a6bd', label01],
['Non-binary', genderData[2], '#b7b7b7', label02]
]);
chart.draw(data, options);
}).getGenderData();
I am passing data to my flask html template. In the html, there is a Javascript, where I need iterate value. data looks Like,
data[0] = 2, data[1] = 3, data[3] = 5, data[2] = .36 so on
index.html :-
<!DOCTYPE html>
<html>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
{% for i in data %}
<script>
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[{{i[2]}}, {{i[6]}}]
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
backgroundColor: '#f1f8e9'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
{% endfor %}
</html>
I want to iterate the value here,
data.addRows([
[{{i[2]}}, {{i[6]}}]
]);
It should be like,
data.addRows([
[0,0], [0,1], [1,0], [1,1]
]);
But, it is iterating the whole script.
The entire script is inside of the for loop, so the templating engine will duplicate the script as many times as there are entries in data.
I want to draw a simple column chart in HTML-JavaScript using google chart.I have used Google materiel chart CDN to draw a column chart having 4 rows with 4 different colors.
I have tried plenty of options but nothing is working properly. when I have used the colors: ['#b0120a', '#004411', '#ffab91', '#004411'] only the first color is being displayed in all the 4 columns. I have also tried {role:'style'} but still not working.
<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.load('visualization', '1', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
/*var data = google.visualization.arrayToDataTable([
['Class', 'Total',{role: 'style'}],
['A', 10,'color: #b0120a'],
['B', 30,'color: #004411'],
['C', 20,'color: #ffab91'],
['D', 30,'color: #004411']
]);*/
var data = google.visualization.arrayToDataTable([
['Class', 'Total'],
['A', 10],
['B', 30],
['C', 20],
['D', 30]
]);
var options = {
isStacked: true,
title: 'Class wise total students',
colors: ['#b0120a', '#004411', '#ffab91', '#004411'],
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>
The chart is like:
But I want 4 different colors for 4 columns.
Thanks in advance.
Yaa, at last I made this one correct and exactly I wanted to be. Please see the code below, if you required sometime.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('visualization', '1.1', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Class', 'Total',{role: 'style'}],
['A', 10,'color: #b0120a'],
['B', 30,'color: #004411'],
['C', 20,'color: #ffab91'],
['D', 30,'color: #004411']
]);
var options = {
isStacked: false,
title: 'Class wise total students',
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>
I need to changed the definition of chart here. From var chart = new google.charts.Bar(document.getElementById('columnchart_material')); to the modified one as var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));. It's working now.
The chart is like ....
Im trying to pass a variable into the the google chart but when I do it the chart stops showing up, my goal is for the chart to change every time I put in a different number in the input field but im just getting no where right now. This is what I have, can someone please offer some guidance on what I am doing wrong?
Javascript
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function numbers(){
var work_field = document.forms['work_form']['work_n_field'].value;
var work_div = document.getElementById('number-work');
var numberschart = work_div.innerHTML = work_field;
return false;
};
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
//Right here is where I pass my variable into the chart
data.setValue(0, 1, numberschart);
//And I leave the rest here until I define more input field.
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {
title:"Mortgage Rates",
colors: ['#a4b12d', '#818e0a', '#5c6601', '#f0fd79', '#dbe864'],
});
}
google.setOnLoadCallback(drawVisualization);
</script>
Html
<div id="visualization" style="width: 400px; height: 300px;"></div>
<form name="work_form" onsubmit="return numbers()">
<label id="n-work-label">Work</label><input name="work_n_field"/>
<button name="submit" id="submit" value="submit" onclick="numbers()">Submit</button>
</form>
<div id="number-work"></div>
</div>
Any help is greatly appreciated, Thank you
I have also added it to js fiddle, but when adding the chart to a resource it doesnt seem to detect it. http://jsfiddle.net/pkCCa/
This worked for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var numberschart = 10; //<- Initial value
google.load('visualization', '1', {packages: ['corechart']});
function numbers(){
var work_field = document.forms['work_form']['work_n_field'].value;
var work_div = document.getElementById('number-work');
numberschart = work_div.innerHTML = work_field;
drawVisualization();
return false;
};
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
//data.setValue(0, 1, 11);
data.setValue(0, 1, parseInt(numberschart));//<- The value you get from input field is a string, Google API will throw an error
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {
title:"Mortgage Rates",
colors: ['#a4b12d', '#818e0a', '#5c6601', '#f0fd79', '#dbe864'],
animation:{
duration:1000,
easing: 'out',
},
vAxis: {
minValue:0,
maxValue:1000
},
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization" style="width: 400px; height: 300px;"></div>
<form name="work_form" onsubmit="return false">
<label id="n-work-label">Work</label><input name="work_n_field"/>
<button name="submit" id="submit" value="submit" onclick="numbers();return false;">Submit</button>
</form>
<div id="number-work"></div>
</body>
</html>
Try this:
http://jsfiddle.net/schawaska/pkCCa/2/
Note: It's not gonna work on jsfiddler because the key you are using is not set up for their domain. Try on your environment and let me know
The following is a table for the Google Charts API. I'm trying to sort the "Numbers" Column descending. Anyone know how to do this?
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Names');
data.addColumn('number', 'Numbers');
data.addRows(3);
data.setCell(0, 0, 'Name 1');
data.setCell(1, 0, 'Name 2');
data.setCell(2, 0, 'Name 3');
data.setCell(0, 1, 1);
data.setCell(1, 1, 2);
data.setCell(2, 1, 3);
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
</script>
<div id="table"></div>
Yes. just add the following line below your data def., it will sort descending on number, and then ascendsing on name.
data.sort([{column: 1, desc:true}, {column: 0}]);
oh, you could also use this:
data.addRow(['Name 1',1]);
data.addRow(['Name 2',2]);
data.addRow(['Name 3',3]);
regards, Halma