I am using google chart and I have the following example:
<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 = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', 1030, 540]
]);
var options = {
width: 400, height: 240,
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
When I add rows without any data in the last column, google chart can not draw the chart.
For example, with this data I don not get any chart:
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', , ]
]);
but if I add the last column, see below, it works.
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', , 122]
]);
Can someone can explain to me: What is the logic behind this?
Thanks!
It's probably because the range of the chart ends at the last row when you created the chart. If you add more rows, the range of the chart doesn't change so you'll either have to adjust the range (not sure if this is possible using the API) or create a new chart.
Related
I'm trying to light up "Ha Noi" and "Ho Chi Minh" using Google Charts but it's not working by modifying the example in the document.
google.charts.load('upcoming', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Provinces', 'Popularity'],
['Hanoi', 200],
['HCM', 300],
]);
var options = {region:'VN',resolution:'provinces'};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
https://jsfiddle.net/na8hvgts/
I wonder whether it's possible at all to color provinces/states outside the US.Thanks.
try using the ISO 3166-2:VN codes
see following working snippet...
also, the colorAxis will default to the min and max values in the data
leaving the min value transparent when there are only two rows
set specific colorAxis.min / colorAxis.max to avoid...
google.charts.load('upcoming', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Provinces', 'Popularity'],
[{v: 'VN-HN', f: 'Hanoi'}, 200],
[{v: 'VN-SG', f: 'HCM'}, 300],
]);
var options = {
region:'VN',
resolution:'provinces',
colorAxis: {
minValue: 0,
maxValue: 400
}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
Good day, I have a google column chart and work perfectly but when I re size my browser the column chart overflowed and wont re size. my website is responsive and I dont want to put my bar chart like that. how to get my column chart responsive?
I got this column chart from developers.google.com/chart/interactive/docs/gallery/columnchart
here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title><?php echo $title;?></title>
<!-- Load Google chart api -->
<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.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical',
vAxis: {format: 'decimal'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var btns = document.getElementById('btn-group');
btns.onclick = function (e) {
if (e.target.tagName === 'BUTTON') {
options.vAxis.format = e.target.id === 'none' ? '' : e.target.id;
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
}
</script>
</head>
<body>
<div id="chart_div" style="width:100%;"></div>
<br/>
<div id="btn-group">
<button class="button button-blue" id="none">No Format</button>
<button class="button button-blue" id="scientific">Scientific Notation</button>
<button class="button button-blue" id="decimal">Decimal</button>
<button class="button button-blue" id="short">Short</button>
</div>
</body>
</html>
I tried also to add width="100%" from div but its doesn't work at all.
Currently, the problem with Google Charts is that it doesn't have a responsive feature.
From previous explorations over the web, the best solution that I found and implemented was:
$(window).resize(function () {
drawChart();
});
This piece of code calls the drawChart() function each time the browser window is resized. Therefore, this means that the Chart is redrawn each time. This may not be the best or efficient solution, but for me it did the job.
In order to allow the .resize() function, you will require the jQuery Library. More information for this is available here.
Hi I want all the slices in a Google Pie Chart should be offset,
I have an example which offset slices with hardcoded. But I need all the slices should be offset to a specific value.
The example I have is:
<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([
['Language', 'Speakers (in millions)'],
['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
]);
var options = {
title: 'Indian Language Use',
legend: 'none',
pieSliceText: 'label',
slices: { 4: {offset: 0.2},
12: {offset: 0.3},
14: {offset: 0.4},
15: {offset: 0.5},
},
};
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>
for(i = 0;i < data.getNumberOfRows();i++){
offsetObj[i] = {offset:0.4};
}
This is the solution to populate a object like {4: {offset: 0.4}, 12: {offset: 0.4}, 14: {offset: 0.4},15: {offset: 0.4},}
I need to make chart which have use same data and display line chart and area chart.How to
composite line and area chart.
This is the data
['Year', 'Sales', 'Expenses','Total'],
['2004', 1000, 400,600],
['2005', 1100, 200,900],
['2006', 6000, 5000,1000],
['2007', 1000, 500,500]
And i need sales and expenses line chart and total area chart.
You could use a combo chart. These are A charts that lets you render each series as a different marker type from the following list: line, area, bars, candlesticks and stepped area.
To assign a default marker type for series, specify the seriesType property. Use the series property to specify properties of each series individually.
There is an example in the link that you could edit. You used to be able to do a compound chart but these are sadly deprecated now.
example of area and line:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Total'],
['2004', 1000, 400, 600 ],
['2005', 1100, 200, 900 ],
['2006', 6000, 5000, 1000],
['2007', 1000, 500, 500 ],
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Sales & Expenses by Year',
width: 600,
height: 400,
vAxis: {title: "Sales"},
hAxis: {title: "Year"},
seriesType: "area",
series: {5: {type: "line"}}
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
prints
I am using YUI3 as the javascript framework for my application which is about 90% complete. I need to show some pretty charts, but YUI3's charting capabilities leaves a lot to be desired.
I am trying to use Google's Visualization API to generate plots within YUI3 sandbox but it seems to not be working. Here is the sample code:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript' src = 'build/yui/yui-min.js'></script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
<script type='text/javascript'>
var some_foo = function () {
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
YUI().use('node', function (Y) {
/* doing some super-awesome stuff */
/* now trying to show charts with some data */
some_foo();
});
</script>
When I place the call to some_foo() outside the YUI3 sandbox, the code works. However, when I try to call it from within YUI3, it does not work.
I have also tried declaring some_foo() within YUI3 sandbox, outside YUI3 sandbox, before YUI3 sandbox, and also after YUI3 sandbox. I have tried the code on FF14+ and Chrome20+.
Is there something I am missing?
#KingJulian, not sure if you already have the answer by now. I moved the google.load('visualization', '1', {packages:['gauge']}); from the "some_foo" function to a "script" tag and it worked.
Following code worked for me:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
<script type="text/javascript">
google.load('visualization', '1', {packages:['gauge']});
</script>
<script type='text/javascript'>
var some_foo = function () {
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
YUI().use('node', function (Y) {
some_foo();
});
</script>