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
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 am trying to change the number format of the axis on a google gauge. By default, the axis value is a whole number (e.g. 0, 120) but I would like to show a £ sign and format as currency (e.g. £0, £120). I have been able to change the format of the value shown at the bottom of the gauge using NumberFormat but cannot apply to the rest of the gauge.The code for the basic gauge is as follows:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<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 data1 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Spend', 80],
]);
var options1 = {
width: 500, height: 300
};
// change number format to £
var formatter = new google.visualization.NumberFormat(
{pattern: '£###,###'});
formatter.format(data1, 1);
var chart = new google.visualization.Gauge(document.getElementById('chart_div1'));
chart.draw(data1, options1);
}
</script>
</head>
<body>
<div id="chart_div1"></div>
</body>
</html>
How do I add a £ sign to the numbers on the outside of the gauge? Thank you.
You can provide an array of strings to majorTicks to specify your own...
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Spend', 80],
]);
var options1 = {
width: 500, height: 300,
majorTicks: [
'£0', '', '', '', '£100'
]
};
// change number format to £
var formatter = new google.visualization.NumberFormat({
pattern: '£###,###'
});
formatter.format(data1, 1);
var chart = new google.visualization.Gauge(document.getElementById('chart_div1'));
chart.draw(data1, options1);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1"></div>
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
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