Related
I have this Google chart and I cannot get the lower part (where date and time is) to show hours from 00 to 23, it always shows it with AM/PM.
I mean the area that is always visible, the other value that apepars on tooltip was formated OK, but not that lower part.
What am I doing wrong ?
I tried by that dateformatter code (it only seems to affect the tooltip date value).
And by this (not doing anything):
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {count: 15}
},
The jsfiddle
<script>
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime');
data.addColumn('number', "Temp");
data.addColumn('number', "Humidity");
data.addRows([
[new Date(2020, 11, 04, 15, 00), 25.50, 62.76],
[new Date(2020, 11, 04, 15, 10), 25.58, 62.63],
[new Date(2020, 11, 04, 15, 20), 25.60, 62.47],
[new Date(2020, 11, 04, 15, 30), 25.60, 62.38],
[new Date(2020, 11, 04, 15, 40), 25.62, 62.16],
[new Date(2020, 11, 04, 15, 50), 25.60, 62.00],
[new Date(2020, 11, 04, 16, 00), 25.60, 61.79],
[new Date(2020, 11, 04, 16, 10), 25.77, 61.72],
[new Date(2020, 11, 04, 16, 20), 25.97, 60.93],
[new Date(2020, 11, 04, 16, 30), 26.07, 60.38],
]);
// give date a certain format
var dateFormatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
dateFormatter.format(data, 0);
var materialOptions = {
// trying to format date/time on lower line, not working :/
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {count: 15}
},
legend: {position: 'none'},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temp'},
1: {axis: 'Humidity'},
},
axes: {
y: {
Temp: {label: 'Temps (Celsius)', range: {max: 15, min: 40 }},
Humidity: {label: 'Humidity (%)', /*range: {max: 30, min: 90 }*/},
},
},
colors: ['#B00000', '#1bdec4']
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, materialOptions);
}
drawMaterialChart();
}
</script>
when drawing a material chart,
need to convert the options using static method --> google.charts.Line.convertOptions
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
this will ensure the supported options are included properly,
see following working snippet...
google.charts.load('current', {
'packages': ['line', 'corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime');
data.addColumn('number', "Temp");
data.addColumn('number', "Humidity");
data.addRows([
[new Date(2020, 11, 04, 15, 00), 25.50, 62.76],
[new Date(2020, 11, 04, 15, 10), 25.58, 62.63],
[new Date(2020, 11, 04, 15, 20), 25.60, 62.47],
]);
// give date a certain format
var dateFormatter = new google.visualization.DateFormat({
pattern: 'dd/MM/yyyy HH:mm'
});
dateFormatter.format(data, 0);
var materialOptions = {
// trying to format date/time on lower line, not working :/
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {
count: 15
}
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Temp'
},
1: {
axis: 'Humidity'
},
},
axes: {
y: {
Temp: {
label: 'Temps (Celsius)',
range: {
max: 15,
min: 40
}
},
Humidity: {
label: 'Humidity (%)',
range: {max: 30, min: 90 }
},
},
},
colors: ['#B00000', '#1bdec4']
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
note: there are several options that are not supported by material charts,
see Tracking Issue for Material Chart Feature Parity
I'm trying to group the colors of the bar in google timeline according to the ID. I can't figure out why it mostly works. Here's an image of what it looks like.
The image is suppose to label tests in green like this:
Here's my code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var container = document.getElementById('bed-trace-svg-insert');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
var i, rows=[],curr_row, start_utcDate, start_local_date,
end_utcDate, end_local_date;
dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'string', id: 'Category' });
dataTable.addColumn({ type: 'string', id: 'ID' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
// dataTable.addRows(rows);
dataTable.addRows([
[ 'M2016019706', 'HO', 'NYH01 816', new Date(2016, 5, 1), new Date(2016, 6, 12) ],
[ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 6, 13), new Date(2016, 7, 29) ],
[ 'M2016019706', 'HO', 'NYH01 834', new Date(2016, 7, 30), new Date(2016, 8, 7) ],
[ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 8, 8), new Date(2016, 8, 12) ],
[ 'M2016019706', 'test', '', new Date(2016, 8, 1), new Date(2016, 8, 2) ]
]);
var color_array = [];
var colorMap =
{
// should contain a map of category -> color for every category
HO: '#e63b6f', // pink
test:'#32a852', // green
LTCO: '#592df7', // purple
OPT: '#2dbef7', // blue
}
for (i = 0; i < dataTable.getNumberOfRows(); i++)
{
color_array.push(colorMap[dataTable.getValue(i, 1)]);
}
var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
var options =
{
timeline:
{
groupByRowLabel: true,
rowLabelStyle:
{
fontName: 'Roboto Condensed',
fontSize: 14,
color: '#333333'
},
barLabelStyle:
{
fontName: 'Roboto Condensed',
fontSize: 14
}
},
avoidOverlappingGridLines: true,
height: chartHeight,
width: '100%',
colors: color_array
};
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 2, 3, 4]);
chart.draw(view, options);
}
</script>
<div id='bed-trace-svg-insert'></div>
The color_array array is correct:
["#e63b6f", "#592df7", "#e63b6f", "#592df7", "#32a852"]
I'm unsure why my colors change when the chart is drawn. Any ideas?
It might be related to the order because if I switch the order to:
dataTable.addRows([
[ 'M2016019706', 'test', 'test', new Date(2016, 8, 1), new Date(2016, 8, 2) ],
[ 'M2016019706', 'HO', 'NYH01 816', new Date(2016, 5, 1), new Date(2016, 6, 12) ],
[ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 6, 13), new Date(2016, 7, 29) ],
[ 'M2016019706', 'HO', 'NYH01 834', new Date(2016, 7, 30), new Date(2016, 8, 7) ],
[ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 8, 8), new Date(2016, 8, 12) ],
[ 'M2016019706', 'HO', 'NYH01 834', new Date(2016, 8, 13), new Date(2016, 8, 28) ]
]);
I get this:
This fiddle answered by question:enter link description here
You need to use:
dataTable.addColumn({ type: 'string', role: 'style' });
Here is the chart https://jsfiddle.net/damiantt/t2skaegg/2/
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input id="Draw" type="button" value="Draw" onclick="drawChart();" />
<div id="chart_div_container" style="overflow-x: auto;min-height:0%;">
<div id="chart_div" style="overflow: visible;min-height:0%;"></div>
</div>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['timeline', 'table']
});
var initWidth = $('#chart_div').innerWidth();
var colorMap;
function drawChart() {
$('#chart_div').off();
$('#chart_div').empty();
var data = google.visualization.arrayToDataTable([
['Maszyna', 'Kolor', {
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
}, 'Start Time', 'End Time'],
['one', 'pi1', 'brr',
new Date(2014, 10, 15, 12, 30, 0),
new Date(2014, 10, 15, 12, 30, 20)
],
['one', 'pu3', 'brr',
new Date(2014, 10, 15, 12, 30, 20),
new Date(2014, 10, 15, 12, 30, 45)
],
['one', 'pu3', 'brr',
new Date(2014, 10, 15, 12, 30, 45),
new Date(2014, 10, 15, 12, 30, 55)
],
['two', 'g2', 'brr1',
new Date(2014, 10, 15, 12, 30, 35),
new Date(2014, 10, 15, 12, 30, 55)
],
['two', 'pi1', 'brr2',
new Date(2014, 10, 15, 12, 30, 55),
new Date(2014, 10, 15, 14, 31, 55)
],
['three', 'pu3', 'brr',
new Date(2014, 10, 15, 12, 29, 30),
new Date(2014, 10, 15, 14, 30, 0)
],
['three', 'pi1', 'brr',
new Date(2014, 10, 15, 14, 30, 0),
new Date(2014, 10, 15, 14, 35, 0)
],
['three', 'g2', 'Zbrr',
new Date(2014, 10, 15, 14, 35, 0),
new Date(2014, 10, 15, 15, 25, 10)
],
['three', 'pu3', 'KR1',
new Date(2014, 10, 15, 15, 25, 10),
new Date(2014, 10, 15, 15, 26, 00)
],
['three', 'g2', 'KR2',
new Date(2014, 10, 15, 15, 26, 00),
new Date(2014, 10, 15, 15, 26, 45)
],
['three', 'pi1', 'KR3',
new Date(2014, 10, 15, 15, 26, 45),
new Date(2014, 10, 15, 15, 27, 15)
],
['three', 'pu3', 'brr',
new Date(2014, 10, 15, 15, 27, 15),
new Date(2014, 10, 15, 20, 30, 1)
],
['three', 'pi1', 'brr',
new Date(2014, 10, 15, 20, 30, 1),
new Date(2014, 10, 16, 10, 30, 10)
],
['three', 'pu3', 'brr',
new Date(2014, 10, 16, 10, 30, 10),
new Date(2014, 10, 16, 18, 30, 10)
],
]);
var colors = [];
colorMap = {
// should contain a map of category -> color for every category
pi1: '#e63b6f',
g2: '#19c362',
pu3: '#592df7',
c4: '#000000',
'000000': '#000000'
}
for (var i = 0; i < data.getNumberOfRows(); i++) {
colors.push(colorMap[data.getValue(i, 1)]);
}
var options = {
enableInteractivity: false,
height: 210,
width: initWidth,
colors: colors,
avoidOverlappingGridLines: false,
timeline: {
showBarLabels: false
},
hAxis: {
format: 'dd/MM\nHH:mm'
},
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
afterDraw(data, colors);
$(document).ready(function() {
var zoom = 1000;
var leftSpace = $('rect:first-child+path').position().left - $('#chart_div svg').position().left;
var svgOffset = $('#chart_div svg').offset().left;
var $chartDivCont = $('#chart_div_container');
var x, left, down;
$('#chart_div').on({
'mousemove': function(evt) {
if (down) {
var newX = evt.pageX;
$chartDivCont.scrollLeft(left - newX + x);
}
},
'mousedown': function(evt) {
$('html').css('cursor', 'col-resize');
evt.preventDefault();
down = true;
x = evt.pageX;
left = $chartDivCont.scrollLeft();
},
'mouseup': function() {
down = false;
$('html').css('cursor', 'auto');
},
'mousewheel DOMMouseScroll': function(evt) {
evt.preventDefault();
if (evt.originalEvent.wheelDelta > 0 || evt.originalEvent.detail < 0) {
if (options.width < 31000) {
options.width += zoom;
var prevScrollLeft = $chartDivCont.scrollLeft();
var prop = ($chartDivCont.scrollLeft() + evt.originalEvent.clientX - leftSpace - svgOffset) / ($('#chart_div svg').width() - leftSpace);
chart.draw(data, options);
afterDraw(data, colors);
$chartDivCont.scrollLeft(prevScrollLeft + (prop * 1000));
}
} else {
if (options.width >= initWidth + zoom) {
options.width -= zoom;
var prevScrollLeft = $chartDivCont.scrollLeft();
var prop = ($chartDivCont.scrollLeft() + evt.originalEvent.clientX - leftSpace - svgOffset) / ($('#chart_div svg').width() - leftSpace);
chart.draw(data, options);
afterDraw(data, colors);
$chartDivCont.scrollLeft(prevScrollLeft - (prop * 1000));
}
}
}
});
});
}
function afterDraw(data, colors) {
$rects = $('#chart_div svg > g:nth-child(5) > rect');
for (var i = 0; i < $rects.length; i++) {
$('#chart_div svg > g:nth-child(5) > rect:nth-child(' + (i + 1) + ')').css({
"fill": colors[i]
});
}
}
When i run it on Chrome, memory usage is ~75k. After Draw and max zoom in (zoom it by mouse scroll) memory meter shows 140k, then max zoom out - 180k memory usage, zoom in - 225k, zoom out - 265k.
Is any way to free memory after every draw()? I tried to delete HTML elements, to null variables, but nothing helps me
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