I am working on a project where I need to show graph like this.
I am using google visualisation chart api to achieve this. I am able to draw the chart as follows.
I am very new to this. The problem I am facing is, I am not able to draw the vAxis line as shown in example graph. Also, how can I change the colour and same as I am using. Change the interval of VAxis as shown.
Please advice.
Below is the code which I am using
<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', 'Profit'],
['May,14', 5, 1, 2],
['April,14', 4, 2, 3],
['March,14', 6, 7, 2],
['Feb,14', 1, 7, 2],
['Jan,14', 3, 3, 2],
['Dec,14', 4, 3, 2],
['Nov,14', 5, 3, 2],
['Oct,14', 6, 6, 2],
['Sept,14',7, 6, 2],
['Aug,14', 3, 5, 2],
['July,14', 5, 5, 2],
['June,14', 6, 3, 2]]);
var options = {
orientation:'horizontal',
animation: {duration: 2000, easing: 'out'},
legend: 'none' };
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options); }
</script>
</head>
<body>
<div id="chart_div" style="position: absolute; top:-50px; left:-70px; width: 900px; height: 500px;">
</div>
</body>
</html>
You will get a line there if you use a continuous type axis. Since you are plotting months, you could use a "date" type:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
[new Date(2014, 4), 5, 1, 2],
[new Date(2014, 3), 4, 2, 3],
[new Date(2014, 2), 6, 7, 2],
[new Date(2014, 1), 1, 7, 2],
[new Date(2014, 0), 3, 3, 2],
[new Date(2014, 11), 4, 3, 2],
[new Date(2014, 10), 5, 3, 2],
[new Date(2014, 9), 6, 6, 2],
[new Date(2014, 8),7, 6, 2],
[new Date(2014, 7), 3, 5, 2],
[new Date(2014, 6), 5, 5, 2],
[new Date(2014, 5), 6, 3, 2]
]);
var dateFormatter = new google.visualization.DateFormat({pattern: 'MMM, yyyy'});
dateFormatter.format(data, 0);
var options = {
// FYI, a horizontal BarChart is the same thing as a ColumnChart
orientation: 'horizontal',
animation: {
duration: 2000,
easing: 'out'
},
legend: 'none',
hAxis: {
format: 'MMM, yyyy'
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
see example here: http://jsfiddle.net/asgallant/WJCpx/
Related
I have data for the graph that contain 4 columns (X axis values with type datetime and 3 Y axis values with type number). And I'm building a chart with 3 lines (nothing unusual):
var chartDataTable = new google.visualization.DataTable();
// get data to chartDataTableRows variable by ajax
chartDataTable.addRows(chartDataTableRows);
var _chartContainer = $('<div id="_chart"</div>').appendTo($('#_tempChart'));
var chart = new google.visualization.LineChart(_chartContainer[0]);
chart.draw(chartDataTable, defaultChartOptions());
Now I need to add to the chart one more line that will display the sum of the indicators of the existing three lines. Are there any such tools in GoogleCharts?
you can use a DataView with a calculated column for the total
1) create a DataView over the DataTable
var chartDataView = new google.visualization.DataView(chartDataTable);
2) use the setColumns method to provide the columns for the DataView
provide the column index for the existing columns,
and a calculated column for the total...
chartDataView.setColumns([0, 1, 2, 3, {
type: 'number',
label: 'total',
calc: function (dt, row) {
var rowTotal = 0;
for (var col = 1; col < chartDataTable.getNumberOfColumns(); col++) {
rowTotal += chartDataTable.getValue(row, col);
}
return rowTotal;
}
}]);
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var chartDataTable = new google.visualization.DataTable();
chartDataTable.addColumn('date', 'x');
chartDataTable.addColumn('number', 'y0');
chartDataTable.addColumn('number', 'y1');
chartDataTable.addColumn('number', 'y2');
chartDataTable.addRows([
[new Date(2018, 2, 28), 5, 2, 8],
[new Date(2018, 2, 29), 7, 3, 6],
[new Date(2018, 2, 30), 3, 0, 9],
[new Date(2018, 2, 31), 1, 5, 9],
[new Date(2018, 3, 1), 3, 6, 7],
[new Date(2018, 3, 2), 4, 7, 8],
[new Date(2018, 3, 3), 3, 1, 8],
[new Date(2018, 3, 4), 4, 2, 6],
[new Date(2018, 3, 5), 2, 3, 5]
]);
var chartDataView = new google.visualization.DataView(chartDataTable);
chartDataView.setColumns([0, 1, 2, 3, {
type: 'number',
label: 'total',
calc: function (dt, row) {
var rowTotal = 0;
for (var col = 1; col < chartDataTable.getNumberOfColumns(); col++) {
rowTotal += chartDataTable.getValue(row, col);
}
return rowTotal;
}
}]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(chartDataView);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am building a google line chart. I have inserted my data via php and this is what the html source looks like. I can't for the life of me find why this is just showing a white page. I put the word test in there to make sure it is loading and "test" shows up but nothing else. Apache logs show no errors. I appreciate any help or suggestions!
<!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="refresh" content="180" >
<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("search", "1");
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script>
<script type="text/javascript">
// google.charts.load('current', {'packages':['corechart']});
// google.charts.setOnLoadCallback(drawChart);
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});
function drawChart() {
var data = new google.visualization.DataTable(
data.addColumn('date', 'PollTime');
data.addColumn('number', 'Download');
data.addColumn('number', 'Upload');
data.addRows([ [new Date(2016, 5, 4, 0, 4), 294, 37], [new Date(2016, 5, 4, 0, 13), 265, 34], [new Date(2016, 5, 4, 0, 22), 236, 32], [new Date(2016, 5, 4, 0, 31), 218, 33], [new Date(2016, 5, 4, 0, 40), 225, 46], [new Date(2016, 5, 4, 0, 49), 207, 41], [new Date(2016, 5, 4, 0, 58), 184, 29], [new Date(2016, 5, 4, 1, 7), 190, 31], [new Date(2016, 5, 4, 1, 16), 181, 32], [new Date(2016, 5, 4, 1, 25), 191, 31], [new Date(2016, 5, 4, 1, 34), 174, 32], [new Date(2016, 5, 4, 1, 43), 142, 32], [new Date(2016, 5, 4, 1, 52), 135, 30], [new Date(2016, 5, 4, 2, 1), 128, 23], [new Date(2016, 5, 4, 2, 10), 118, 28], ]););
var options = {
title: 'TelePacific Bandwidth Usage',
width: 900,
height: 500,
hAxis: {
format: 'M/d/yy HH:mm',
gridlines: {count: 15}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var button = document.getElementById('change');
button.onclick = function () {
// If the format option matches, change it to the new option,
// if not, reset it to the original format.
options.hAxis.format === 'M/d/yy' ?
options.hAxis.format = 'MMM dd, yyyy' :
options.hAxis.format = 'M/d/yy';
chart.draw(data, options);
};
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
test
<div id="chart_div" style="width: 500px; height: 400px;"></div>
</body>
</html>
Bad syntax. Ln
var data = new google.visualization.DataTable(
should be
var data = new google.visualization.DataTable();
and then remove
);
after the data
I am trying to load three different google charts on page, one gauge, one line and one bar chart. But something fails when i try to implement the third chart. Sometimes the gauge chart and the line chart loads but not the bar chart, other times only the gauge and the bar chart loads. I cant get all three to load at the same time. Can i please get some help?
Here is my code:
<html>
<head>
<title>Usage statistic</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart", "gauge", "line", "bar"],
'language': 'no'
});
google.setOnLoadCallback(init);
function init() {
drawLine();
drawBar();
drawGauge();
}
function drawGauge() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Month', 73.6],
['Today', 62.7],
['Week', 73.6],
]);
var options = {
width: 800,
height: 240,
greenFrom: 40,
greenTo: 100,
redFrom: 0,
redTo: 20,
yellowFrom: 20,
yellowTo: 40,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
chart.draw(data, options);
}
function drawLine() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Logins');
data.addRows([
[new Date(2015, 10, 16), 1971],
[new Date(2015, 10, 17), 1973],
[new Date(2015, 10, 18), 1964],
[new Date(2015, 10, 19), 1981],
[new Date(2015, 10, 20), 1919],
[new Date(2015, 10, 21), 1185],
[new Date(2015, 10, 22), 1104],
[new Date(2015, 10, 23), 2009],
[new Date(2015, 10, 24), 1955],
[new Date(2015, 10, 25), 1933],
[new Date(2015, 10, 26), 1923],
[new Date(2015, 10, 27), 1854],
[new Date(2015, 10, 28), 1159],
[new Date(2015, 10, 29), 1107],
[new Date(2015, 10, 30), 2006],
[new Date(2015, 11, 01), 1998],
[new Date(2015, 11, 02), 1951],
[new Date(2015, 11, 03), 1921],
[new Date(2015, 11, 04), 1870],
[new Date(2015, 11, 05), 1174],
[new Date(2015, 11, 06), 1128],
[new Date(2015, 11, 07), 2030],
[new Date(2015, 11, 08), 1912],
[new Date(2015, 11, 09), 1956],
[new Date(2015, 11, 10), 1942],
[new Date(2015, 11, 11), 1895],
[new Date(2015, 11, 12), 1168],
[new Date(2015, 11, 13), 1148],
[new Date(2015, 11, 14), 2004],
[new Date(2015, 11, 15), 1954],
]);
var options = {
title: 'Logins',
width: 800,
height: 400,
hAxis: {
format: 'MMM d, y',
gridlines: {
count: 15
}
},
vAxis: {
gridlines: {
color: 'none'
},
minValue: 0
}
};
var chart = new google.charts.Line(document.getElementById('line_div'));
chart.draw(data, options);
}
function drawBar() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Emails Received');
data.addRows([
[
[8, 30, 45], 5
],
[
[9, 0, 0], 10
],
[
[10, 0, 0, 0], 12
],
[
[10, 45, 0, 0], 13
],
[
[11, 0, 0, 0], 15
],
[
[12, 15, 45, 0], 20
],
[
[13, 0, 0, 0], 22
],
[
[14, 30, 0, 0], 25
],
[
[15, 12, 0, 0], 30
],
[
[16, 45, 0], 32
],
[
[16, 59, 0], 42
]
]);
var options = google.charts.Bar.convertOptions({
title: 'Total Emails Received Throughout the Day',
width: 800,
height: 400
});
var chart = new google.charts.Bar(document.getElementById('bar_div'));
chart.draw(data, options);
}
</script>
<style>
.menu {
border-radius: 5px;
border: 1px solid black;
float: left;
padding: 0px 6px;
margin-right: 6px;
color: #686868;
}
.menu a {
text-decoration: none;
color: #686868;
}
.active a {
color: black !important;
}
</style>
</head>
<body style="background-color: #F0F0F0; margin: 20px;">
<div>
<h2>Logins in percentages</h2>
</div>
<div id="gauge_div"></div>
<div>
<h2>Logins last 30 days</h2>
</div>
<div id="line_div"></div>
<div>
<h2>Emails Received</h2>
</div>
<div id="bar_div"></div>
</body>
</html>
I can't really answer why, but if you look at the documentation for loading libraries link, you see that they have updated how it's done. And it's quite differente from before.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart", "gauge", "line", "bar"],
'language': 'no'
});
google.setOnLoadCallback(init);
would have to be changed to
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages: ["corechart", "gauge", "line", "bar"]});
google.charts.setOnLoadCallback(init);
....
</script>
It looks like everything is still working in my applications, with the old loading style, but trying your scenario didn't work at all with the old style. Changeing it to the new one works.
Jsfiddle
EDIT:
If anyone is interested I found out why my things are working. I'm working exclusively with Wrappers, and apparantly you should use google.load (the old way) and not the new google.charts.load.
Source
I need to add multiple trendlines to my google line chart but I just can't figure out how to do it with more than one line.
Here is my code example with a single line based on a date and value to build the chart:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value');
data.addRow([new Date(2013, 3, 11), 10]);
data.addRow([new Date(2013, 4, 02), 650]);
data.addRow([new Date(2013, 5, 03), 55]);
data.addRow([new Date(2013, 6, 04), 95]);
data.addRow([new Date(2013, 7, 05), 400]);
data.addRow([new Date(2013, 8, 06), 600]);
data.addRow([new Date(2014, 0, 07), 800]);
data.addRow([new Date(2014, 1, 08), 900]);
data.addRow([new Date(2014, 2, 09), 3127]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: 'R$:'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 600;
var chartOptions = {
tooltip:{isHtml: true},
trendlines: {
0: {color: 'red'}
},
title: 'Trendlines with multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawMultipleTrendlineChart});
</script>
</head>
<body>
<div id="multipleTrendChart"></div>
</body>
I wan't to do it like this image:Image_example
jsfiddle example: http://jsfiddle.net/w3ez9gwb/
Just add more columns of your data:
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');
data.addRows([
[new Date(2013, 3, 11), 100, 10],
[new Date(2013, 4, 02), 50, 650],
[new Date(2013, 5, 03), 70, 55],
[new Date(2013, 6, 04), 80, 95],
[new Date(2013, 7, 05), 50, 400],
[new Date(2013, 8, 06), 10, 600],
[new Date(2014, 0, 07), 20, 800],
[new Date(2014, 1, 08), 300, 900],
[new Date(2014, 2, 09), 100, 312]
]);
Then add the trendlines to your chart options like so:
var chartOptions = {
tooltip: {
isHtml: true
},
trendlines: {
0: {
color: 'red'
},
1: {
color: 'yellow'
},
},
...
};
Full example: JSFiddle
I have a chart (image bellow), where the green line has a reference to the year 2014, and the purple line will be 2013.
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];
var data2 = [
[gd(2014, 1, 1), 1], [gd(2014, 2, 1), 0], [gd(2014, 3, 1), 2], [gd(2014, 4, 1), 0],
[gd(2014, 5, 1), 1], [gd(2014, 6, 1), 3], [gd(2014, 7, 1), 1], [gd(2014, 8, 1), 5],
[gd(2014, 9, 1), 2], [gd(2014, 10, 1), 3], [gd(2014, 11, 1), 2], [gd(2014, 12, 1), 1]];
This is the dataset, but look that I put both dataset in 2014 year because if I put 2014 in one dataset and 2013 in another, I miss the overlap effect and I need that effect for comparsion.
This is what happens if a put the 2013 year in one dataset and 2014 in another (image below)
How can I do the same chart, but with this overlap effect, using the 2013 year in one dataset?
This also will fix my hover functionallity.
Code
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];
var data2 = [
[gd(2014, 1, 1), 1], [gd(2014, 2, 1), 0], [gd(2014, 3, 1), 2], [gd(2014, 4, 1), 0],
[gd(2014, 5, 1), 1], [gd(2014, 6, 1), 3], [gd(2014, 7, 1), 1], [gd(2014, 8, 1), 5],
[gd(2014, 9, 1), 2], [gd(2014, 10, 1), 3], [gd(2014, 11, 1), 2], [gd(2014, 12, 1), 1]];
$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
data1, data2
],
{
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 2,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#d5d5d5'
},
colors: ["#1ab394", "#464f88"],
xaxis: {
mode: "time",
tickSize: [1, "month"],
tickLength: null,
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Arial',
axisLabelPadding: 10,
color: "#838383",
timeformat: "%b/%y"
},
yaxis: {
ticks: 4
}
}
);
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
You use the concept of multiple axes, but just hide the second axis.
To do this you create two data sets, each with their own axis:
var data2014 = {
label: "2014",
data: data1,
xaxis: 1
};
var data2013 = {
label: "2013",
data: data2,
xaxis: 2
};
and then in the axes option setting, set ticks to false to hide one axis.
The max setting for the 2014 data is important, otherwise the data set will scale to fill the whole graph:
xaxes: [{
mode: "time",
tickSize: [1, "month"],
tickLength: null,
color: "#838383",
timeformat: "%b",
max: (new Date("2014/12/1")).getTime()
},{
ticks: false
}],
JS Fiddle here.
Full code below:
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];
var data2 = [
[gd(2013, 1, 1), 1], [gd(2013, 2, 1), 0], [gd(2013, 3, 1), 2], [gd(2013, 4, 1), 0],
[gd(2013, 5, 1), 1], [gd(2013, 6, 1), 3], [gd(2013, 7, 1), 1], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
var data2014 = {
label: "2014",
data: data1,
xaxis: 1
};
var data2013 = {
label: "2013",
data: data2,
xaxis: 2
};
$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
data2014, data2013
],
{
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 2,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
labelMargin: 17,
margin: {
top: 8,
bottom: 10,
left: 20
},
minBorderMargin: 25,
color: '#d5d5d5'
},
colors: ["#1ab394", "#464f88"],
xaxes: [{
mode: "time",
tickSize: [1, "month"],
color: "#838383",
timeformat: "%b",
max: (new Date("2014/12/1")).getTime()
},{
ticks: false,
}],
yaxis: {
ticks: 5
},
legend: {
backgroundOpacity: 0.5,
noColumns: 0,
position: "ne",
color: "#838383",
}
}
);
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}