This strange thing seeme to let me see only 4 gridlines on the horizontal line. Can anybody help?
<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('date', 'Date');
data.addColumn('number', 'Now');
data.addColumn('number', 'Comparison');
data.addRows([
[new Date(2008, 1 ,1), 1264, 1477],
[new Date(2008, 1 ,2), 1499, 1406],
[new Date(2008, 1 ,3), 1322, 1105],
[new Date(2008, 1 ,4), 1147, 1154],
[new Date(2008, 1 ,5), 1309, 1227],
[new Date(2008, 1 ,6), 1251, 1298],
[new Date(2008, 1 ,7), 1238, 1264],
[new Date(2008, 1 ,8), 1264, 1477],
[new Date(2008, 1 ,9), 1499, 1406],
[new Date(2008, 1 ,10), 1322, 1105],
[new Date(2008, 1 ,11), 1147, 1154],
[new Date(2008, 1 ,12), 1309, 1227],
[new Date(2008, 1 ,13), 1251, 1298],
[new Date(2008, 1 ,14), 1238, 1264],
[new Date(2008, 1 ,15), 1789, 1256],
[new Date(2008, 1 ,16), 1789, 1078],
[new Date(2008, 1 ,17), 1965, 975],
[new Date(2008, 1 ,18), 1654, 896],
[new Date(2008, 1 ,19), 1478, 789],
[new Date(2008, 1 ,20), 1278, 989],
[new Date(2008, 1 ,21), 1078, 1009],
[new Date(2008, 1 ,22), 1698, 1109],
[new Date(2008, 1 ,23), 1398, 1209],
[new Date(2008, 1 ,24), 1298, 1509],
[new Date(2008, 1 ,25), 1298, 1009],
[new Date(2008, 1 ,26), 1198, 1209],
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 2000px; height: 1000px;"></div>
</body>
</html>
The default behavior for charts is to use 5 gridlines. See the documentation under hAxis.gridlines.count.
If you want to increase the number of gridlines, then set the options in your chart. For instance:
chart.draw(data, {vAxis: {gridlines: {count: 100}}})
Here is a sample with a whole mess of gridlines (from Google Playground with the above option added):
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1', 'Blanket 2'],
['A', 1, 1, 0.5],
['B', 2, 0.5, 1],
['C', 4, 1, 0.5],
['D', 8, 0.5, 1],
['E', 7, 1, 0.5],
['F', 7, 0.5, 1],
['G', 8, 1, 0.5],
['H', 4, 0.5, 1],
['I', 2, 1, 0.5],
['J', 3.5, 0.5, 1],
['K', 3, 1, 0.5],
['L', 3.5, 0.5, 1],
['M', 1, 1, 0.5],
['N', 1, 0.5, 1]
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10, gridlines: {count: 100}}
}
);
}
As you aren't specifying how many gridlines you expect, please edit the above to suit your needs.
Related
Trying to work with Google charts and ended up with a range slider thru few code snippets provided by developer docs.
<https://jsfiddle.net/hari41980/gsvr18hw/11/>
Now I need someone to help me on getting the date range from date to TIME.
Expected:expected output
Regards
just need to set the desired format in the options for the slider...
'ui': {
'format': {
'pattern': 'h:mm a'
},
'labelStacking': 'vertical'
}
see following example...
google.charts.load('current', {
callback: function () {
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
var programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'Time Stamp',
'ui': {
'format': {
'pattern': 'h:mm a'
},
'labelStacking': 'vertical'
}
}
});
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'AreaChart',
'containerId': 'programmatic_chart_div',
'options': {
'width': 600,
'height': 300,
'legend': 'none',
}
});
var data = google.visualization.arrayToDataTable([
['Time Stamp', 'Bulk'],
[new Date(2014, 9, 15, 10, 30) , 5],
[new Date(2014, 9, 15, 11, 30) , 10],
[new Date(2014, 9, 15, 12, 30) , 15],
[new Date(2014, 9, 15, 13, 30) , 5],
[new Date(2014, 9, 15, 14, 30) , 10],
[new Date(2014, 9, 15, 15, 30) , 8],
[new Date(2014, 9, 15, 16, 30) , 12],
[new Date(2014, 9, 15, 17, 30) , 15],
[new Date(2014, 9, 15, 18, 30) , 25]
]);
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);
},
packages: ['corechart', 'controls']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="programmatic_control_div"></div>
<div id="programmatic_chart_div"></div>
options: {"title":"Overall Stats","height":230,"legend":{"position":"in"},"hAxis":{"title":"Division"}},
I have this as my options for my google column chart but this displays "Division" on both my vertical and horizontal axis and removes all the labels on the hAxis. Can anyone tell me why this is happening?
is there more you can share?
seems to work fine here...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1, .25],
[{v: [9, 0, 0], f: '9 am'}, 2, .5],
[{v: [10, 0, 0], f:'10 am'}, 3, 1],
[{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
[{v: [13, 0, 0], f: '1 pm'}, 6, 3],
[{v: [14, 0, 0], f: '2 pm'}, 7, 4],
[{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
[{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
[{v: [17, 0, 0], f: '5 pm'}, 10, 10],
]);
new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: data,
options: {"title":"Overall Stats","height":230,"legend":{"position":"in"},"hAxis":{"title":"Division"}}
}).draw();
},
packages: ['corechart', 'controls']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I can't get my multi-line chart to animate on start up -
While I'm fetching data points for my multi line graph from the DB, I've added a sample of what the points would be in my code below:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time');
data.addColumn('number', 'Count of Users');
data.addColumn('number', 'Count of Items');
data.addColumn('number', 'Count of Locations');
data.addRows([
[[8,07,06],1,181,181],
[[8,08,52],1,73,73],
[[8,09,43],1,204,204],
[[8,10,06],1,209,209],
[[8,10,27],1,334,334],
[[8,10,47],1,345,345],
[[8,12,24],1,852,852],
[[8,13,52],1,317,317],
[[8,43,01],1,538,538],
[[8,51,53],1,50,50],
[[8,55,01],1,50,50],
[[8,55,30],1,99,99],
[[8,56,27],1,51,51],
[[8,57,11],1,50,50],
[[8,57,58],1,50,50],
[[8,58,32],1,50,50],
[[8,59,42],1,16,16],
[[9,08,54],1,16,16],
[[9,09,41],1,2,2],
[[9,10,07],1,9,9],
[[9,10,53],1,35,35],
[[9,11,31],1,4,4],
[[9,11,45],1,3,3]
]);
var options = {
title: 'Updated every 3 Hours',
chart: {
animation: {
duration: 2000,
easing: 'linear',
startup: true
},
},
width: 1000,
height: 500
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
As of now a static multi line graph is rendered:
enter image description here
There are multiple issues with your code(your console should have logged them)
08 and 09 are not valid Number-values(should be 8 and 9)
you load the wrong package(you must load corechart)
animation is not a property of chart
fixed chart:
google.load('visualization', '1.1', {
packages: ['corechart']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time');
data.addColumn('number', 'Count of Users');
data.addColumn('number', 'Count of Items');
data.addColumn('number', 'Count of Locations');
data.addRows([
[
[8, 7, 06], 1, 181, 181
],
[
[8, 8, 52], 1, 73, 73
],
[
[8, 9, 43], 1, 204, 204
],
[
[8, 10, 06], 1, 209, 209
],
[
[8, 10, 27], 1, 334, 334
],
[
[8, 10, 47], 1, 345, 345
],
[
[8, 12, 24], 1, 852, 852
],
[
[8, 13, 52], 1, 317, 317
],
[
[8, 43, 01], 1, 538, 538
],
[
[8, 51, 53], 1, 50, 50
],
[
[8, 55, 01], 1, 50, 50
],
[
[8, 55, 30], 1, 99, 99
],
[
[8, 56, 27], 1, 51, 51
],
[
[8, 57, 11], 1, 50, 50
],
[
[8, 57, 58], 1, 50, 50
],
[
[8, 58, 32], 1, 50, 50
],
[
[8, 59, 42], 1, 16, 16
],
[
[9, 8, 54], 1, 16, 16
],
[
[9, 9, 41], 1, 2, 2
],
[
[9, 10, 07], 1, 9, 9
],
[
[9, 10, 53], 1, 35, 35
],
[
[9, 11, 31], 1, 4, 4
],
[
[9, 11, 45], 1, 3, 3
]
]);
var options = {
title: 'Updated every 3 Hours',
animation: {
duration: 2000,
easing: 'linear',
startup: true
},
//width: 1000,
//height: 500
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
I am currently testing google charts and having difficulty in specifying my own custom tooltips.
my data is declared as below
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([0, 0, 0, 'hello'], [1, 10, 5, 'hello'],
[2, 23, 15, 'hello'],[3, 17, 9, 'hello'], [4, 18, 10, 'hello'],
[5, 9, 5, 'hello'],
see this jsFiddle http://jsfiddle.net/SecretSquirrel/rbwyhx1q/
It appears the custom tooltip is only affecting the first data column?
I thought it was pretty limited to only allow 1 tooltip per row, but if this is only 1 tooltip for the first column this is really quite useless.
Well you have to add another tooltip column for your second graft.
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([
[0, 0,'custom', 0, 'hello'], [1, 10,'custom', 5, 'hello'], [2, 23,'custom', 15, 'hello'],
[3, 17,'custom', 9, 'hello'], [4, 18,'custom', 10, 'hello'], [5, 9,'custom', 5, 'hello'],
[6, 11,'custom', 3, 'hello'], [7, 27,'custom', 19, 'hello'], [8, 33,'custom', 25, 'hello'],
[9, 40,'custom', 32, 'hello'], [10, 32,'custom', 24, 'hello'], [11, 35,'custom', 27, 'hello'],
[12, 30,'custom', 22, 'hello'], [13, 40,'custom', 32, 'hello'], [14, 42,'custom', 34, 'hello'],
[15, 47,'custom', 39,'hello'], [16, 44,'custom', 36,'hello'], [17, 48,'custom', 40, 'hello'],
[18, 52,'custom', 44,'hello'], [19, 54,'custom', 46,'hello'], [20, 42,'custom', 34, 'hello'],
[21, 55,'custom', 47,'hello'], [22, 56,'custom', 48,'hello'], [23, 57,'custom', 49,'hello']
]);
var options = {
width: 1000,
height: 563,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('ex2'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="ex2"></div>
I am new in Google Graphs and I am attemting to generate this graph in the photo ( expected ) below
but I am getting a little bit different graph. I have three different letters and each letter contains their own values (A1, A2, A3, B1, B2 ... e.g.).
There the code which I am trying:
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('string', 'Type');
data.addColumn('number', 'Value');
data.addRows([
[new Date(2014, 0, 30), 'A', 75],
[new Date(2014, 0, 30), 'A', 100],
[new Date(2014, 0, 30), 'A', 125],
[new Date(2014, 0, 31), 'A', 75],
[new Date(2014, 0, 31), 'A', 100],
[new Date(2014, 0, 31), 'A', 125],
[new Date(2014, 0, 30), 'B', 150],
[new Date(2014, 0, 30), 'B', 175],
[new Date(2014, 0, 30), 'B', 200],
[new Date(2014, 0, 31), 'B', 150],
[new Date(2014, 0, 31), 'B', 175],
[new Date(2014, 0, 31), 'B', 200],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: 'A',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: 'B',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: 'C',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null;
}
}, 2]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(view, {
height: 400,
width: 600,
hAxis: {
format: 'dd.MM.yyyy',
minValue: new Date(2014, 0, 29, 12),
maxValue: new Date(2014, 0, 31, 10)
},
series: {
0: {
// series A options
pointSize: 5,
lineWidth: 0
},
3: {
// this series draws the line
pointSize: 0,
lineWidth: 1,
visibleInLegend: false,
enableInteractivity: false,
color:'blue'
}
}
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
And it showing me this and I don't know how remove a line in 31.01.2014 -> A3 with 30.01.2014->B1 and color of line for blue dots blue color and for red dots red line is it possible? :
But expected one is below :
This is a case where my answer to your previous question is not the best approach to take for this, but there is an easy solution to modify your existing code to make this work. Remove the 2 from the end of the array passed to view.setColumns:
view.setColumns([0, {
type: 'number',
label: 'A',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: 'B',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: 'C',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null;
}
}]);
and adjust your series options:
series: {
0: {
// series A options
pointSize: 5,
lineWidth: 1
},
1: {
// series B options
pointSize: 5,
lineWidth: 1
},
2: {
// series C options
pointSize: 5,
lineWidth: 1
}
}