Graph: Number of Persons v DateTime
2004-12-23 15:25:01,8
2004-12-23 15:26:01,5
2004-12-23 15:27:01,5
2004-12-23 15:28:01,4
2004-12-23 15:29:01,4
2004-12-24 10:30:01,13
2004-12-24 10:31:01,12
2004-12-24 10:32:01,12
2004-12-24 10:33:01,13
2004-12-24 10:34:01,13
2004-12-24 10:35:01,13
As we can see there is no data between 2004-12-23 15:29:01 and 2004-12-24 10:30:01 but still the Google Chart shows me a gap and connects the two datapoints when using LineChart. Also I avoid making the dates string as then I would get no yaxis markings, because of the huge date-time.
I am new to using Google Charts, can this be avoided?
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date-Time');
data.addColumn('number', ‘Available);
data.addRows(dataPoints);
console.log(data);
var options = {
title: ‘Availability',
legend: {position: 'bottom' },
hAxis: {
title: 'Time',
/*
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}*/
},
vAxis: {
title: 'Number of people available’
}
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
if you use string values, rather than date values, no gap will be displayed...
var dataPoints = [
['2004-12-23 15:25:01', 8],
['2004-12-23 15:26:01', 5],
['2004-12-23 15:27:01', 5],
...
also, here, needed to add more room at the bottom of the chart for the labels,
as well as increase the default height...
chartArea: {
bottom: 128
},
height: 400
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(drawBasic);
function drawBasic() {
var dataPoints = [
['2004-12-23 15:25:01', 8],
['2004-12-23 15:26:01', 5],
['2004-12-23 15:27:01', 5],
['2004-12-23 15:28:01', 4],
['2004-12-23 15:29:01', 4],
['2004-12-24 10:30:01', 13],
['2004-12-24 10:31:01', 12],
['2004-12-24 10:32:01', 12],
['2004-12-24 10:33:01', 13],
['2004-12-24 10:34:01', 13],
['2004-12-24 10:35:01', 13]
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date-Time');
data.addColumn('number', 'Available');
data.addRows(dataPoints);
var options = {
title: 'Availability',
legend: {position: 'bottom'},
hAxis: {
title: 'Time',
},
vAxis: {
title: 'Number of people available'
},
chartArea: {
bottom: 128
},
height: 400
};
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>
Related
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 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>
I need to create a Line Chart using Google Charts API or any JS plugin like this:
Google charts has a trendlines option:
https://developers.google.com/chart/interactive/docs/gallery/trendlines
Example from their docs:
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Diameter', 'Age'],
[8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);
var options = {
title: 'Age of sugar maples vs. trunk diameter, in inches',
hAxis: {title: 'Diameter'},
vAxis: {title: 'Age'},
legend: 'none',
trendlines: { 0: {} } // Draw a trendline for data series 0.
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I've used this with their LineChart without any problems.
Folks,
I was trying to create a Column Chart using google chart API and I am having lots of issue in getting Y-AXIS line.
I understand x-axis is string that is why vertical grid line is not coming but Y-axis line must come. I am marking in RED as of now this line is not coming.
I have following code.
function drawChartSecond(resp) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Activity');
data.addColumn('number', 'Hours');
data.addRows([
['Work', 11],
['Eat', 2 ],
['Commute', 2 ],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title : '',
legend: {
position: 'right',
alignment: 'center'
},
tooltip: {
isHtml: true
},
hAxis: {
title: 'Activity',
titleTextStyle: {
color: 'Black',
fontSize : '12',
fontName : 'Arial'
},
baselineColor: '#CCCCCC'
},
chartArea : {
left: '8%',
top: '8%',
height:'70%',
width:'100%'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chartdivsecond'));
chart.draw(data, options);
}
The only way to get that baseline is to use a chart with a continuous axis. You can use a DataView to convert your data to appropriately formatted numbers, and use the hAxis.ticks option to re-label the axis tick marks so it looks correct:
function drawChartSecond(resp) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Activity');
data.addColumn('number', 'Hours');
data.addRows([
['Work', 11],
['Eat', 2 ],
['Commute', 2 ],
['Watch TV', 2],
['Sleep', 7]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
type: 'number',
label: data.getColumnLabel(0),
calc: function (dt, row) {
return {v: row + 1, f: dt.getValue(row, 0)};
}
}, 1]);
var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
ticks.push({v: i + 1, f: data.getValue(i, 0)});
}
var options = {
title : '',
legend: {
position: 'right',
alignment: 'center'
},
tooltip: {
isHtml: true
},
hAxis: {
title: 'Activity',
titleTextStyle: {
color: 'Black',
fontSize : '12',
fontName : 'Arial'
},
baselineColor: '#CCCCCC',
ticks: ticks
},
chartArea : {
left: '8%',
top: '8%',
height:'70%',
width:'100%'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chartdivsecond'));
chart.draw(view, options);
}
see working example: http://jsfiddle.net/asgallant/6mXkv/