I’m new to Javascript and Plotly so apologies if this is a schoolboy error.
I have a webpage requesting 5 floats from a Bluetooth Low Energy device (Arduino Nano BLE 33 Sense), which are received. I then proceed to parse the floats, update the 5 data arrays and call Plotly.react. The floats are correctly parsed and the buffers updated (verified on the console.log). I have incremented the datarevision property in the layout information (which applies to all 5 graphs) but only graphs 1 and 3 are updated.
The browser is Chrome (for BLE support), in case that makes a difference. The URL is the local file:/// path. Can someone please advise what I’m doing wrong?
Jason
HTML (now edited to remove any BLE interaction):
<!DOCTYPE html>
<html>
<head>
<title>Temperature monitor</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<button id="connectBtn">Connect</button>
<div id="temp0"></div>
<div id="temp1"></div>
<div id="temp2"></div>
<div id="temp3"></div>
<div id="temp4"></div>
<div id="temp5"></div>
<script>
const connectBtn = document.getElementById("connectBtn");
const MAX_BUFFER_LENGTH = 64;
const temp1 = [];
const temp2 = [];
const temp3 = [];
const temp4 = [];
const temp5 = [];
var temp1Data =
{
y: temp1,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
};
var temp2Data =
[{
y: temp2,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
}];
var temp3Data =
{
y: temp3,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
};
var temp4Data =
[{
y: temp4,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
}];
var temp5Data =
[{
y: temp5,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
}];
var allTempLayout =
{
plot_bgcolor: '#111111',
paper_bgcolor: '#111111',
margin: {l:8,r:8,b:18,t:18},
showlegend: false,
datarevision: 0,
yaxis:
{
'range': [0,120],
'showticklabels':false
},
xaxis:
{
'range': [0,64],
'showticklabels':false,
'autorange': false,
'showgrid': true,
'zeroline': true,
tickfont: {size: 8}
}
}
async function connectSensors()
{
setInterval(function() {
if(temp1.length === MAX_BUFFER_LENGTH)
{
temp1.shift();
temp2.shift();
temp3.shift();
temp4.shift();
temp5.shift();
}
temp1.push(Math.random() * 100.0);
temp2.push(Math.random() * 100.0);
temp3.push(Math.random() * 100.0);
temp4.push(Math.random() * 100.0);
temp5.push(Math.random() * 100.0);
allTempLayout.datarevision++;
console.log("Plot " + allTempLayout.datarevision);
Plotly.react("temp1", [temp1Data], allTempLayout);
Plotly.react("temp2", [temp2Data], allTempLayout);
Plotly.react("temp3", [temp3Data], allTempLayout);
Plotly.react("temp4", [temp4Data], allTempLayout);
Plotly.react("temp5", [temp5Data], allTempLayout);
}, 1000);
}
connectBtn.addEventListener ( "click", async () => {
try { connectSensors(); }
catch (err) {
console.log(err);
alert("An error occured while fetching device details");
}
});
Plotly.newPlot("temp1", [temp1Data], allTempLayout);
Plotly.newPlot("temp2", [temp2Data], allTempLayout);
Plotly.newPlot("temp3", [temp3Data], allTempLayout);
Plotly.newPlot("temp4", [temp4Data], allTempLayout);
Plotly.newPlot("temp5", [temp5Data], allTempLayout);
</script>
</body>
</html>
Looking at your code, you declare var temp1Data = {...} as an object, while you declare var temp2Data = [...] as an array. Looks like changing the type to object should solve the problem.
Related
I am getting super slow page loads (~10s on chrome, ~15 using firefox) when rendering a page with 10 Plotly charts (lines and bars) with very few data points on each chart (<100 per chart).
I'm not getting any errors, and my js code runs in ~300ms without errors (i used console.log() with timestamps). there is no network activity whilst waiting for the charts to render.
Am I doing something wrong?
The charts are rendered using a loop which calls a function with different parameters:
ajax call:
$.ajax({
method: "GET",
url: '/app/api/dashboard/data',
success: function(payload){
console.log('starting bal hist')
var bal_hist = JSON.parse(payload.balance_history);
balanceHistoryChart(elementID='balanceHistory', data=bal_hist);
console.log('ending bal hist')
var data = JSON.parse(payload.aggregated);
data = data.map(function(object) {
object.value_date = new Date(object.value_date);
return object
})
var allCategories = data.map(x => x.category);
var categories = new Set(allCategories);
console.log('starting loop')
for (var category of categories){
var chartID = category.toLowerCase().replace(' ','_') + '_chart';
console.log('starting catChart')
catChart(elementID=chartID, category=category, data=data)
console.log('ending catChart')
}
console.log('end loop')
},
error: function(error_data){
console.log("error")
console.log(error_data)
}
})
function that creates the plotly charts:
function catChart(elementID, category, data) {
let filterForCat = data.filter(obj => obj.category === category);
let dates = filterForCat.map(function(obj) {
return obj.value_date
});
let weeklyTotal = filterForCat.map(function(obj) {
return obj.weekly_total
});
let movingAv = filterForCat.map(function(obj) {
return obj.moving_av
});
var movingAvSeries = {
type: "scatter",
mode: "lines",
name: '4-week average',
x: dates,
y: movingAv,
line: {color: 'green'}
};
var weeklyTotalSeries = {
type: "bar",
name: 'weekly totals',
x: dates,
y: weeklyTotal,
line: {color: 'red'}
};
var layout = {
showlegend: false,
title: false,
margin: {
l: 30,
r: 20,
b: 20,
t: 20,
pad: 5
},
};
var data = [ movingAvSeries, weeklyTotalSeries ];
var config = {
responsive: true,
displayModeBar: false,
};
I have been struggling with this one for days now, really need some help. I need to apply gradient colors and some custom styling to our ChartJs bar chart, that contains call reporting data which comes from the back-end server. I found a way how to apply the styles and gradients, but can't figure out how to configure datasets to display correct data from the server, instead of some random numbers (eg. 10,20,30), like I tried for gradientGreen below. Any ideas?
//main html
<div class="row mb-4 mt-4">
<div class="col-9">
<h4 class="text-center">Call Distribution</h4>
#await Component.InvokeAsync("HourlyCallTotals", new { from = Model.From, to = Model.To, customer = Model.customer, site = Model.site })
</div>
//component html
#model CallReporter.ViewModels.BasicFilter
<div id="hourlyChart">
</div>
<script>
var HourlyCallData = #Html.RenderAction("HourlyTotals", "Calls", "", new { from = Model.from.ToString("s"), to = Model.to.ToString("s"), customer = Model.customer, site = Model.site })
</script>
//relevant part of JS function for Chart
function hoursChartAjax() {
var hourlyChart = $('#hourlyChart').html('<canvas width="400" height="300"></canvas>').find('canvas')[0].getContext('2d');
// set gradients for bars
let gradientGreen = hourlyChart.createLinearGradient(0, 0, 0, 400);
gradientGreen.addColorStop(0, '#66d8b0');
gradientGreen.addColorStop(1, '#1299ce');
let gradientBlue = hourlyChart.createLinearGradient(0, 0, 0, 400);
gradientBlue.addColorStop(0, '#1299ce');
gradientBlue.addColorStop(1, '#2544b7');
if (hourlyChart !== undefined) {
$.get(base + "Calls/HourlyTotals", { from: from.format(), to: to.format(), customer: currentCustomer.id, site: currentSite }, function (data) {
// set the default fonts for the chart
Chart.defaults.global.defaultFontFamily = 'Nunito';
Chart.defaults.global.defaultFontColor = '#787878';
Chart.defaults.global.defaultFontSize = 12;
var chart = new Chart(hourlyChart, {
type: 'bar',
data: {
labels: ['6AM', '9AM', '12AM', '3PM', '6PM', '9PM', '12PM'],
datasets: [
{
label: 'Total outgoing calls',
backgroundColor: gradientBlue,
data: HourlyCallData
},
{
label: 'Total incoming calls',
backgroundColor: gradientGreen,
data: [10, 20, 30]
}
]
},
//relevant part of back-end code that returns call data as Json
totalsContainer.Totals = allCallsHourly.OrderBy(x => x.Date).ToList();
return Json(new
{
labels = totalsContainer.Totals.Select(x => x.Date.ToString("hh tt")),
datasets = new List<object>() {
new { label = "Total Outgoing Calls", backgroundColor = "#1299CE", data = totalsContainer.Totals.Select(x => x.TotalOutgoingCalls) },
new { label = "Total Incoming Calls", backgroundColor = "#00B050", data = totalsContainer.Totals.Select(x => x.TotalIncomingCalls) } }
});
Attached img with console log and error, after trying solution below:
If the data comes formatted in the right way, you can just write this:
var chart = new Chart(hourlyChart, {
type: 'bar',
data: data: data
}
If not you could do it like so:
var chart = new Chart(hourlyChart, {
type: 'bar',
data: {
labels: data.labels,
datasets: [
{
label: data.datasets[0].label,
backgroundColor: gradientBlue,
data: data.datasets[0].data
},
{
label: data.datasets[1].label,
backgroundColor: gradientGreen,
data: data.datasets[1].data
}
]
}
}
<!DOCTYPE HTML>
<html>
<head>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",//theme1
title:{
text: "Basic Column Chart - CanvasJS"
},
animationEnabled: false, // change to true
data: [
{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
Can I use vaadin code to generate code dynamically using JavaScript?
I have not tried the append part.
enter code here
//stackchange.js
function calc2DArrMulti(dArr) {
let vLen = dArr.length;
let eLen = dArr[0].length;
const result = [];
const flip = new Array(eLen);
for (let j = 0; j < eLen; j++) {
flip[j] = new Array(vLen);
for (let i = 0; i < vLen; i++) {
flip[j][i] = dArr[i][j];
if (result[i] == null) result[i] = new Array(eLen);
}
}
for (let i = 0; i < eLen; i++) {
let min = Math.min.apply(null, flip[i]);
for (let j = 0; j < vLen; j++) {
let v = flip[i][j];
result[j][i] = v / min;
}
}
return {
origin: dArr,
calc: result
};
};
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--Vaadin-charts-->
<script src="js/jquery.js"></script>
<script src="js/stackchange.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/vaadin-charts/vaadin-charts.html">
<!-- <link rel="import" href="bower_components/vaadin-charts/ybtest.html">-->
<!--stacked-->
<script>
//----------------임의 데이터 만들기------------------//
var fab1 = [5, 2200, 100000, 6000000, 5200000, 2200, 100000, 6000000, 5200000,124,124,124,124,124,124];
var fab2 = [7, 2200, 130000, 4600000, 4200000, 2200, 100000, 6000000, 5200000,124,124,124,124,124,124];
var fab3 = [7, 2200, 100700, 5600000, 9200000, 2200, 100000, 6000000, 5200000,124,124,124,124,124,124];
var fab4 = [7, 2200, 100700, 5600000, 9200000, 2200, 100000, 6000000, 5200000,124,124,124,124,124,124];
var fab5 = [7, 2200, 100700, 5600000, 9200000, 2200, 100000, 6000000, 5200000,124,124,124,124,124,124];
var test = new Array(5);
// var test2 = new Array(4);
//2차원 배열 선언!!
for (var i = 0; i < test.length; i++) { //2
test[i] = new Array(5);
}
for (var i = 0; i < fab1.length; i++) {
test[0][i] = fab1[i];
test[1][i] = fab2[i];
test[2][i] = fab3[i];
test[3][i] = fab4[i];
test[4][i] = fab4[i];
}
//2차원 배열에 1차원 배열 넣기!!
//----------------임의 데이터 만들기------------------//
var test2 = calc2DArrMulti(test);
var test3 = stackchange(test);
</script>
<!-- <script>
$("#test-chart").append("<template><vaadin-column-chartid='dateAxisAndClickEvent'on-point-click='pointClickListener'><x-axis><categories>Fab1,Fab2,Fab3,Fab4,Fab5</categories></x-axis><y-axisallow-decimals='false'min='0'><stack-labelsenabled='false'></stack-labels></y-axis><tooltipformatter='function(){return(test3.origin[this.series.index][this.point.x])}'></tooltip><plot-options><chart-areastacking='percent'></chart-area><columnstacking='percent'><data-labelsenabled='true'color='white'formatter='function(){return(test3.origin[this.series.index][this.point.x])}'></data-labels></column></plot-options><legendlayout='vertical'align='right'vertical-align='top'x='-40'y='80'floating='true'border-width='1'background-color='#FFFFFF'shadow='true'></legend><data-seriesname='1'id='mytib'data='[[mytib]]'></data-series><data-seriesname='2'id='myext'data='[[myext]]'></data-series><data-seriesname='3'id='mybxt'data='[[mybxt]]'></data-series><data-seriesname='4'id='mycxt'data='[[mycxt]]'></data-series><data-seriesname='5'id='mydxt'data='[[mydxt]]'></data-series><data-seriesname='6'id='mydxx'data='[[mydxx]]'></data-series><data-seriesname='7'id='mydxz'data='[[mydxz]]'></data-series><data-seriesname='8'id='mydxy'data='[[mydxy]]'></data-series><data-seriesname='9'id='mydxr'data='[[mydxr]]'></data-series><data-seriesname='10'id='mydxh'data='[[mydxh]]'></data-series><data-seriesname='11'id='mydx1'data='[[mydx1]]'></data-series><data-seriesname='12'id='mydx2'data='[[mydx2]]'></data-series><data-seriesname='13'id='mydx3'data='[[mydx3]]'></data-series><data-seriesname='14'id='mydx4'data='[[mydx4]]'></data-series><data-seriesname='15'id='mydx5'data='[[mydx5]]'></data-series></vaadin-column-chart></template>");
</script>-->
<dom-module id=test-chart>
<template>
<vaadin-column-chart id='dateAxisAndClickEvent' on-point-click='pointClickListener'>
<x-axis>
<categories>Fab1,Fab2,Fab3,Fab4,Fab5</categories>
</x-axis>
<y-axis allow-decimals='false' min='0'>
<stack-labels enabled='false'></stack-labels>
</y-axis>
<tooltip formatter= 'function() { return (test3.origin[this.series.index][this.point.x])}'></tooltip>
<plot-options>
<chart-area stacking='percent'>
</chart-area>
<column stacking='percent'>
<data-labels enabled='true' color='white' formatter= 'function() { return (test3.origin[this.series.index][this.point.x])}'></data-labels>
</column>
</plot-options>
<legend layout='vertical' align='right' vertical-align='top' x='-40' y='80' floating='true' border-width='1' background-color='#FFFFFF' shadow='true'></legend>
<data-series name='1'id='mytib' data='[[mytib]]'></data-series>
<data-series name='2'id='myext' data='[[myext]]'></data-series>
<data-series name='3'id='mybxt' data='[[mybxt]]'></data-series>
<data-series name='4'id='mycxt' data='[[mycxt]]'></data-series>
<data-series name='5'id='mydxt' data='[[mydxt]]'></data-series>
<data-series name='6'id='mydxx' data='[[mydxx]]'></data-series>
<data-series name='7'id='mydxz' data='[[mydxz]]'></data-series>
<data-series name='8'id='mydxy' data='[[mydxy]]'></data-series>
<data-series name='9'id='mydxr' data='[[mydxr]]'></data-series>
<data-series name='10' id='mydxh' data='[[mydxh]]'></data-series>
<data-series name='11' id='mydx1' data='[[mydx1]]'></data-series>
<data-series name='12' id='mydx2' data='[[mydx2]]'></data-series>
<data-series name='13' id='mydx3' data='[[mydx3]]'></data-series>
<data-series name='14' id='mydx4' data='[[mydx4]]'></data-series>
<data-series name='15' id='mydx5' data='[[mydx5]]' ></data-series>
</vaadin-column-chart>
</template>
</dom-module>
<script>
Polymer({
is: 'test-chart',
properties: {
mytib: {
type: Array,
value: test3.calc[0]
},
myext: {
type: Array,
value: test3.calc[1]
},
mybxt: {
type: Array,
value: test3.calc[2]
},
mycxt: {
type: Array,
value: test3.calc[3]
},
mydxt: {
type: Array,
value: test3.calc[4]
},
mydxx: {
type: Array,
value: test3.calc[5]
},
mydxz: {
type: Array,
value: test3.calc[6]
},
mydxy: {
type: Array,
value: test3.calc[7]
},
mydxr: {
type: Array,
value: test3.calc[8]
},
mydxh: {
type: Array,
value: test3.calc[9]
},
mydx1: {
type: Array,
value: test3.calc[10]
},
mydx2: {
type: Array,
value: test3.calc[11]
},
mydx3: {
type: Array,
value: test3.calc[12]
},
mydx4: {
type: Array,
value: test3.calc[13]
},
mydx5: {
type: Array,
value: test3.calc[14]
},
},
pointClickListener: function(a) {
var b = a.detail.originalEvent,
c = a.detail.point,
d = b.chartX,
f = b.chartY;
this.showLabel(c.series.name+':' + test3.origin[c.series.index][c.x], d, f)
},
showLabel: function(a, b, c) {
var d = this.$.dateAxisAndClickEvent.chart.renderer.label(a, b, c).attr({
fill: 'red',
// Highcharts.getOptions().colors[5],
padding: 5,
r: 5,
zIndex: 8
}).css({
color: '#FFFFFF'
}).add();
this.async(function() {
d.fadeOut()
}, 1e3)
}
});
</script>
<test-chart></test-chart>
</body>
</html>
I have not tried the append part.
I want to code the vaadin chart like a canvas.
Is it possible?
What should I do if possible?
I am trying to create a simple real time chart using epoch.js which updates itself on a click event.
My code posted below has a total of 3 functions. They are:
1) generate a random value
2) generate the current date and time in milliseconds.
3) onclick event that updates chart datapoints.
Though I have datapoints in the right format as required for the chart. I am unable to update it .
Appreciate any help on find out as to why the graph is not working as it should.
///////////////this function generates the date and time in milliseconds//////////
function getTimeValue() {
var dateBuffer = new Date();
var Time = dateBuffer.getTime();
return Time;
}
////////////// this function generates a random value ////////////////////////////
function getRandomValue() {
var randomValue = Math.random() * 100;
return randomValue;
}
////////////// this function is used to update the chart values ///////////////
function updateGraph() {
var newBarChartData = [{
label: "Series 1",
values: [{
time: getTimeValue(),
y: getRandomValue()
}]
}, ];
barChartInstance.push(newBarChartData);
}
////////////// real time graph generation////////////////////////////////////////
var barChartData = [{
label: "Series 1",
values: [{
time: getTimeValue(),
y: getRandomValue()
}]
}, ];
var barChartInstance = $('#barChart').epoch({
type: 'time.bar',
axes: ['right', 'bottom', 'left'],
data: barChartData
});
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js">
</script>
<script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/d3.min.js">
</script>
<script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.css">
</head>
<div id="barChart" class="epoch category10" style="width:320px; height: 240px;"></div>
<p id="updateMessage" onclick="updateGraph()">click me to update chart</p>
You are pushing the wrong object to barChartInstance when updating the graph. You need to just push the array containing the new data point, instead of pushing the full configuration again.
function updateGraph() {
var newBarChartData = [{time: getTimeValue(), y:getRandomValue()}];
/* Wrong: don't use the full configuration for an update.
var newBarChartData = [{
label: "Series 1",
values: [{
time: getTimeValue(),
y: getRandomValue()
}]
}, ];
*/
barChartInstance.push(newBarChartData);
}
///////////////this function generates the date and time in milliseconds//////////
function getTimeValue() {
var dateBuffer = new Date();
var Time = dateBuffer.getTime();
return Time;
}
////////////// this function generates a random value ////////////////////////////
function getRandomValue() {
var randomValue = Math.random() * 100;
return randomValue;
}
////////////// this function is used to update the chart values ///////////////
function updateGraph() {
var newBarChartData = [{time: getTimeValue(), y:getRandomValue()}];
/*
var newBarChartData = [{
label: "Series 1",
values: [{
time: getTimeValue(),
y: getRandomValue()
}]
}, ];
*/
barChartInstance.push(newBarChartData);
}
////////////// real time graph generation////////////////////////////////////////
var barChartData = [{
label: "Series 1",
values: [{
time: getTimeValue(),
y: getRandomValue()
}]
}, ];
var barChartInstance = $('#barChart').epoch({
type: 'time.bar',
axes: ['right', 'bottom', 'left'],
data: barChartData
});
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js">
</script>
<script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/d3.min.js">
</script>
<script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.css">
</head>
<div id="barChart" class="epoch category10" style="width:320px; height: 240px;"></div>
<p id="updateMessage" onclick="updateGraph()">click me to update chart</p>
Ok I have a graph using Highcharts.JS that is populated by an api call providing it with XML data.
I have managed to get the data to push and display on the graph as such, but now I am having the issue of "What happens when there is no data for "x" component" In which I found out that it makes the whole graph blank until you click to hide "x" component on the legend.
So I was thinking that I could probably do some conditional to have it check if there is actually data in the array that is made from the XML.
<!DOCTYPE html>
<html>
<head>
<title>Graph</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"> </script>
<script>
$(document).ready(function() {
var sgaxml = 'https://sga.quickbase.com/db/bjmdensiu?apptoken=beadyrucxguavbx5isubd6iaqpe&act=API_DoQuery&query=%7B14.EX.%27_FID_9%7D&clist=7.24.25.26.27.28.29.30.31.32.33.34.35.36.37'
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Components Over Time'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Concentration%'
}
},
series: []
};
// Load the data from the XML file
$.get(sgaxml, function(xml) {
// Split the lines
var xml = $(xml).find('record');
// Variables for the component series
var seriesH = {
name: 'Hydrogen',
data: []
};
var seriesHe = {
name: 'Helium',
data: []
};
var seriesO = {
name: 'Oxygen',
data: []
};
var seriesHs = {
name: 'Hydrogen Sulfide',
data: []
};
var seriesN = {
name: 'Nitrogen',
data: []
};
var seriesC = {
name: 'Carbon Dioxide',
data: []
};
var seriesM = {
name: 'Methane',
data: []
};
var seriesE = {
name: 'Ethane',
data: []
};
var seriesP = {
name: 'Propane',
data: []
};
var seriesIb = {
name: 'Iso-Butane',
data: []
};
var seriesNb = {
name: 'N-Butane',
data: []
};
var seriesIp = {
name: 'Iso-Pentane',
data: []
};
var seriesNp = {
name: 'N-Pentane',
data: []
};
var seriesHex = {
name: 'Hexanes+',
data: []
};
xml.each(function (i, record) {
options.xAxis.categories.push(new Date(parseInt($(record).find('sample_date').text())));
seriesH.data.push(parseFloat($(record).find('hydrogen').text()));
seriesHe.data.push(parseFloat($(record).find('helium').text()));
seriesO.data.push(parseFloat($(record).find('oxygen').text()));
seriesHs.data.push(parseFloat($(record).find('hydrogen_sulfide').text()));
seriesN.data.push(parseFloat($(record).find('nitrogen').text()));
seriesC.data.push(parseFloat($(record).find('co2').text()));
seriesM.data.push(parseFloat($(record).find('methane').text()));
seriesE.data.push(parseFloat($(record).find('ethane').text()));
seriesP.data.push(parseFloat($(record).find('propane').text()));
seriesIb.data.push(parseFloat($(record).find('iso_butane').text()));
seriesNb.data.push(parseFloat($(record).find('n_butane').text()));
seriesIp.data.push(parseFloat($(record).find('iso_pentane').text()));
seriesNp.data.push(parseFloat($(record).find('n_pentane').text()));
seriesHex.data.push(parseFloat($(record).find('hexanes_').text()));
});
console.log(seriesO);
options.series.push(seriesH);
options.series.push(seriesHe);
options.series.push(seriesO);
options.series.push(seriesHs);
options.series.push(seriesN);
options.series.push(seriesC);
options.series.push(seriesM);
options.series.push(seriesE);
options.series.push(seriesP);
options.series.push(seriesIb);
options.series.push(seriesNb);
options.series.push(seriesIp);
options.series.push(seriesNp);
options.series.push(seriesHex);
console.log('options: ', options);
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id="container" style=" width: 1000px; height: 600px; margin: 0 auto "></div>
</body>
</html>
<!--
XML FROM CALL
=============
<qdbapi>
<action>API_DoQuery</action>
<errcode>0</errcode>
<errtext>No error</errtext>
<dbinfo>
<name>RESULT</name>
<desc/>
</dbinfo>
<variables>
<co2>Carbon Dioxide</co2>
<methane>methane</methane>
</variables>
<chdbids></chdbids>
<record>
<sample_date>1386892800000</sample_date>
<hydrogen>0.002</hydrogen>
<helium>0.114</helium>
<oxygen/>
<hydrogen_sulfide/>
<nitrogen>1.926</nitrogen>
<co2>0.454</co2>
<methane>82.163</methane>
<ethane>6.353</ethane>
<propane>4.760</propane>
<iso_butane>0.618</iso_butane>
<n_butane>1.819</n_butane>
<iso_pentane>0.491</iso_pentane>
<n_pentane>0.544</n_pentane>
<hexanes_>0.756</hexanes_>
<update_id>1408654196361</update_id>
</record>
<record>
<sample_date>1383782400000</sample_date>
<hydrogen>0.006</hydrogen>
<helium>0.038</helium>
<oxygen/>
<hydrogen_sulfide/>
<nitrogen>0.512</nitrogen>
<co2>0.844</co2>
<methane>83.178</methane>
<ethane>8.678</ethane>
<propane>3.631</propane>
<iso_butane>0.493</iso_butane>
<n_butane>1.097</n_butane>
<iso_pentane>0.342</iso_pentane>
<n_pentane>0.371</n_pentane>
<hexanes_>0.810</hexanes_>
<update_id>1408981434690</update_id>
</record>
<record>
<sample_date>1369699200000</sample_date>
<hydrogen>0.004</hydrogen>
<helium>0.060</helium>
<oxygen/>
<hydrogen_sulfide/>
<nitrogen>1.684</nitrogen>
<co2>0.443</co2>
<methane>77.742</methane>
<ethane>10.430</ethane>
<propane>6.842</propane>
<iso_butane>0.587</iso_butane>
<n_butane>1.482</n_butane>
<iso_pentane>0.232</iso_pentane>
<n_pentane>0.249</n_pentane>
<hexanes_>0.245</hexanes_>
<update_id>1408981112624</update_id>
</record>
</qdbapi>
I've attempted to us isnan() as I was told it would be doable with it, but that didn't have any results.
There is already a way to handle this in highcharts. See noData.
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
}
You need to include an extra library (modules/no-data-to-display.js) from highcharts but it is dead simple.