google charts (generate chart with date axis) - javascript

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/

Related

google.visualization[$attr.googleChart] is not a constructor

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

Google Charts - Custom Tooltip on Line Chart (Line Package) not Working

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']).

Removing Decimals From Line Chart Axis

I have a google line chart I'm using and in many cases the numbers on the axis represent decimals point. Obviously since my data represents people it makes no sense to show the axis in decimal points. I would like for them to rounded up to whole numbers. So far I've been toiling with the format option in the xAxis like so.
var options = {
legend: 'none',
hAxis: {
title: 'Dogs',
format: 'long'
}
};
However, the points on the xAxis are represented as decimals. The jsfiddle can be found here. What's wrong and how can I fix this?
You could set custom format specifiers such as:
# (Digit placeholder)
0 (Zero placeholder)
Example
google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0]
]);
var options = {
legend: 'none',
hAxis: {
title: 'Dogs',
format: '#'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
Another option is to specify hAxis.ticks:
Replaces the automatically generated X-axis ticks with the specified
array.
Example
google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0]
]);
var options = {
legend: 'none',
hAxis: {
title: 'Dogs',
//format: '#'
ticks: [-1,0,1]
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

Google visualization line chart missing Y axis

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

`baseline` option for date values does not work in Google Visualization

I am trying to draw a baseline on a chart that uses date values to chart. Here is the code, and here is what the chart looks like:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Assignment');
data.addColumn('date', 'Dummy');
data.addRows([
['A', new Date(2011,1,1)],
['B', new Date(2012,1,1)],
['C', new Date(2013,1,1)],
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{
width:600, height:400,
hAxis: {baseline: new Date(2012,6,1), baselineColor: 'red'}
}
);
}
This is not the expected behavior -- the baseline is set to be on July 1st, 2012, yet it is appearing all the way to the left (January 1st, 2011).
If you do this with a non-date Axis chart, the behavior is different:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Assignment');
data.addColumn('number', 'Dummy');
data.addRows([
['A', 1],
['B', 2],
['C', 3],
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{
width:600, height:400,
hAxis: {baseline: 1.5, baselineColor: 'red'}
}
);
}
What the heck is going on here? Is it impossible to set the baseline of a date-axis chart?

Categories

Resources