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
Related
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
I want to draw a simple column chart in HTML-JavaScript using google chart.I have used Google materiel chart CDN to draw a column chart having 4 rows with 4 different colors.
I have tried plenty of options but nothing is working properly. when I have used the colors: ['#b0120a', '#004411', '#ffab91', '#004411'] only the first color is being displayed in all the 4 columns. I have also tried {role:'style'} but still not working.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//google.charts.load('current', {'packages':['bar']});
google.charts.load('visualization', '1', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
/*var data = google.visualization.arrayToDataTable([
['Class', 'Total',{role: 'style'}],
['A', 10,'color: #b0120a'],
['B', 30,'color: #004411'],
['C', 20,'color: #ffab91'],
['D', 30,'color: #004411']
]);*/
var data = google.visualization.arrayToDataTable([
['Class', 'Total'],
['A', 10],
['B', 30],
['C', 20],
['D', 30]
]);
var options = {
isStacked: true,
title: 'Class wise total students',
colors: ['#b0120a', '#004411', '#ffab91', '#004411'],
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>
The chart is like:
But I want 4 different colors for 4 columns.
Thanks in advance.
Yaa, at last I made this one correct and exactly I wanted to be. Please see the code below, if you required sometime.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('visualization', '1.1', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Class', 'Total',{role: 'style'}],
['A', 10,'color: #b0120a'],
['B', 30,'color: #004411'],
['C', 20,'color: #ffab91'],
['D', 30,'color: #004411']
]);
var options = {
isStacked: false,
title: 'Class wise total students',
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>
I need to changed the definition of chart here. From var chart = new google.charts.Bar(document.getElementById('columnchart_material')); to the modified one as var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));. It's working now.
The chart is like ....
I'm trying to use Google Marker Geocharts for plotting user location event data. Here is the example code of google which i'm using..
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76]
]);
var options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Above is working fine.But, the moment i try to use user location event data(as showing in below)..
var data = google.visualization.arrayToDataTable([
['City', 'Event', 'Year'],
['Rome', 'Birth', '1981'],
['Milan', 'Schooling', '1995-2005']
]);
It's started showing this error -
I searched a lot in google but, did not get any reliable answer. Any idea how to resolve this error ?
Regards
I am creating a multilevel donut chart with google charts.
I am successful to creating a single level chart. But now I have to create another chart in that chart.
Please help me. And also is that possible to write text on chart slice in circular form?
here is my code for single donut chat.
HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="donutchart" style="width: 900px; height: 500px;"></div>
JS
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
chartArea:{left: '100'},
pieSliceText: 'label',
pieStartAngle: 0,
pieSliceTextStyle:{color: 'white', fontName: 'arial', fontSize: 10}
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
and here is code link in JsFiddle
IT should be look like
This was possible with the Google Image Charts API, which has been deprecated in 2012. It seems to still be up and running, it's just not maintained anymore.
With that API, it was (and still is) possible to create concentric pie charts such as the one below
http://chart.apis.google.com/chart?chd=s:Yr3,ff9&cht=pc&chs=300x200&chxr=0,20,45|1,25,50
which yields the following pie chart
Also you can play with the API and easily create your own pie charts here:
http://www.jonwinstanley.com/charts/
Supporting this kind of concentric Pie chart in the new Google Charts API is still an open issue
I know it's has been a long time ago but here's one way you can do this, using google charts:
But, I removed the subtitles because they interfere in the position of objects, i think it's easier and better if we do our subtitles . Then i just made some drawings e maths to achieve this.
You can control the size and pieHole with 3 variables.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
//control is here
let larguraGraficoFora = 400;
let alturaGraficoFora = 400;
let furoGraficoFora = 0.6;
var data = google.visualization.arrayToDataTable([
['Sabor de Pizza', 'Quantidade'],
['portuguesa', 30],
['frango com catupiry', 30],
['calabresa', 30],
['alguma doce', 30],
]);
var options = {
width: larguraGraficoFora,
height: alturaGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
pieHole: furoGraficoFora,
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('donut_1'));
chart.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['python', 20],
['c#', 20],
['javascript', 20],
['php', 20],
['sql server', 20],
]);
var options2 = {
legend:'none',
width: larguraGraficoFora*furoGraficoFora,
height: alturaGraficoFora*furoGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
backgroundColor: 'transparent',
legend: 'none'
};
var chart2 = new google.visualization.PieChart(document.getElementById('donut_2'));
chart2.draw(data2, options2);
ajustePosicaoPieCentral(larguraGraficoFora, alturaGraficoFora, furoGraficoFora);
}
function ajustePosicaoPieCentral(largura, altura, furo){
yt = altura*(1+furo)/2.0;
xt = largura*(1-furo)/2.0;
var css = document.getElementById('donut_2');
css.style.transform = "translate("+xt+"px, -"+yt+"px)";
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_1" ></div>
<div id="donut_2"></div>
I have been playing around with Line Charts using the Google Charts API and the following example shows a multi-dimensional array being populate into a data table then displayed on the screen.
It works great but I'd like to be able to populate data from a CSV file found in the same folder which may contain n amount of columns.
Can anyone help figure this out?
I think one would access the csv file with JQuery .get and then convert it into an array. I'm just not very JS savvy nowadays..
<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, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
You should try the recommendation from Reading client side text file using Javascript
It's JS way, from that you can turn each line into an array
Other method is by using ajax call to server side and then process the csv and return array
I think that will solve the crossbrowser issue problem.