I'm trying to loop through a list of objects (some measurements data) using JSTL forEach tag in javascript and display the data by using Google Charts API. The code is showing as following. But looks something wrong. As I double checked, the data in the list of measurements objects works fine to pass to html in ${listOfMeasurements}, ${measurements.measTime}, ${measurements.measS1raw} and ${measurements.measS2raw}. But in the javascript block, the forEach code is not working to execute data.addRow() as expected. My guess is, I'm not using forEach correctly in my javascript code, so data.addRow() was not executed as expected. How can I fix it?
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'measurement1');
data.addColumn('number', 'measurement2');
<c:forEach items="${listOfMeasurements}" var="measurements">
"data.addRow("
+"${measurements.measTime}"+","
+"${measurements.measS1raw}"+","
+"${measurements.measS2raw}"+");"
;
</c:forEach>
var options = {
title: 'Measurements'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Try it like this
<c:forEach items="${listOfMeasurements}" var="measurements">
data.addRow(${measurements.measTime},${measurements.measS1raw},${measurements.measS2raw});
</c:forEach>
Otherwise you will obtain wrong code in your script, for example:
"data.addRow("+"measTimeValue-1"+","+"measS1raw-1"+","+"measS2raw-1"");";
"data.addRow("+"measTimeValue-2"+","+"measS1raw-2"+","+"measS2raw-2"");";
"data.addRow("+"measTimeValue-3"+","+"measS1raw-3"+","+"measS2raw-3"");";
...and that's incorrect javascript.
The problem with mixing JSP tags and Javascript is that they occur in two differents phases.
JSP Rendering comes first, so all html, css and javascript code is just another string. So after the JSP Rendering finishes, you have just HTML.
You may want to read this blog entry from BalusC about this topic.
This could be alternate solution....
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['Date', 'measurement1','measurement2']
<c:forEach var="measurements" items="${listOfMeasurements}">
,[${measurements.measTime},${measurements.measS1raw},${measurements.measS2raw}]
</c:forEach>
]);
var options = {
title: 'Change title Acoordingly',
chartArea: {width: '50%'},
hAxis: {
title: 'Change title Acoordingly',
minValue: 0
},
vAxis: {
title: 'Change title Acoordingly'
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<body><div id="chart_div"></div></body>
Related
As I am new to ZK framework and trying to implement javascript code inside zul.
My code is below :
<zk>
<window id="HomePage" border="none" width="100%" height="100%"
hflex="min" style="background-color:green">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Automation', 11],
['Manual', 2],
['Report', 2],
['Payroll', 2],
['MISC', 7]
]);
var options = {
title: 'My Daily Work Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
When I am executing the above code I am getting a blank page. Can anyone please suggest me how I can modify this code to get a pie-chart.
You are lacking an element to draw the chart to:
document.getElementById('piechart_3d') does not find anything.
So you have to add it:
<zk xmlns:n="native">
<window>
...
<n:div id="piechart_3d"></n:div>
Here I used the native namespace of ZK to cause it to render an exact HTML-div instead of a zk widget. This then can be resolved by document.getElementById.
Another hint: hflex='min' of the window produced some issues with my tests, so I removed it in the working example below.
Working example:
http://zkfiddle.org/sample/3env602/1-google-pi-chart
UPDATE:
Another option would be to use ZK's javascript classes to find the element to draw to. This eliminates the use of the native namespace.
zk.Widget.$("$piechart_3d") get's you the zk Widget, on which you can call the $n() function to get the DOMElement it is bound to.
<zk>
<window>
...
<script>
...
var chart = new google.visualization.PieChart(zk.Widget.$("$piechart_3d").$n());
chart.draw(data, options);
</script>
<div id="piechart_3d"></div>
</window>
</zk>
Example:
http://zkfiddle.org/sample/gnt3cl/3-google-pi-chart-zk
I'm trying to generate a line graph with the help of google chart. But, I see "table has no columns". I tried example given on google site and observed the same. Following is my code:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonDataString = "{\"cols:\":{\"Time\":\"\",\"Sensor-1\":\"\",\"Sensor-2\":\"\",\"Sensor-3\":\"\",\"Sensor-4\":\"\"},\"rows\":[{\"1\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"2\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"3\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"4\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"5\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"6\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"7\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"8\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"9\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"10\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]}]}";
var jsonData = JSON.parse(jsonDataString);
console.log(jsonData);
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'time - temp',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
Any idea, where am I going wrong?
Thanks.
Your JSON object isn't formatted properly to generate a datatable directly from it. The accepted JSON format is :
{
"cols": [
{"label":"Topping","type":"string"},
{"label":"Slices","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms"},{"v":3}]},
{"c":[{"v":"Onions"},{"v":1}]},
{"c":[{"v":"Olives"},{"v":1}]},
{"c":[{"v":"Zucchini"},{"v":1}]},
{"c":[{"v":"Pepperoni"},{"v":2]}
]
}
A nested JSON object with a 'cols' array containing X number of objects, where X = your number of columns, and a 'rows' array, containing Y number of 'c' nodes, where Y = your number of rows, and inside each 'c' node, Z number 'v' nodes, where Z = your number of columns.
You should check google documentation here :
Google JSON DATA
P.S Try replace your JSON string by the one provided in my example and you'll see that your line chart will be drawn as I don't see any errors in your code.
I am trying to draw a bar graph using the values returned from server using jQuery. I use the following code,
I try to draw graph using the values in the variable data_list, the issue is the graph draws first with empty values the I got values from server.
I am a newbie to Javascript and jQuery. Thanks in advance.
<html>
<head>
<title>the title</title>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker1" ).datepicker();
$( "#datepicker2" ).datepicker();
});
</script>
<script type="text/javascript" language="javascript">
var data_list
$(document).ready(function() {
$.get('/api/', function(data) {
data_list = data;
alert(data_list); // alert work second
});
});
alert('test') // first this alert work
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(data_list);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<form>
<p>Date1: <input type="text" id="datepicker1"></p>
<p>Date2: <input type="text" id="datepicker2"></p>
</form>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
There are two parts in yout JS code. The first is loading the chart data from your API with an AJAX request. The second starts the chart library and attach the data in this line:
var data = google.visualization.arrayToDataTable(data_list);
The problem is the ajax request is asynchronous and the data is not loaded yet when you attach that data. The data_list var will be avaliable when the AJAX request finishes and not when the page is loaded. In other words, you must separated the initialization of the chart and the data attach to it, or simply: init the graph, load the data and set it to the chart when the AJAX request is done. A simple example with your code (not tested) could be:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
$(document).ready(function() {
$.get('/api/', function(data) {
data_list = data;
var data = google.visualization.arrayToDataTable(data_list);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
});
}
Remember this code is not tested, it ilustrates the idea of the correct initialization:
- Load Google Chart Library
- Load the data
- When the data is loaded, init the concrete chart
The asynchronous load adds some complexity to the code, but are the base of programming in JavaScript with AJAX and DOM events. Another option, more readable and simple, is to use jquery deferred objects and promises. More on deferred and promises:
- http://api.jquery.com/category/deferred-object/
- http://www.html5rocks.com/en/tutorials/es6/promises/?redirect_from_locale=es
Here is my code to create google chart from csv data. code look fine but still there is some error.
Code looks fine but error is may be due to some jquery syntext. I appreciate if someone can help me
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("Chart1-data.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
alert(arrayData);
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
// set chart options
var options = {
title: "A Chart from a CSV!",
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
});
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Chart1-data.csv
Category,
A,34
B,23
C,14
D,57
E,18
Other,5
Error:
SyntaxError: missing ) after argument list
i.e. line where script ends
UPDATE: there was }); missing. Now no error but chart does not appear
Your closing brackets for $.get( should be }); not just };
$.get({
// code
});
And you're also missing a closing curly bracket to close your function.
Demo
I have this code in my view in index.html.erb
<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', 'Topping');
data.addColumn('number', 'Slices');
ActiveRecord.connect()
var accounts = Account.find({
all: true,
order: 'id DESC'
});
for (var i=0;i<accounts.length;i++)
{
document.write(accounts.a_name);
data.addRow([accounts.a_name, accounts.a_amount]);
}
// Set chart options
var options = {'title':'Accounts balance distribution',
'width':600,
'height':500};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
The Account model is not returning any value, do you know how to change the code to make it returns values
Thank you and looking forward for your feedback
/Mohamed sami
Since ERB stands for Embedded Ruby, you have to embed it :
So when you write var accounts = value, you have to embed 'value' into <%= and %> and make sure that value is some ruby that returns the appropriate string for your Javascript (the same that you would have hard-written if it wasn't dynamic).