I have a Google Chart that displays data as decimals.
I am displaying decimals as hour.minutes. So 3 hours and 30 minutes would be 3.30
Even though in my source I am inputing a decimal as 3.30 when mousing over on the chart it will display it as 3.3 as well as 5.10 showing as 5.1
My source to confirm that the leading 0 is inputted on dates 9/01, 9/02
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// ticket per day //
var data = google.visualization.arrayToDataTable([
['Time Tracked Hours', 'Non-Billable Hours', 'Billable Hours'],
['8/29', 0, 0],
['8/30', 0, 0],
['8/31', 0, 0],
['9/01', 3.30, 0],
['9/02', 5.10, 0],
['9/03', 0.05, 0],
['9/04', 0, 0],
]);
var options = {
title: '',
subtitle: 'by ticket status',
legend: {position: 'bottom'}
};
var chart = new google.visualization.LineChart(document.getElementById('columnchart_ticketperday'));
chart.draw(data, options);
When I mouse over I see this
Is there any options in the code that I can use to change this so it shows the leading 0? or is there something I could do with Javascript or jquery?
by default, the tooltip displays the formatted value
format the data table column, before drawing the chart
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time Tracked Hours', 'Non-Billable Hours', 'Billable Hours'],
['8/29', 0, 0],
['8/30', 0, 0],
['8/31', 0, 0],
['9/01', 3.30, 0],
['9/02', 5.10, 0],
['9/03', 0.05, 0],
['9/04', 0, 0],
]);
var formatNumber = new google.visualization.NumberFormat({
pattern: '0.00'
});
formatNumber.format(data, 1);
formatNumber.format(data, 2);
var options = {
title: '',
subtitle: 'by ticket status',
legend: {position: 'bottom'}
};
var chart = new google.visualization.LineChart(document.getElementById('columnchart_ticketperday'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_ticketperday"></div>
Related
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.
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)
I have a "vertical" material designed bar chart that receives values like this:
[1, 10],
[580, 12],
[10000, 1]
So it renders the xAxis like this:
Is there any way for me to remove the empty values of the hAxis and just leave the numbers that have values (i.e. 5000, 10000 and the smaller ones).
try using string values for the x-axis, instead of numbers...
['1', 10],
['580', 12],
['10000', 1]
see following working snippet...
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['1', 10],
['580', 12],
['10000', 1]
], true);
var options = {
bars: 'vertical',
chart: {
title: 'Number of payments by amount',
},
hAxis: {
title: 'Amount'
}
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
I have a chart data table with series values as numbers (these are MIDI note numbers - e.g. 60 is middle C, 61 is Db).
But for the user, the chart y-axis ticks should be the note names.
How can I do that please?
using object notation, you can provide the value (v:) and the formatted value (f:) for each tick
{v: 60, f: 'C4 (middle C)'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[1, 60],
[2, 61]
], true);
var options = {
vAxis: {
ticks: [
{v: 60, f: 'C4 (middle C)'},
{v: 61, f: 'C#4/Db4'},
]
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am struggling with google charts. I want bars to be displayed from bottom, rather than from top. Currently they are "hanging" like on the image below:
I don't see proper setting in docs, if it is there, please correct me. This is the code responsible for handling the display:
function parseInterval(value) {
var result = new Date(1,1,1);
result.setMilliseconds(value*1000);
return result;
}
(function($) {
$(document).ready(function(){
var loading = $('#loading');
$.getJSON("/api/v1/users", function(result) {
var dropdown = $("#user_id");
$.each(result, function(item) {
dropdown.append($("<option />").val(this.user_id).text(this.name));
});
dropdown.show();
loading.hide();
});
$('#user_id').change(function(){
var selected_user = $("#user_id").val();
var chart_div = $('#chart_div');
if(selected_user) {
loading.show();
chart_div.hide();
$.getJSON("/api/v1/mean_time_month/"+selected_user, function(result) {
$.each(result, function(index, value) {
value[1] = parseInterval(value[1]);
});
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('datetime', 'Mean time (h:m:s)');
data.addRows(result);
var options = {
hAxis: {
title: 'Month'
},
vAxis: {
title: 'Mean presence time',
minValue: new Date(1, 1, 1, 0, 0)
},
};
var formatter = new google.visualization.DateFormat({pattern: 'HH:mm:ss'});
formatter.format(data, 1);
chart_div.show();
loading.hide();
var chart = new google.visualization.ColumnChart(chart_div[0]);
chart.draw(data, options);
});
}
});
});
})(jQuery);
try using option vAxis.direction...
The direction in which the values along the vertical axis grow. Specify -1 to reverse the order of the values.
vAxis: {
direction: -1
}
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('datetime', 'Mean time (h:m:s)');
data.addRows([
['Jan', new Date(1, 1, 1, 8, 16, 13)],
['Feb', new Date(1, 1, 1, 9, 24, 45)],
['Mar', new Date(1, 1, 1, 7, 36, 56)],
['Apr', new Date(1, 1, 1, 4, 20, 42)],
['May', new Date(1, 1, 1, 6, 51, 16)]
]);
var options = {
hAxis: {
title: 'Month'
},
vAxis: {
direction: -1,
title: 'Mean presence time',
minValue: new Date(1, 1, 1, 0, 0)
}
};
var formatter = new google.visualization.DateFormat({pattern: 'HH:mm:ss'});
formatter.format(data, 1);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
but i think the real problem lies within the data
notice the y-axis values the chart displays in the example above,
the order doesn't seem right, as well as the range (10am - 12am)
it appears you're only interested in the time values
as such, recommend using 'timeofday' vs. 'datetime'
(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).
see following working snippet for example using 'timeofday'...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('timeofday', 'Mean time (h:m:s)');
data.addRows([
['Jan', [8, 16, 13]],
['Feb', [9, 24, 45]],
['Mar', [7, 36, 56]],
['Apr', [4, 20, 42]],
['May', [6, 51, 16]]
]);
var options = {
hAxis: {
title: 'Month'
},
vAxis: {
title: 'Mean presence time',
minValue: [0, 0, 0]
}
};
var formatter = new google.visualization.DateFormat({pattern: 'HH:mm:ss'});
formatter.format(data, 1);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I use Material column charts in my Web App.
and I have following out
and codes are below,
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Structure', 'Estimated', 'Actual'],
['hours', 6, 8],
['hours2', 20, 18],
]);
var options = {
chart: {
title: 'Structures by Hours',
subtitle: 'Estimated vs Actual',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_hours'));
chart.draw(data, options);
What I want to do two things / need your hand, (on red circled area the image.)
to name the Y-Axis as Hours
and make the same axis scale 2 hours by 2 hours so that the Y-Axis / Hours Axis become 2, 4, 6, 8, 10 so on.
Thanks in advance,
Need to set configuration options for the vAxis.
vAxis: {
title: 'Hours',
ticks: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
}
Use title for the axis label.
Supply an array to ticks for the axis tick marks.
However, it doesn't appear ticks works for Material charts.
Note the options have to be converted as well...
google.charts.Bar.convertOptions
This example shows both a Core chart and a Material chart...
google.load('visualization', '1', {
packages: ['corechart', 'bar'],
callback: drawBarChart
});
function drawBarChart() {
var data = google.visualization.arrayToDataTable([
['Structure', 'Estimated', 'Actual'],
['hours', 6, 8],
['hours2', 20, 18],
]);
var options = {
chart: {
title: 'Structures by Hours',
subtitle: 'Estimated vs Actual',
},
vAxis: {
title: 'Hours',
ticks: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_hours'));
chart.draw(data, options);
var chart2 = new google.charts.Bar(document.getElementById('columnchart_hours2'));
chart2.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.google.com/jsapi"></script>
<div id="columnchart_hours"></div>
<div id="columnchart_hours2"></div>