Dual y axes in Google charts - javascript

I am trying to use dual y axes with Google charts.I understand the basics and how it works.
On one y axis, I want BMI values and on other Weight Values.
I am taking out data from SQL database. However, BMI and Weight are itself values in a column called ReadingName.
So, if I use the query,
select * from table where ReadingName = 'BMI' or ReadingName = Weight
I get the result set which is serialized into JSON and then forwarded to render charts which again would be retrieved using column Name only.
Now, to have observation values for BMI on one yaxis and Weight on other, as per the example on GoogleCharts website, I need to have them as columns.
But I have them only as different values of same column called ReadingType.Is there a work around possible ?
This is how it should look like :

Unfortunately, you'll have to massage the data into a format it understands. The DataTable class provides lots of methods for populating but here is an example:
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Start with long data
var rawData = [
[new Date(2014, 8, 1), "Weight", 140],
[new Date(2014, 8, 1), "BMI", 5],
[new Date(2014, 8, 15), "Weight", 130],
[new Date(2014, 8, 15), "BMI", 4],
[new Date(2014, 9, 1), "Weight", 120],
[new Date(2014, 9, 1), "BMI", 3],
[new Date(2014, 9, 15), "Weight", 120],
[new Date(2014, 9, 15), "BMI", 3]
];
// Create a wide table from the long data
var data = new google.visualization.DataTable();
data.addColumn("date", "Date");
data.addColumn("number", "BMI");
data.addColumn("number", "Weight");
var lastDate = null;
var currentRow = null;
for (var i=0; i < rawData.length; i++) {
var date=rawData[i][0];
var col=rawData[i][1];
var value=rawData[i][2];
if (lastDate == null) {
// First pass
currentRow = [date, null, null];
}
else if (lastDate != date) {
data.addRow(currentRow);
currentRow = [date, null, null];
}
if (col=="BMI") currentRow[1] = value;
else if (col=="Weight") currentRow[2] = value;
lastDate = date;
}
if (currentRow != null) data.addRow(currentRow);
var options = {
title: 'Wight & BMI',
vAxes: [{
title: "Weight",
minValue: 0
}, {
title: "BMI",
minValue: 0
}],
series: {
0: { targetAxisIndex:0 },
1: { targetAxisIndex:1 }
},
interpolateNulls: true
}
var chart = new google.visualization.LineChart(document.getElementById("chart"));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart" style="width: 900px; height: 300px;"></div>

Related

Stepped Area Google charts wrong visualization

