I am working on angularjs google charts.
In the example i'm trying to show Line chart and Gantt chart, but facing issue displaying the Gantt chart.
Gantt chart is not shown on the webpage, below is the error shown on the console.
angular.js:5754 TypeError: google.visualization[$attr.googleChart] is not a constructor
Any inputs would be helpful.
js code:
"use strict";
/*We need to manually start angular as we need to
wait for the google charting libs to be ready*/
google.setOnLoadCallback(function () {
angular.bootstrap(document.body, ['my-app']);
});
google.load('visualization', '1', { packages: ['corechart'] });
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
var myApp = myApp || angular.module("my-app", ["google-chart"]);
myApp.controller("IndexCtrl", function ($scope) {
$scope.data1 = {};
$scope.data1.dataTable = new google.visualization.DataTable();
$scope.data1.dataTable.addColumn('string', 'Task ID');
$scope.data1.dataTable.addColumn('string', 'Task Name');
$scope.data1.dataTable.addColumn('date', 'Start Date');
$scope.data1.dataTable.addColumn('date', 'End Date');
$scope.data1.dataTable.addColumn('number', 'Duration');
$scope.data1.dataTable.addColumn('number', 'Percent Complete');
$scope.data1.dataTable.addColumn('string', 'Dependencies');
$scope.data1.dataTable.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
$scope.data3 = {};
$scope.data3.dataTable = new google.visualization.DataTable();
$scope.data3.dataTable.addColumn("string", "Name")
$scope.data3.dataTable.addColumn("number", "Qty")
$scope.data3.dataTable.addRow(["Test", 1]);
$scope.data3.dataTable.addRow(["Test2", 2]);
$scope.data3.dataTable.addRow(["Test3", 3]);
});
You seem to be using an old version of the API. Use loader.js, not jsapi.js
using loader.js, you can load all the libs you needs by specifiying in the packages array. In this case, you need packages: ['corechart', 'gantt']
Here's the demo, updated https://plnkr.co/edit/Fxz9xP7UXqgBs3m0EfSg?p=preview
In index.html
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
and in main.js
google.charts.load('visualization', '1', { packages: ['corechart', 'gantt'] });
google.charts.setOnLoadCallback(function () {
angular.bootstrap(document.body, ['my-app']);
});
Things to note:
It's google.charts namespaced, and not google.load directly
Make sure you call google.charts.load before google.charts.setOnLoadCallback
Make sure you load all the packages you need
You can see old version loading info, & limitations on loading charts in Google documentation here
I'm using Google Charts (Visualization, 1.1, Line Package) to create a Simple Chart with 3 Lines and Month and Costs Axis. Everything works fine, except Tooltip customization:
Here's my code
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Line 1");
data.addColumn('number', "Line 2");
data.addColumn('number', "Line 3");
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
data.addRows([
[new Date(2015, 5), 1000, 980, 800, 'Custom Content 1'],
[new Date(2015, 6), 1100, 1000, 970, 'Custom Content 2'],
[new Date(2015, 7), 1550, 1420, 1200, 'Custom Content 3'],
[new Date(2015, 8), 1050, 1200, 930, 'Custom Content 4'],
[new Date(2015, 9), 1280, 1120, 1070, 'Custom Content 5'],
[new Date(2015, 10), 1100, 999, 880, 'Custom Content 6'],
]);
var options = {
chart: {
title: 'Custom ToolTips',
subtitle: 'not working!'
},
focusTarget: 'category',
tooltip: {isHtml: true},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
You can test on JSFiddle
When you Hover the first bottom line you'll get:
But I Want to remove the Date on Top and Calculate Total Cost (Value * 2):
This is possible?
I already tried everything I could, search on Internet and try other codes but it looks like this isn't possible using th Line Package (Instead of CoreChart Package), is that right?
Can anyone help me out?
copied from this answer: https://stackoverflow.com/a/29148517/4966682
After looking deeper into Google's Material Chart information I found on their website:
The Material Charts are in beta. The appearance and interactivity are
largely final, but the way options are declared is not.
Trendlines and tooltips fall under the options section of creating charts since they need the options structure to further define them. Again, as of this date (March 2015) the Google Materials Charts do not support these features. If you want to use things like trendlines and tooltips you need to use non material charts (e.g. packages['corechart'] and not packages['scatter']).
I am new to javascript and the Google Visualization library. I've created a line chart as below 1, but cannot get the Y Axis to display anything; I'm looking for the axis itself to be drawn, along with the values from the Data Table.
Here's my code (the chart labels are changed from the screenshot, but nothing more):
google.setOnLoadCallback(drawLineChart);
function drawLineChart(){var data=google.visualization.arrayToDataTable(
[
[
'Day',
'Label 1','Label 2','Label 3','Label 4','Label 5',
'Label 6','Label 7','Label 8','Label 9','Label 10',
],
['19 Aug 2013',1,0,0,0,0,0],
['20 Aug 2013',2,2,2,0,0,0],
['21 Aug 2013',5,5,0,6,5,0],
['22 Aug 2013',1,4,3,2,0,0],
['23 Aug 2013',0,0,0,4,0,0],
['24 Aug 2013',3,2,1,2,0,15],
['25 Aug 2013',1,2,1,2,0,0],
['26 Aug 2013',3,1,2,1,0,0],
['27 Aug 2013',0,0,3,2,0,1]
]);
var options = {
title:'Title',
legend:{position:'bottom'},
curveType:'none',
interpolateNulls:true,
chartArea:{left:0,top:10,width:"100%"}
};
var chart=new google.visualization.LineChart(document.getElementById('visits_by_day1'));chart.draw(data,options);}
An alternative answer that keeps the chartArea.width option at 100%: set the vAxis.textPosition option to "in", which will draw the labels inside the chartArea:
var options = {
title:'Title',
legend:{position:'bottom'},
curveType:'none',
interpolateNulls:true,
chartArea:{left:0,top:10,width:"100%"},
vAxis:{textPosition: 'in'}
};
That will give you the axis labels just inside the edge of the chartArea
A couple of things:
You have extra labels you don't need. Your code, as written won't work at all. Strip the number of labels down to the number of columns you have.
Adding strings, and hoping they're interpreted as dates doesn't work well. Make it explicit.
Your chart area also excluded the vAxis labels.
Try the following:
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Label 1');
data.addColumn('number', 'Label 2');
data.addColumn('number', 'Label 3');
data.addColumn('number', 'Label 4');
data.addColumn('number', 'Label 5');
data.addColumn('number', 'Label 6');
data.addRows([
[new Date('19 Aug 2013'),1,0,0,0,0,0],
[new Date('20 Aug 2013'),2,2,2,0,0,0],
[new Date('21 Aug 2013'),5,5,0,6,5,0],
[new Date('22 Aug 2013'),1,4,3,2,0,0],
[new Date('23 Aug 2013'),0,0,0,4,0,0],
[new Date('24 Aug 2013'),3,2,1,2,0,15],
[new Date('25 Aug 2013'),1,2,1,2,0,0],
[new Date('26 Aug 2013'),3,1,2,1,0,0],
[new Date('27 Aug 2013'),0,0,3,2,0,1]
]);
var options = {
title:'Title',
legend:{position:'bottom'},
curveType:'none',
interpolateNulls:true,
//chartArea:{left:0,top:10,width:"100%"}
};
var chart=new google.visualization.LineChart(document.getElementById('visits_by_day1'));
chart.draw(data,options);
}
I have similar issue. But, in my case, I am NOT using chartArea option at all. Hence, I doubt #asgallant's explanation is correct.
The following is my code:
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
// Declare columns
data.addColumn('date', 'Date');
data.addColumn('number', 'MM8');
data.addColumn('number', 'S&P');
data.addRows([[new Date('01/03/2017'),98517.96,100278.03],[new Date('01/10/2017'),99606.27,100769.69],[new Date('01/17/2017'),97409.55,100724.83],[new Date('01/24/2017'),101596.78,101265.78],[new Date('01/31/2017'),103283.59,101212.49],[new Date('02/07/2017'),106136.74,101843.6],[new Date('02/14/2017'),102568.42,103820.0],[new Date('02/21/2017'),102253.38,105054.7],[new Date('02/28/2017'),98587.77,104977.42],[new Date('03/07/2017'),97623.69,105188.38],[new Date('03/14/2017'),99571.71,105057.8],[new Date('03/21/2017'),98026.27,104106.02],[new Date('03/28/2017'),100641.93,104752.24],[new Date('04/04/2017'),98556.17,104822.86],[new Date('04/11/2017'),99200.09,104539.5],[new Date('04/18/2017'),98695.49,104024.75],[new Date('04/25/2017'),102622.71,106086.42],[new Date('05/02/2017'),100472.95,106200.12],[new Date('05/09/2017'),98574.4,106455.5],[new Date('05/16/2017'),106159.07,106622.05],[new Date('05/23/2017'),104296.55,106522.12],[new Date('05/30/2017'),105035.88,107165.67],[new Date('06/06/2017'),107811.48,107894.94],[new Date('06/13/2017'),110670.8,108384.37],[new Date('06/20/2017'),110152.66,108236.92],[new Date('06/27/2017'),109044.62,107453.02],[new Date('07/03/2017'),108633.82,107880.72],[new Date('07/11/2017'),111239.13,107726.16],[new Date('07/18/2017'),113238.32,109284.19],[new Date('07/25/2017'),114516.89,110017.9],[new Date('08/01/2017'),114235.76,109983.26],[new Date('08/08/2017'),118583.33,109919.74],[new Date('08/15/2017'),117029.48,109461.84],[new Date('08/22/2017'),115461.52,108924.44],[new Date('08/29/2017'),113553.88,108648.63],[new Date('09/05/2017'),112772.29,109161.61],[new Date('09/12/2017'),113241.54,110877.3],[new Date('09/19/2017'),116056.94,111328.98],[new Date('09/26/2017'),114991.2,110893.29],[new Date('10/03/2017'),119650.15,112569.45],[new Date('10/10/2017'),119326.16,113282.73],[new Date('10/17/2017'),124032.6,113670.02],[new Date('10/24/2017'),125599.48,114103.94],[new Date('10/31/2017'),126408.48,114376.19],[new Date('11/07/2017'),126213.65,115059.27],[new Date('11/14/2017'),128414.88,114536.52],[new Date('11/21/2017'),132050.66,115431.9],[new Date('11/28/2017'),133242.73,116675.92],[new Date('12/05/2017'),130042.14,116788.29],[new Date('12/12/2017'),130220.51,118322.33],[new Date('12/19/2017'),133182.72,119093.34],[new Date('12/26/2017'),133313.89,119050.26],[new Date('01/02/2018'),133892.53,119730.23]
]);
var options = {
title: 'Portfolio Performance Comparison',
curveType: 'function',
legend: { position: 'bottom' },
hAxis: {
format: 'M/d/yy'
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
resulted graph