A decade I am using the pair gnuplot/latex, however this time I would like something more interacting, there I am deciding to experiment the google chart.
As new player, I get a few difficulties ...
I am trying to make a scatter plot, and to each to my point attribute a "latex" formula. Following the manual of Google, I used HTML tooltip. I also follow the instruction of this post.
I get my plot but the "latex formula" does not work example, I just get my "latex string" like it is.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data_scalar = new google.visualization.DataTable();
// Declare columns scala
data_scalar.addColumn('number', 'Throughput');
data_scalar.addColumn('number', 'Lantency');
data_scalar.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); // tool tip on
// Add data.
data_scalar.addRows([
[28.08,4.11, createCustomHTMLContent('P_b^{10}')],
[21.80,3.70, createCustomHTMLContent('P_b^{2}P_b^{2}P_b^{2}P_b^{2}P_b^{2}')],
[21.81,3.70, createCustomHTMLContent('P_b^{2}P_b^{2}P_b^{2}P_b^{2}P_e^{2}')],
[21.46,3.64, createCustomHTMLContent('P_b^{2}P_b^{2}P_b^{2}P_b^{2}P_{h^1}^{2}')],
[21.81,3.70, createCustomHTMLContent('P_b^{2}P_b^{2}P_b^{2}P_e^{2}P_e^{2}')],
[21.46,3.63, createCustomHTMLContent('P_b^{2}P_b^{2}P_b^{2}P_e^{2}P_{h^1}^{2}')],
[21.65,3.65, createCustomHTMLContent('P_b^{2}P_b^{2}P_b^{2}P_{h^1}^{2}P_{h^1}^{2}')],
[21.81,3.70, createCustomHTMLContent('P_b^{2}P_b^{2}P_e^{2}P_e^{2}P_e^{2}')],
[21.47,3.63, createCustomHTMLContent('P_b^{2}P_b^{2}P_e^{2}P_e^{2}P_{h^1}^{2}')],
[21.64,3.65, createCustomHTMLContent('P_b^{2}P_b^{2}P_e^{2}P_{h^1}^{2}P_{h^1}^{2}')],
[21.64,3.60, createCustomHTMLContent('P_b^{2}P_b^{2}P_{h^1}^{2}P_{h^1}^{2}P_{h^1}^{2}')],
[30.97,4.16, createCustomHTMLContent('P_b^{2}P_b^{4}P_b^{4}')],
[25.85,3.87, createCustomHTMLContent('P_b^{2}P_b^{4}P_e^{4}')],
[25.03,3.55, createCustomHTMLContent('P_b^{2}P_b^{4}P_{h^1}^{4}')],
[25.94,3.64, createCustomHTMLContent('P_b^{2}P_b^{4}P_{h^2}^{4}')],
[35.40,4.47, createCustomHTMLContent('P_{h^7}^{10}')],
[32.18,4.25, createCustomHTMLContent('P_{h^7}^{8}P_b^{2}')],
[32.17,5.90, createCustomHTMLContent('P_{h^7}^{8}P_e^{2}')],
[32.67,6.05, createCustomHTMLContent('P_{h^7}^{8}P_{h^1}^{2}')],
[29.28,5.83, createCustomHTMLContent('P_{h^8}^{10}')],
[31.01,4.33, createCustomHTMLContent('P_{h^9}^{10}')]
]);
var options = {
hAxis: {title: 'Latency', minValue: 15 },
vAxis: {title: 'Throughput'},
tooltip: { isHtml: true }, // tool tip on
legend: 'none',
pointSize: 1
};
function createCustomHTMLContent(method){
return ' \( '+ method+ ' \)'; //latex mode
}
var chart = new google.visualization.ScatterChart(document.getElementById('series_chart_div'));
chart.draw(data_scalar, options);
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
</script>
</head>
<body>
<div id="series_chart_div" style="width: 900px; height: 500px;"></div>
thiw work
\( e^x = 2 \times P_b^2 \)
</body>
</html>
It is probably basic, but my Web experience has started yesterday ...
Best,
++t
Related
I would like to set my own ticks on the horizontal axis of a Google Chart. I included hAxis.ticks (as per the documentation) in my attempt below, but it refuses to work since the ticks are still not integers even though I specified them to be.
What am I doing wrong?
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'myNumber');
data.addRows([
[1,17],
[2,18],
[3,20]
]);
var options = {width: 800, height: 500, hAxis: {ticks: [1,2,3]}};
var chart = new google.charts.Line(document.getElementById('chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
ticks is not a supported option for material charts.
material --> google.charts.Line -- packages:['line']
classic --> google.visualization.LineChart -- packages:['corechart']
you would need to use a classic chart.
note: there is an option for classic charts to have a similar look...
theme: 'material'
you can find the full list of unsupported options here...
Tracking Issue for Material Chart Feature Parity
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.
You can see in this fiddle
In the year 2004 I have values of 1000, and in the other years I have large values, for that reason in the scale the chart doesn't seems able to rendered, what can I do to show those values. I was reading this. Is there a way to do something like that in google chart?
Here is the code
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 1000],
['2005', 1170000, 460000],
['2006', 660000, 1120000],
['2007', 1030000, 540000]
]);
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>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
The chart
Google Chart´s axis have an option to set scale to logarithm, which fits better for big differences between lowest and highest values. Note that all values must be positive and if the data value is 1, it won´t show as logharithm scale starts at 1 or higher. To change it, use:
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}, logScale:true}
You can find the documentation in configuration options section:
Google Chart Configuration Options
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