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
Related
I'm trying to implement the calendar chart from the google chart library https://developers.google.com/chart/interactive/docs/gallery/calendar
However, when I try to implement it, I seem to get an error 'Cannot read property 'DataTable' of undefined'
After carefully debugging, I have found out that the library itself DOES load as I can use certain google code however, it is missing a file called 'library-preload.js' when calling the chart function.
'failed to load 'lib/googleChart/library-preload' (failed to load 'lib/googleChart/library-preload.js' from /webapp/lib/googleChart/library-preload.js:' I have tried multiple ways of implementing the library just in case this was the problem such as implementing the library via HTML and into the manifest.json file, however, I still get the same error.
Many thanks.
Attached as listed;
code where the library is loaded.
Init
the function called to load the chart (line 3 is where i get the error - 'Cannot read property 'DataTable' of undefined')
Screenshot of Library directory
Screenshot of the error in debugger
sap.ui.getCore().loadLibrary("lib.googleChart", "/webapp/lib/googleChart/");
onInit: function () {
google.charts.load("current", {packages:["calendar"]});
google.charts.setOnLoadCallback(this.drawChart());
},
drawChart: function() {
debugger;
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var calender = this.getView().byId("calenderChart");
//var chart = new google.visualization.Calendar(calender);
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
},
Screenshot of Library directory
Screenshot of the error in debugger
Using this code from google line charts I get the following error all the time:
Uncaught SyntaxError: missing ) after argument list
code:
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLogScales);
google.charts.setOnLoadCallback(drawLogScalesLTC);
function drawLogScales() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'PTH/s');
data.addRows([
[new Date(2016-12-15 21:23:07), 0.78],
[new Date(2016-12-14 21:23:07), 5.31],
[new Date(2016-12-13 21:23:07), 8.38],
[new Date(2016-12-12 21:23:07), 0.72],
[new Date(2016-12-11 21:23:07), 3.27],
[new Date(2016-12-10 21:23:07), 0.78],
]);
var options = {
hAxis: {
title: 'Time (h)',
logScale: true
},
vAxis: {
title: 'PTH/s',
logScale: false
},
colors: ['#a52714', '#097138']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
I'm totally baffled where things go wrong. The synatx is fine I think.
The problem is actually how you're creating your dates. Since you're passing in a string you should declare a new date with quotes around the date string:
new Date('2016-01-01 01:01:01')
To get your code working I also cast each date to a string and changed the column type for the dates from 'number' to 'string'. See fiddle for working code.
https://jsfiddle.net/nz5yto73/
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 want to be able to remove the spacing that is added when the value is 0 - in the example below there is a max of 4 answers so when the value is 0 removing the spacing will not stretch the graph so much.
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
'packages': ['corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Course');
data.addColumn('number', 'Excellent');
data.addColumn('number', 'Adequate');
data.addColumn('number', 'Limited');
data.addColumn('number', 'None');
data.addColumn('number', 'Very Confident');
data.addColumn('number', 'Fairly Confident');
data.addColumn('number', 'Somewhat Confident');
data.addColumn('number', 'Not at all');
data.addRows([
['Knowledge level', 1, 8, 30, 0, 0, 0, 0, 0],
['Assessment skills', 1, 9, 18, 11, 0, 0, 0, 0],
['Planning skills', 2, 7, 20, 10, 0, 0, 0, 0],
['Confidence', 0, 0, 0, 0, 5, 6, 7, 8]
]);
// Set chart options
var options = {
'title': 'Statewide Count across all courses',
'width': 700,
'height': 900
};
// Instantiate and draw our chart, passing in some options.
var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
//Wait for the chart to finish drawing before calling the getImageURI() method.
/*google.visualization.events.addListener(chart, 'ready', function(){
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);
})*/
chart.draw(data, options);
}
Picture here
I have copied the Google Code example into a php script however I am getting the error "undefined is not a function"
it is happening specifically on this line:
var table = new
google.visualization.Table(document.getElementById('table_sort_div'));
It appeats that the Table function does not exist???
I have copied the code directly from Googles Code examples so I can't understand what I have done wrong... I'm tending to believe that there is an issue with the example but I'm gonna assume I'd make a mistake before google would?
Code was copied directly from: http://code.google.com/apis/chart/interactive/docs/examples.html#interaction_example
You need to wait for the scripts to load. For example:
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['table']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var table = new google.visualization.Table(document.getElementById('table_sort_div'));
}
should work, because the scripts have been loaded. A better table reference here
Also if you want to load multiple packages, you can do that as well like :
google.load('visualization', '1', { packages: ['corechart', 'table'] });
google.charts.load('current', {'packages': ['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time');
data.addRows(5);
data.setCell(0, 0, 'John');
data.setCell(0, 1, 10000, '$10,000');
data.setCell(0, 2, true);
data.setCell(1, 0, 'Mary');
data.setCell(1, 1, 25000, '$25,000');
data.setCell(1, 2, true);
data.setCell(2, 0, 'Steve');
data.setCell(2, 1, 8000, '$8,000');
data.setCell(2, 2, false);
data.setCell(3, 0, 'Ellen');
data.setCell(3, 1, 20000, '$20,000');
data.setCell(3, 2, true);
data.setCell(4, 0, 'Mike');
data.setCell(4, 1, 12000, '$12,000');
data.setCell(4, 2, false);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
google.visualization.events.addListener(table, 'select', function () {
var row = table.getSelection()[0].row;
alert('You selected ' + data.getValue(row, 0));
});
}