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
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 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
I use Google Chart Tools to draw simple graph with some missing data. With my code, I get something like on this image:
Is it possible to connect points (1) and (4) with line similar to (4) - (5) connection? Maybe I could use another type of graph to achieve the same result? I tried Area Chart with interpolateNulls option, but the result was the same. It can interpolate only NULLs surrounded by some date, not two or more NULLs in a row.
Below is sample code:
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn('number', 'Sales');
data.addRows([
[1, 1000],
[2, null],
[3, null],
[4, 1030],
[5, 1080]
]);
var options = {
'title' : 'Line chart',
'width' : 400,
'height' : 300,
'lineWidth' : 2
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<html>
<body>
<div id="chart_div"></div>
</body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</html>
Similar problem here:Google chart line: how to connect dots properly using a continuous axes
The answer to your question was on one of the comments:
'If the value you are trying to pass is through some xml or json and it has null values inside it will not plot properly and will be scattered or as dotted lines in line graph so to plot them, have a condition to remove all null values and then it will plot correctly.' by #Taher SK
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