Reputation: 339
I am trying to sum the minutes of two bars on a bar chart and it breaks. jsfiddle
I'm basing myself on the example from the Stacked column charts, but I can't get it to work with "H: i: s"
this is my code
var GoogleColumnBasic = function() {
var _googleColumnBasic = function() {
google.charts.load('visualization', '1.0', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dtos= [];
var data = google.visualization.arrayToDataTable([
['','preparation time ', 'time when he retired',
{ role: 'annotation' } ],
['box 1', '00:43:22', '00:03:22', ''],
['box 2', '00:13:22', '00:73:22' , ''],
['box 3', '00:23:22', '00:53:22', '']
]);
var options = {
height: 350,
isStacked: true
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
//chart.draw(data, options);
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
return {
init: function() {
_googleColumnBasic();
}
}
}();
GoogleColumnBasic.init();
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
thanks.
Upvotes: 1
Views: 142
Reputation: 61285
you can use a 'timeofday'
column, see working with timeofday.
The DataTable timeofday column data type takes an array of either 3 or 4 numbers, representing hours, minutes, seconds, and optionally milliseconds, respectively. Using timeofday is different than using date and datetime in that the values are not specific to a date, whereas date and datetime always specify a date. For example, the time 8:30am would be: [8, 30, 0, 0], with the 4th value being optional ([8, 30, 0] would output the same timeofday value).
the data table used to draw the chart would be similar to the following...
var data = google.visualization.arrayToDataTable([
['', 'time of ', 'retirar', {role: 'annotation', type: 'string'}],
['Caja 1', [0, 43, 22], [0, 3, 22], ''],
['Caja 2', [0, 13, 22], [0, 73, 22], ''],
['caja 3', [0, 23, 22], [0, 53, 22], '']
]);
see following working snippet...
var GoogleColumnBasic = function() {
var _googleColumnBasic = function() {
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'time of ', 'retirar', {role: 'annotation', type: 'string'}],
['Caja 1', [0, 43, 22], [0, 3, 22], ''],
['Caja 2', [0, 13, 22], [0, 73, 22], ''],
['caja 3', [0, 23, 22], [0, 53, 22], '']
]);
var options = {
height: 350,
isStacked: true,
colors: ['#4285f4', '#a1c2fa'],
theme: 'material',
chartArea: {
left: 64,
top: 48,
right: 32,
bottom: 64,
height: '100%',
width: '100%'
},
height: '100%',
legend: {
position: 'top'
},
width: '100%'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, (options));
}
}
return {
init: _googleColumnBasic
}
}();
GoogleColumnBasic.init();
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart_div {
height: 100%;
min-height: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
NOTES
the jsapi
loader has been deprecated and should no longer be used.
instead, use the new loader.js
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load
statement, see above snippet.
do not recommend using a material chart. (google.charts.Bar
)
they do not work well with 'timeofday'
columns,
they do not support column roles such as 'annotation'
,
AND many of the chart options simply do not work, see Tracking Issue for Material Chart Feature Parity
instead, we can use option --> theme: 'material'
on a classic chart (google.visualization.ColumnChart
)
Upvotes: 1