I'm using Google charts Stepped Area in my project, I have 2 data columns (datetime,state).
The problem is when the change in time is dynamic and not fixed the chart gets abnormal like this example, however when the data points are in fixed time change, the chart is drawn correctly for example in this code the points are one every 100 milliseconds.
Example 1 data
['Date', 'State'],
[new Date(1534078983500), 3],
[new Date(1534078983880), 1],
[new Date(1534080441460), 3],
[new Date(1534080441840), 1],
[new Date(1534080533960), 3],
[new Date(1534080534330), 1]
Example 2 data
['Date', 'State'],
[new Date(1534078983100), 3],
[new Date(1534078983200), 1],
[new Date(1534078983300), 3],
[new Date(1534078983400), 1],
[new Date(1534078983500), 3],
[new Date(1534078983600), 1]
according to the Data Format for the SteppedAreaChart,
the Data Type for the x-axis should be --> 'string'
although it may work with dates, the results may be inconsistent
instead, use the DateFormat class to convert the date to a timestamp string
see following working snippet...
here, a DataView is used to create a calculated column for the timestamp...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Date', 'State'],
[new Date(1534078983500), 3],
[new Date(1534078983880), 1],
[new Date(1534080441460), 3],
[new Date(1534080441840), 1],
[new Date(1534080533960), 3],
[new Date(1534080534330), 1]
]);
var formatTime = new google.visualization.DateFormat({
pattern: 'HH:ss.SSSS a'
});
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
return formatTime.formatValue(dt.getValue(row, 0));
},
label: data.getColumnLabel(0),
type: 'string'
}, 1]);
var options = {
title: 'The decline of \'The 39 Steps\'',
vAxis: {
title: 'Accumulated Rating',
ticks: [{ v: 0, f: '' }, { v: 1, f: 'Close' }, { v: 2, f: 'CLG/OPG' }, { v: 3, f: 'Open' }, { v: 4, f: '' }]
}
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
if you need to use the explorer option,
you can use a number instead of a string
use the formatted value to display the actual dates,
and build custom ticks for the x-axis using the same approach...
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Date', 'State'],
[new Date(1534078983500), 3],
[new Date(1534078983880), 1],
[new Date(1534080441460), 3],
[new Date(1534080441840), 1],
[new Date(1534080533960), 3],
[new Date(1534080534330), 1]
]);
var formatTime = new google.visualization.DateFormat({
pattern: 'HH:ss.SSSS a'
});
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
return {
v: row,
f: formatTime.formatValue(dt.getValue(row, 0))
};
},
label: data.getColumnLabel(0),
type: 'number'
}, 1]);
var xTicks = [];
for (var i = 0; i < view.getNumberOfRows(); i++) {
addTick(i);
}
function addTick(i) {
xTicks.push({
v: view.getValue(i, 0),
f: view.getFormattedValue(i, 0)
});
}
var options = {
explorer: {},
hAxis: {
ticks: xTicks
},
title: 'The decline of \'The 39 Steps\'',
vAxis: {
title: 'Accumulated Rating',
ticks: [{ v: 0, f: '' }, { v: 1, f: 'Close' }, { v: 2, f: 'CLG/OPG' }, { v: 3, f: 'Open' }, { v: 4, f: '' }]
}
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Chart - google chart with filter by time

I want to make a line chart that represents several actions with the accumulated value for days in a space of time of that action.
This graphic will have a filter, which will filter by day / week / month.
In the beginning I set the date column to type string, and if you have only one action works, but if you have more than one and if it starts at the same time, it duplicates those points, which was not supposed to.
So I set the date column to date and it solves the issue with not duplicating the points, the problem is when I apply the filter to the weeks and months, which will be written as "week 24" or month name and the duplicate points return.
Any suggestion.
Exemple -
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<button onclick="filter('DD-M')">day</button>
<button onclick="filter('W')">week</button>
<button onclick="filter('MMM')">month</button>
<script>
let data = [
['2018-06-01', 1, null],
['2018-06-02', 2, null],
['2018-06-03', 3, null],
['2018-06-04', 4, null],
['2018-06-05', 5, null],
['2018-06-06', 6, null],
['2018-06-07', 7, null],
['2018-06-08', 8, null],
['2018-06-09', 9, null],
['2018-06-06', null, 20],
['2018-06-07', null, 30],
['2018-06-08', null, 40],
['2018-06-09', null, 50],
['2018-06-10', null, 60],
['2018-06-11', null, 70],
['2018-06-12', null, 80],
['2018-06-13', null, 90],
['2018-06-14', null, 100]
];
let dataChart = [];
function filter (format) {
dataChart = [];
let lastDate = '';
let value = 0;
[].forEach.call(data, (d,i) => {
let date = moment(d[0], 'YYYY-MM-DD').format(format);
if (i === 0)
lastDate = date;
if (lastDate === date) {
value += (d[1] !== null) ? d[1] : d[2];
} else {
dataChart.push([date, d[1], d[2]]);
lastDate = date;
value = (d[1] !== null) ? d[1] : d[2];
}
if ( i === data.length - 1) dataChart.push([date, d[1], d[2]]);
});
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
}
filter('DD-M');
function drawChart() {
var chart = new google.visualization.DataTable();
chart.addColumn('string', 'date');
chart.addColumn('number', 'action1');
chart.addColumn('number', 'action2');
chart.addRows(dataChart)
let container = document.getElementById('chart_div');
let dChart = new google.visualization.LineChart(container);
dChart.draw(chart);
}
</script>
Problems
"...and if you have only one action works, but if you have more than one and if it starts at the same time, it duplicates those points, which was not supposed to."
Solutions
Array data
The data array had duplicated dates therefore duplicated points are inevitable.
Compare the original values...
let data = [
['2018-06-01', 1, null],
['2018-06-02', 2, null],
['2018-06-03', 3, null],
['2018-06-04', 4, null],
['2018-06-05', 5, null],
['2018-06-06', 6, null],// Duplicated Pair A
['2018-06-07', 7, null],// Duplicated Pair B
['2018-06-08', 8, null],// Duplicated Pair C
['2018-06-09', 9, null],// Duplicated Pair D
['2018-06-06', null, 20],// Duplicated Pair A
['2018-06-07', null, 30],// Duplicated Pair B
['2018-06-08', null, 40],// Duplicated Pair C
['2018-06-09', null, 50],// Duplicated Pair D
['2018-06-10', null, 60],
['2018-06-11', null, 70],
['2018-06-12', null, 80],
['2018-06-13', null, 90],
['2018-06-14', null, 100]
];
...to the corrected values
let data = [
['2018-06-01', 1, null],
['2018-06-02', 2, null],
['2018-06-03', 3, null],
['2018-06-04', 4, null],
['2018-06-05', 5, null],
['2018-06-06', 6, 20],
['2018-06-07', 7, 30],
['2018-06-08', 8, 40],
['2018-06-09', 9, 50],
['2018-06-10', null, 60],
['2018-06-11', null, 70],
['2018-06-12', null, 80],
['2018-06-13', null, 90],
['2018-06-14', null, 100]
];
One Off .length
The following condition:
if (i === data.length - 1) dataChart.push([date, d[1], d[2]]);
is creating a duplicate day at the end of haxis (x or horizontal axis) in which the last two columns are both: 14-6.
To correct the column duplication, remove the -1 from .length:
if (i === data.length) dataChart.push([date, d[1], d[2]]);
One off date
The following condition:
if (lastDate === date) {
causes the haxis to skip the first column so it starts at 02-6 instead of 01-6:
To add the missing first column, add -1 to the date value:
if (lastDate === date-1) {
Demo
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<button onclick="filter('DD-M')">day</button>
<button onclick="filter('W')">week</button>
<button onclick="filter('MMM')">month</button>
<script>
let data = [
['2018-06-01', 1, null],
['2018-06-02', 2, null],
['2018-06-03', 3, null],
['2018-06-04', 4, null],
['2018-06-05', 5, null],
['2018-06-06', 6, 20],
['2018-06-07', 7, 30],
['2018-06-08', 8, 40],
['2018-06-09', 9, 50],
['2018-06-10', null, 60],
['2018-06-11', null, 70],
['2018-06-12', null, 80],
['2018-06-13', null, 90],
['2018-06-14', null, 100]
];
let dataChart = [];
function filter(format) {
dataChart = [];
let lastDate = '';
let value = 0;
[].forEach.call(data, (d, i) => {
let date = moment(d[0], 'YYYY-MM-DD').format(format);
if (i === 0)
lastDate = date;
if (lastDate === date - 1) {
value += (d[1] !== null) ? d[1] : d[2];
} else {
dataChart.push([date, d[1], d[2]]);
lastDate = date;
value = (d[1] !== null) ? d[1] : d[2];
}
if (i === data.length) dataChart.push([date, d[1], d[2]]);
});
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
}
filter('DD-M');
function drawChart() {
var chart = new google.visualization.DataTable();
chart.addColumn('string', 'Date');
chart.addColumn('number', 'Action1');
chart.addColumn('number', 'Action2');
chart.addRows(dataChart)
let container = document.getElementById('chart_div');
let dChart = new google.visualization.LineChart(container);
dChart.draw(chart);
}
</script>

assign $scope.chart.options based on conditional check - javascript

I am working on google chart API.I am working on timeline chart. I want to assign the colors of the bar inside the timeline chart based on the conditional check.
Below is the condition:
var firstWord = value.detail.trim().split(' ')[0];
if(firstWord === 'monthly'){ $scope.chart.options.colors[0]='yellow';}
if(firstWord === 'daily') { $scope.chart.options.colors[0]='green';}
How to assign the colors in the $scope.chart.options dynamically at runtime based on conditional check.
complete js code:
app.controller('MyController', ['$rootScope', '$scope',function ($scope, MyService) {
$scope.chart = {};
$scope.chart.type = "Timeline";
$scope.chart.cssStyle = "height:80%; width:100%;";
$scope.chart.options = {
timeline: {
barLabelStyle: { fontSize: 14 ,bold:true}
},
// colors:['#7EAE5A','#0E77B4'],
};
$scope.chart.data = {
"cols": [
{id: "status", label: "Status", type: "string"},
{id: "detail", label: "Detail", type: "string"},
{id:"tooltip", role:"tooltip", type:"string"},
{id: "startDate", label: "startDate", type: "date"},
{id: "endDate", label: "endDate", type: "date"}
]
};
//getting the response data
MyService.getResponseData().then(
function (response) {
$scope.myResponse = response;
$scope.chart.data.rows = {};
angular.forEach($scope.myResponse, function (value, key) {
var firstWord = value.detail.trim().split(' ')[0];
if(firstWord === 'monthly'){ $scope.chart.options.colors[0]='yellow';}
if(firstWord === 'daily') { $scope.chart.options.colors[0]='green';}
var cData = {
c: [{v: i}, {v: value.detail },
{v: "tooltip"},{v: value.startDate}, {v: value.endDate}]
};
weekRows.push(cData);i++;
});
$scope.chart.data.rows = weekRows;
}
},
you can use a DataView to dynamically change the color
using a calculated column with the 'style' role
see following working snippet...
google.charts.load('current', {
packages:['timeline']
}).then(function () {
var chart;
var dataTable;
var options;
dataTable = google.visualization.arrayToDataTable([
['100', 'daily_HourlyMay', new Date(2018, 5, 1), new Date(2018, 5, 1) ],
['101', 'yearly_hourlyMarch113', new Date(2018, 3, 27), new Date(2018, 3, 27) ],
['102', 'monthly_hourlyFeb', new Date(2018, 2, 23), new Date(2018, 2, 30) ],
['103', 'daily_HourlyApril', new Date(2018, 4, 11), new Date(2018, 4, 18) ],
['104', 'daily_HourlyMarch224', new Date(2018, 3, 16), new Date(2018, 3, 27) ],
['105', 'monthly_HourlySept', new Date(2018, 6, 5), new Date(2018, 6, 18) ],
['106', 'yearly_sometext shown here', new Date(2018, 1, 12), new Date(2018, 1, 30) ],
['107', 'monthly_HourlySept', new Date(2018, 8, 5), new Date(2018, 8, 18) ],
['108', 'yearly_sometext shown here', new Date(2018, 9, 12), new Date(2018, 9, 30) ],
['109', 'daily_text1 data', new Date(2018, 7, 5), new Date(2018, 7, 18)
]], true);
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns([0, 1, {
calc: function (dt, row) {
var color;
var firstWord = dt.getValue(row, 1).trim().split('_')[0];
switch (firstWord) {
case 'monthly':
color = 'yellow';
break;
case 'daily':
color = 'green';
break;
case 'yearly':
color = 'blue';
break;
default:
color = 'black';
}
return color;
},
role: 'style',
type: 'string',
}, 2, 3]);
options = {timeline: {showRowLabels: false}};
chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(dataView, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
UPDATE
in angular, set the view in app.js...
chart1.view = {columns: [0, 1, {
calc: function (dt, row) {
var color;
var firstWord = dt.getValue(row, 1).trim().split('_')[0];
switch (firstWord) {
case 'monthly':
color = 'yellow';
break;
case 'daily':
color = 'green';
break;
case 'yearly':
color = 'blue';
break;
default:
color = 'black';
}
return color;
},
role: 'style',
type: 'string',
}, 2, 3]};

Google visualization set column dock

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>

Google Charts - Scale in Y-Axis

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>

Categories