Highcharts - Data won't get loaded into chart on Android WebView - javascript

The configuration has been pre-tested on Fiddler and it's all working, but somehow it stopped working when i implemented it in Android's webview.
In my web interface class, I have a method which returns the data, and so I called the method in the HTML file in the script section as follow
var glucose = Android.getGlucoseData();
The debug console shows the following output of the glucose var (please don't mind the fake data)
[
[Date.UTC(2016, 4, 02, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 03, 00,
00 ,00), 0.0],[Date.UTC(2016, 4, 04, 00, 00 ,00), 0.0],[Date.UTC(2016,
4, 05, 19, 16, 00), 8.65999984741211],[Date.UTC(2016, 4, 06, 16, 55,
00), 9.65999984741211],[Date.UTC(2016, 4, 06, 17, 19, 00),
3.6600000858306885],[Date.UTC(2016, 4, 06, 17, 30, 00), 9.65999984741211],[Date.UTC(2016, 4, 07, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 08, 00, 00 ,00), 0.0]
]
And when I passed it into the chart
series: [{
name: 'Glucose',
data: glucose,
marker: {
enabled: true
},
tooltip: {
valueSuffix: ' mmol/L'
}
}...
It does not render the data at all. HOWEVER if i do the following, which is essentially the same as the above, it WORKS.
var glucose = [
[Date.UTC(2016, 4, 02, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 03, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 04, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 05, 19, 16, 00), 8.65999984741211],[Date.UTC(2016, 4, 06, 16, 55, 00), 9.65999984741211],[Date.UTC(2016, 4, 06, 17, 19, 00), 3.6600000858306885],[Date.UTC(2016, 4, 06, 17, 30, 00), 9.65999984741211],[Date.UTC(2016, 4, 07, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 08, 00, 00 ,00), 0.0]
]
From the above, you can realise i'm just literally hardcoding the data produced by Android.getGlucoseData(); into the variable.
May I know what did I do wrong?


The issue can be caused by using Date.UTC() in JSON, which is not evaluated when you load data. In other words, you cannot use functiosn in JSON. At the beginning, try to hardcode the timestamps (onyl for testing) and check if chart is printed or not.

Related

Not showing 2.5 K, show instead 2500 in the line chart [duplicate]

I would like to format the Y Axis of my google Dual Y Axis Line Chart.
Here the code I'm using:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
(...snip data...)
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Pressure'},
Daylight: {label: 'Temps (Celsius)'}
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
var classicChart = new google.visualization.LineChart(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
drawMaterialChart();
}
</script>
</head>
<body>
<br><br>
<div id="chart_div"></div>
</body>
</html>
I would like that the Y Axis is able to display the data not rounded (now it shows only 1K value and not with decimal) on the Y axis (for bot Y axies) as well on the tooltip message.
The tooltip message shows on the pressure values 1K always and on the temperature values, the values without decimal...
Could someone help me?
Thanks!
Simon
PS: The data is created dynamically from a php script, but thats not important now :)

use NumberFormat to format the data
this will set the format of the tooltip...
// create formatter
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.0'});
// format column 1 - Pressure
formatNumber.format(data, 1);
// format column 2 - Temperature
formatNumber.format(data, 2);
to format both y-axis', add this to materialOptions...
vAxis: {
format: '#,##0.0'
}
also recommend using google.charts.Line.convertOptions with Material charts
see following working snippet...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var formatPattern = '#,##0.0';
var formatNumber = new google.visualization.NumberFormat({pattern: formatPattern});
formatNumber.format(data, 1);
formatNumber.format(data, 2);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
y: {
Temps: {
label: 'Pressure'
},
Daylight: {
label: 'Temps (Celsius)'
}
}
},
vAxis: {
format: formatPattern
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How do I filter an array of arrays using an array?

How do I filter an array of arrays (myNumbers) against an array (result) to get only the values that appear in result per each array in myNumbers?
Specifically, given:
var result = [02, 03, 04, 06, 07, 11, 12, 13];
var myNumbers = [
[01, 03, 04, 05, 09, 10, 12, 14],
[01, 03, 04, 05, 06, 08, 10, 12],
[01, 02, 04, 05, 06, 08, 10, 12],
[01, 03, 04, 05, 06, 09, 12, 13],
[01, 02, 03, 05, 06, 08, 10, 11]
];
Output should be:
[
[03, 04, 12],
[03, 04, 06, 12],
[02, 04, 06, 12],
[03, 04, 06, 12, 13],
[02, 03, 06, 11],
]
I'm only able to filter one array at a time:
// This only filters it for myNumbers[0]
var confereResult = result.filter(function (number) {
if (myNumbers[0].indexOf(number) == -1)
return number;
console.log(number);
});
How do I go through the whole list instead?

You could map the result of the filtering.
var filter = [02, 03, 04, 06, 07, 11, 12, 13],
array = [[01, 03, 04, 05, 09, 10, 12, 14], [01, 03, 04, 05, 06, 08, 10, 12], [01, 02, 04, 05, 06, 08, 10, 12], [01, 03, 04, 05, 06, 09, 12, 13], [01, 02, 03, 05, 06, 08, 10, 11]],
result = array.map(a => filter.filter(f => a.includes(f)));
console.log(result.map(a => a.join(' ')));
.as-console-wrapper { max-height: 100% !important; top: 0; }

Iterate throught the myNumbers array and apply a filter to each row.
var result = [02, 03, 04, 06, 07, 11, 12, 13];
var myNumbers = [
[01, 03, 04, 05, 09, 10, 12, 14],
[01, 03, 04, 05, 06, 08, 10, 12],
[01, 02, 04, 05, 06, 08, 10, 12],
[01, 03, 04, 05, 06, 09, 12, 13],
[01, 02, 03, 05, 06, 08, 10, 11]
];
myNumbers.forEach((arr, i) => {
myNumbers[i] = arr.filter((val) => {
return result.indexOf(val) != -1;
});
});
console.log(myNumbers);

You can loop on myNumbers and push result into an array, like
var result = [02, 03, 04, 06, 07, 11, 12, 13];
var myNumbers = [
[01, 03, 04, 05, 09, 10, 12, 14],
[01, 03, 04, 05, 06, 08, 10, 12],
[01, 02, 04, 05, 06, 08, 10, 12],
[01, 03, 04, 05, 06, 09, 12, 13],
[01, 02, 03, 05, 06, 08, 10, 11]
];
var confereResult = []
myNumbers.forEach(function (val) {
confereResult.push(result.filter(function (number) {
if (val.indexOf(number) == -1)
return number;
}));
})
console.log(confereResult)

How to correctly use datetime data on the continuous axis of a Google Chart?

So as seen in the code snippet below, I'm just trying to create a chart/control combination dashboard via Google Charts and I'm having some difficulties with datetime fields, despite following the reference material on that.
My areas of confusion are as follows:
1. Why do the dates shown on the chart appear to be off by one month? I've entered dates for August & September, yet September & October are showing up on the chart.
2. Why does the chart displayed for the ChartRangeFilter appear to jump back to older dates (around the October 2 mark)?
google.charts.load('current', {
packages: ['corechart', 'controls']
});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
[{
"type": "datetime",
"label": "date"
}, {
"type": "number",
"label": "presence"
}],
["Date(2017, 08, 29, 12, 17, 25)", 1],
["Date(2017, 08, 29, 15, 06, 39)", 0],
["Date(2017, 08, 29, 17, 28, 27)", 1],
["Date(2017, 08, 30, 09, 14, 33)", 0],
["Date(2017, 08, 30, 13, 17, 28)", 1],
["Date(2017, 08, 30, 14, 03, 52)", 0],
["Date(2017, 08, 30, 17, 31, 12)", 1],
["Date(2017, 08, 30, 22, 14, 45)", 0],
["Date(2017, 08, 30, 22, 15, 48)", 1],
["Date(2017, 08, 31, 08, 41, 30)", 0],
["Date(2017, 08, 31, 13, 22, 06)", 1],
["Date(2017, 08, 31, 13, 33, 33)", 0],
["Date(2017, 08, 31, 15, 23, 41)", 1],
["Date(2017, 08, 31, 15, 48, 11)", 0],
["Date(2017, 08, 31, 22, 15, 45)", 1],
["Date(2017, 09, 01, 09, 18, 40)", 0],
["Date(2017, 09, 01, 19, 29, 50)", 1],
["Date(2017, 09, 02, 11, 24, 07)", 0],
["Date(2017, 09, 02, 14, 13, 04)", 1],
["Date(2017, 09, 03, 09, 48, 48)", 0],
["Date(2017, 09, 03, 13, 27, 42)", 1],
["Date(2017, 09, 03, 13, 51, 46)", 0],
["Date(2017, 09, 03, 15, 44, 59)", 1],
["Date(2017, 09, 04, 10, 02, 20)", 0]
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var chart_options = {
"legend": { "position": "none" },
"vAxis": {
"ticks": [{
"f": "Not Present",
"v": 0
}, {
"f": "Present",
"v": 1
}],
"maxValue": 1,
"minValue": 0
},
"title": "Chart"
};
var chart = new google.visualization.ChartWrapper({
'chartType': 'SteppedAreaChart',
'containerId': 'chart',
'options': chart_options
});
var control_options = {
"filterColumnLabel": "date"
};
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': control_options,
});
dashboard.bind(control, chart);
dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart" style="width: 100%; height: 100%"></div>
<div id="control" style="width: 100%; height: 100%"></div>
</div>

