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
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.
i need to visualize the google chart with the average rating made for a products based on the 1 week, 2 Months, 4 Months, 8 Months and 12 Months, so i have tried to visualize it with the google visualization tool, so i got the following code there
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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="//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([
['Duration', 'rating'],
['1 week', 1],
['2 Months', 2],
['4 Months', 3],
['8 Months', 4],
['1 Year', 5],
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
hAxis: {title: "Year"}}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
here it displaying the output as
i need the y axis must be 1 to 5 and in the x axis must have the average rating based on the time frame, is this is possible? what i have to do?
To answer the first part of the question...
...y axis must be 1 to 5...
... you have to format the y axis, which isn't in your code yet.
Change your call to google.visualization.ColumnChart to
new google.visualization.ColumnChart(
document.getElementById('visualization')).draw(
data, {
title: "Yearly Coffee Consumption by Country",
width: 600,
height: 400,
hAxis: {
title: "Year"
},
vAxis: { <- new code from here...
minValue:0,
format:'#',
gridlines:{
count:6
}
}
}
);
This should format the axis according to your description.
The 2nd part of your question,
...the x axis must have the average rating based on the time frame...
is not yet clear to me. Please add some more detail to it, p.e. how / what kind of data do you want where.
Here is my code :
I need to make a spiderweb graph with a legend in blue here.
3 axys
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
<script>
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.axis2d.Default");
dojo.require("dojox.charting.plot2d.Default");
dojo.require("dojox.charting.plot2d.Spider");
dojo.require("dojox.charting.axis2d.Base");
dojo.require("dojox.charting.widget.Legend");
dojo.ready(
function(Chart, Default, Default, Spider, Base,Legend){
var chart1 = new dojox.charting.Chart("chart1");
chart1.addPlot("default", {
type: "Spider",
labelOffset: -10,
seriesFillAlpha: 0.2,
markerSize: 3,
precision: 0,
divisions: 11,
spiderType: "polygon"
});
var data= [ {"J":0,"S":0,"I":0},
{"J":10,"S":10,"I":10},
{"J":7,"S":4,"I":8} ];
chart1.addSeries("min", {data: data[0] }, { fill: "blue" });
chart1.addSeries("max", {data: data[1] }, { fill: "blue" });
chart1.addSeries("Test", {data: data[2] }, { fill: "blue",text: "Test" });
chart1.render();
chart1.removeSeries("min");
chart1.removeSeries("max");
var legendTwo = new Legend({chart: chart1}, "legendTwo");
});
</script>
</head>
<body>
<div id="chart1" style="width: 600px; height: 600px;"> </div>
<div id="legendTwo"></div>
</body>
</html>
And i don't understand why the label and the legend doesn't print.
The remove is due to a bug of dojox.
Regards
Bussiere
I may be misunderstanding your issue, but since you are using the old module loading style (dojo.require), you need the full name of the Legend class:
var legendTwo = new dojox.charting.widget.Legend({chart: chart1}, "legendTwo");
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.