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>
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>
line graph
column graph
My graph keeps call Controller to get recent info in Database time by time.
There are two lines so I want to show the name of each lines(columns)
like red=counts of something // brown=counts of something else.
My other bar graph has line info with color, and column name(highligted).
How can I add that information??
My line graph codes,
o.data = new google.visualization.DataTable();
o.data.addColumn('string', 'time');
o.data.addColumn('number', o.name);
o.data.addColumn('number', o.name2);
o.data.addRow(['', 0, 0]);
I'm not sure if I understand you correctly, but according to the docs you have to create options object and coufigure your chart as you like, e.g. add a legend to your bars or lines.
Example from the google chart documentation:
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
};
var view = new google.visualization.DataView(data);
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
Fiddle: https://jsfiddle.net/b0jghv4z/
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>
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 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.