How to show all data in Highchart

How do I ensure that the data are close to each other & sorting by datetime. I want show all data with datetime
var charts = Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
series: [{
type: 'area',
data: [
[Date.UTC(2015, 9, 25, 14, 13, 00), 3.500],
[Date.UTC(2015, 9, 25, 14, 13, 02), 3.501],
[Date.UTC(2015, 9, 25, 14, 13, 04), 3.502],
[Date.UTC(2015, 9, 25, 14, 13, 06), 3.505],
[Date.UTC(2015, 9, 25, 14, 13, 08), 3.509],
[Date.UTC(2015, 9, 25, 14, 13, 10), 3.507],
[Date.UTC(2015, 9, 25, 14, 13, 12), 3.510],
[Date.UTC(2015, 9, 25, 14, 13, 14), 3.525],
[Date.UTC(2015, 9, 25, 14, 13, 16), 3.536],
[Date.UTC(2015, 9, 25, 14, 13, 18), 3.575],
[Date.UTC(2015, 9, 25, 14, 13, 20), 3.595],
[Date.UTC(2015, 9, 25, 14, 13, 22), 3.514],
[Date.UTC(2015, 9, 25, 14, 13, 24), 3.525],
[Date.UTC(2015, 9, 25, 14, 13, 26), 3.536],
[Date.UTC(2015, 9, 25, 14, 13, 28), 3.514],
[Date.UTC(2015, 9, 25, 14, 13, 30), 3.510],
[Date.UTC(2015, 9, 25, 14, 13, 32), 3.523],
[Date.UTC(2015, 9, 25, 14, 13, 34), 3.596],
[Date.UTC(2015, 9, 26, 18, 13, 34), 4.596]
]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

In addition to what #Z. Bagley wrote, to resolve this problem you can use couple solutions. The first one would be concerning using Highstock chart. In Highstock chart there is a property called ordinal (true by default) which distributes points equally on xAxis. Secondly, you can use breaks along with setting a new xAxis extremes to decrease distance between the last two dates. You can also try to add a scrollbar.
API Reference:
http://api.highcharts.com/highstock/xAxis.ordinal
http://api.highcharts.com/highcharts/xAxis.breaks
http://api.highcharts.com/highstock/scrollbar
Examples:
http://jsfiddle.net/pbdor59x/ - using Highstock and ordinal property
http://jsfiddle.net/abwpqs19/ - using breaks
http://jsfiddle.net/4cc2n3sp/ - using scrollbar

Y-Axis format on Google Charts dual Y-Axis Line

I would like to format the Y Axis of my google Dual Y Axis Line Chart.
Here the code I'm using:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
(...snip data...)
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Pressure'},
Daylight: {label: 'Temps (Celsius)'}
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
var classicChart = new google.visualization.LineChart(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
drawMaterialChart();
}
</script>
</head>
<body>
<br><br>
<div id="chart_div"></div>
</body>
</html>
I would like that the Y Axis is able to display the data not rounded (now it shows only 1K value and not with decimal) on the Y axis (for bot Y axies) as well on the tooltip message.
The tooltip message shows on the pressure values 1K always and on the temperature values, the values without decimal...
Could someone help me?
Thanks!
Simon
PS: The data is created dynamically from a php script, but thats not important now :)

use NumberFormat to format the data
this will set the format of the tooltip...
// create formatter
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.0'});
// format column 1 - Pressure
formatNumber.format(data, 1);
// format column 2 - Temperature
formatNumber.format(data, 2);
to format both y-axis', add this to materialOptions...
vAxis: {
format: '#,##0.0'
}
also recommend using google.charts.Line.convertOptions with Material charts
see following working snippet...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var formatPattern = '#,##0.0';
var formatNumber = new google.visualization.NumberFormat({pattern: formatPattern});
formatNumber.format(data, 1);
formatNumber.format(data, 2);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
y: {
Temps: {
label: 'Pressure'
},
Daylight: {
label: 'Temps (Celsius)'
}
}
},
vAxis: {
format: formatPattern
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Categories