Draw bar graph using javascript - javascript

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

Related

Can I pass a parameter to a callback function of Google Charts Load? [duplicate]

This question already has an answer here:
Google Charts: How to pass a parameter into a callback (JavaScript)?
(1 answer)
Closed 3 years ago.
I'm trying to dynamically show charts on PDF using Google Charts, SnappyPDF and Laravel, based initially on this post. I had send a Laravel $arrayChart variable inside the view to test, and get success with that:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
function init() {
google.load("visualization", "1.1", {
packages: ["corechart"],
callback: 'drawCharts'
});
}
function drawCharts() {
var data = google.visualization.arrayToDataTable({!! $arrayChart !!});
var options = {
title: 'My Daily Activities',
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
chart.draw(data, options);
}
</script>
</head>
<body onload="init()">
<div id="columnchart"></div>
</body>
As it seems, i have a div with 'columnchart' id on page and render the chart on him. But, what i really have to do is pass the dynamic data-set of Chart to the drawCharts() function to dynamically show the data, something like that:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
function init(data) {
google.load("visualization", "1.1", {
packages: ["corechart"],
callback: 'drawCharts(data)'
});
}
function drawCharts(obj) {
var data = google.visualization.arrayToDataTable(obj);
var options = {
title: 'My Daily Activities',
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
chart.draw(data, options);
}
</script>
</head>
<body onload="init({!! $arrayChart !!})">
<div id="columnchart"></div>
</body>
Doesn't work. How can i pass a parameter to the google.load callback?
One way, is to pass a reference to the callback function, instead of a string, and bind the parameter to that reference:
callback: drawCharts.bind(null, data)
See Function.bind
Alternatively, you can create a new function, which calls your original function, and passes it the parameters:
callback: () => drawCharts(data)

google charts histogram not using histogram.bucketSize option

I'm trying to make a basic histogram with Google Charts, but for some reason it's not using the bin width that I set. Below is a code sample:
<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 data = google.visualization.arrayToDataTable([
['MyData', 'Value']
, ['whatevs', .57]
, ['whatevs', .57]
, ['whatevs', .57]
, ['whatevs', .8]
]);
var options = {
title: 'My Histogram'
, legend: { position: 'none' }
, histogram: {
bucketSize: .1
}
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
and here's an image of what happens:
but what I would like to happen would be for the bins to be uniformly sized at a width of 0.1.
This appears to be a bug introduced in Charts API version 44. You can roll back to version 43 by specifying the version number when you load the library:
google.charts.load("43", {packages:["corechart"]});
It seems like this is the result of a bug that can be fixed by adding hAxis: { type: 'category' } to the options.

Incorporate Google Charts into a javascript object oriented web app

I'm trying to incorporate Google Charts into a javascript object oriented web app. After the app is loaded - the idea is that the user clicks a certain button which builds/displays a certain chart.
I suspect that I have a scope problem. Firefox/Firebug throws "InvalidCharacterError: String contains an invalid character" which isn't very helpful.
Below is a snippet of what I'm trying to do. Perhaps someone can point out some obvious problem with my attempt?
Thanks in advance for your help.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script language="JavaScript" type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
</script>
</head>
<body>
<div id="googlecharttest"></div>
</body>
</html>
BUTTON CLICK EVENT -> OBJchart.build_googlechart();
------------------
Javascript Snippet
------------------
OBJchart = new Fchart();
Fchart = function() { return {
...
build_googlechart : function()
{
this.drawChart();
// also tried this - with the same result.
// google.load('visualization', '1.0', {'packages':['corechart'], 'callback': this.drawChart});
},
drawChart : function()
{
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]]);
var options = {'title':'How Much Pizza I Ate Last Night','width':400,'height':400};
var chart = new google.visualization.LineChart(document.getElementById('googlecharttest'));
chart.draw(data,options);
},
...
};};

creating google chart from csv using js/jquery

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

Calling my Model in JavaScript in html.erb

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).

Categories