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