Develop Reference

Highcharts Graph displaying 0 value continuously : Javascript Array

I am trying to display the points on a graph using PHP Mysql, I saved the data into an array in php Variable and then passed that array into a Javascript array.
Now, What I want to do is that I want to show the array elements one by one after every one second. But what is Happening is that the graph plots 0 value countinuously on the Highchart.
Here is my Code :
numArray = [1,5,3,5,6,3,3,7,4,6,7,3,5,3,6,7,5,2,5,7,4,6,4,5,3,6,7,8,5,4,3,6,7,8,5,7,8,8,5,3,2,4,6,7,4,6,7] ;
/* Just for understanding */
var json_array =numArray ;
var i = 0;
function next() {
return json_array[i];
i++;
}
Highcharts.chart('container', {
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0],
chart = this;
setInterval(function() {
var x = (new Date()).getTime(), // current time
y =next();
console.log(y) ;
series.addPoint([x, y], false, true);
}, 1000);
setInterval(function() {
chart.redraw(false);
}, 1000);
}
}
},
time: {
useUTC: false
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
animation: false,
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -1000; i <= 0; i += 1) {
data.push([
time + i * 10,
null
]);
}
return data;
}())
}]
});
Here is the Fiddle that I have created :
https://jsfiddle.net/abnitchauhan/v7tdLr1j/2/
The Chart runs till infinite loop and show only 0 Value. I just want to show the array values till the End

Check the below demo with the result you probably want to achieve.
Code:
const numArray = [1, 5, 3, 5, 6, 3, 3, 7, 4, 6, 7, 3, 5, 3, 6, 7, 5, 2, 5, 7, 4, 6, 4, 5, 3, 6, 7, 8, 5, 4, 3, 6, 7, 8, 5, 7, 8, 8, 5, 3, 2, 4, 6, 7, 4, 6, 7];
Highcharts.chart('container', {
chart: {
events: {
load: function() {
let chart = this,
now = (new Date()).getTime(),
i = 0;
const interval = setInterval(function() {
chart.series[0].addPoint([
now + i * 1000,
numArray[i]
]);
i++;
if (i === numArray.length) {
clearInterval(interval);
}
}, 1000);
}
}
},
xAxis: {
type: 'datetime'
},
series: [{}]
});
Demo:
https://jsfiddle.net/BlackLabel/vf906wam/

First of there is no endpoint in your setInterval method. It will keep on calling after 1 sec. You cant even stop. First, have a separate function to form data. Let's say have series data initialized. Have as a global variable. then have the Promise to generate you x point.
var promise1 = new Promise(function(resolve, reject) {
var points [];
setTimeout(function() {
var x = (new Date()).getTime(), // current time
y =next();
points.push([x, y], false, true);
if(your counter let says 1000 : points.lenght > 1000) {
resolve(points) //resolve your points
}
}, 300);});
wrap above thins in function and return a promise and call that.
callYourDefinedFun().then(function(points) {
// now you have points ready, series ready make your chart configuration and then
// call to render the chart
});

Range ui Slider

I have problems viewing the range uislider on ios and android
  In an application with meteor and cordova, in the following video I leave to the detail. When moving the slider in the browser works but in ios and android I can not visualize the ranges obtained.
I have the following code:
Try with jquery as you can see that the code is commented and I did not get results
Template.range.onRendered(function () {
$(function () {
$('#slider-edad').noUiSlider({
start: [18, 30],
step: 1,
range: {
'min': 18,
'max': 60
}
});
});
$(function () {
$('#range').noUiSlider({
start: [10],
step: 2,
range: {
'min': 10,
'max': 100
}
});
});
// km();
});
function km(instance) {
// $('.km-range').html('');
// Session.set("Kilometros", '');
var d1 = $('#range').val();
var d0r = parseInt(d1);
console.log('Kilometros: ', d0r);
instance.km1.set(d0r);
// Session.set("Kilometros", d0r);
// $('.km-range').html(d0r, 'Km');
}
Template.range.events({
'click #range': function (event, instance) {
console.log('click');
km(instance);
},
});

After a long chat and many tries it turned out to be the click event, that makes the noUiSlider not work on mobile.
So checking on the noUiSlider events page and putting this into some reactive variables we got the following code running:
import { Template } from 'meteor/templating';
import { ReactiveDict } from 'meteor/reactive-dict';
//import template html file
Template.findme.onCreated(function (){
this.state = new ReactiveDict();
// set start values
this.state.set("km", 10);
this.state.set("agemin", 18);
this.state.set("agemax", 30);
});
Template.findme.onRendered(function() {
if (!this._rendered) {
this._rendered = true;
// create slider
$('#slider-edad').noUiSlider({
start: [ 18, 30 ],
step: 1,
range: {
'min': 18,
'max': 60
}
})
$('#range').noUiSlider({
start: [ 10 ],
step: 2,
range: {
'min': 10,
'max': 100
}
});
}
});
Template.findme.helpers({
KilosM: function(){
return Template.instance().state.get("km");
},
agemin: function(){
return Template.instance().state.get("agemin");
},
agemax: function(){
return Template.instance().state.get("agemax");
},
});
Template.findme.events({
'slide #slider-edad':function(event,instance) {
var d2= $('#slider-edad').val()
var d0 = parseInt(d2[0]);
var d1 = parseInt(d2[1]);
console.log(d0,d1);
instance.state.set("agemin", d0);
instance.state.set("agemax", d1);
} ,
'slide #range': function(event , instance) {
var d1= $('#range').val();
var d0r = parseInt(d1);
console.log('Kilometros: ',d0r);
instance.state.set("km", d0r);
},
});
and the html template being:
<div class="">
<span class="edad-range0">{{agemin}}</span>
<span class="edad-title"> Age </span>
<span class="edad-range1">{{agemax}}</span><br>
<div id="slider-edad"></div><br><br>
</div>

Highcharts load before the dialog has opened

I have a dynamic highchart that is shown in a dialog on a click event. I am close to where I want to be on this, with the exception of the following:
1: My chart has an event: load included, which means the chart is loaded before the click event. I want it to load on the click event. My first instinct was to place the highchart code in the onclick event, but that had unexpected impacts on the chart rendering itself. How can I have the chart load on the click event without impacting the chart behavior?
2: The left hand side of my chart does not disappear from the chart, as shown in the jsfiddle example from the highcharts website: http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/ and I do not see any difference between the example and my code that would impact this. How can I have my chart copy the example and have my points disappear on the left?
3: When my chart has reached the end of the data array, I want it to start over, but instead it seems to keep running without data, eventually flatlining. My dataset includes 3 arrays, each of 40 elements; apiData, calculatedData (both numbers), and apiDate (universal time values). How can I have the chart run a continuous loop on my data?
Example of my data:
var apiData = [75, 76, 89, 91, 86, 56, 46, 89, 87, 96];
var calculatedData = [78, 81, 98, 95, 89, 70, 59, 91, 90, 78];
var apiDate = [1482613200,1482624000,1482634800,1482645600,1482656400
,1482667200,1482678000,1482688800,1482699600,1482710400,1482721200];
These divs have the onClick event attached:
<div class="wrap">
<div class="left col-xs-4"
id="8d450007-9cbf-11e6-a7da-14109fd4bd8b">
</div>
<div class="center col-xs-4"
id="8d45001c-9cbf-11e6-a7da-14109fd4bd8b">
</div>
<div class="right col-xs-4"
id="8d450008-9cbf-11e6-a7da-14109fd4bd8b">
</div>
</div>
Dialog that contains the chart:
<!-- Div to hold the line chart -->
<div id="dialog" title="Basic dialog">
<div id="canvas" width="600" height="400"></div>
</div>
Dialog setup:
//Initialize the dialog and set options
var opt = {
autoOpen: false,
modal: true,
width: 660,
height:460,
title: 'Hourly Temperature'
};
var theDialog = $("#dialog").dialog(opt);
var divIdList = ["#8d45001c-9cbf-11e6-a7da-14109fd4bd8b", "#8d450007-9cbf-11e6-a7da-14109fd4bd8b", "#8d450008-9cbf-11e6-a7da-14109fd4bd8b"]
$(function () {
divIdList.forEach(function(id) {
$(id).click(function () {
theDialog.dialog('open');
});
})
});
Highchart code:
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
Highcharts.chart('canvas', {
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each 3 seconds
var series1 = this.series[0];
var series2 = this.series[1];
var seriesCount = 0;
setInterval(function () {
var x = (new Date(apiDate[seriesCount] * 1000)).getTime(),
y1 = apiData[seriesCount],
y2 = calculatedData[seriesCount];
series1.addPoint([x, y1], true, true);
series2.addPoint([x, y2], true, true);
seriesCount++;
}, 3000);
if (seriesCount > 10) {
char
}
}
}
},
title: {
text: 'Live data'
},
xAxis: {
title: {
text: 'Date/Time'
},
type: 'datetime',
tickPixelInterval: 150
},
yAxis: [{
title: {
text: 'Temperature'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
],
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 0);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series: [{
name: 'API Temperature data',
data: (function () {
// use api predicted data
var data = [],
time = (new Date(apiDate[0])).getTime(),
dataCount = 0,
i;
for (i = 0; i <= 40; i ++) {
data.push({
x: time,
y: apiData[dataCount]
});
}
return data;
}())
},
{
name: 'Calculated Temperature data',
data: (function () {
var data = [],
time = (new Date(apiDate[0])).getTime(),
dataCount = 0,
i;
for (i = 0; i <= 40; i ++) {
data.push({
x: time,
y: calculatedData[dataCount]
});
}
return data;
}())
}
]
});
});
I would really appreciate some help on this. Maybe it is really simple but I have been staring at it so long now, I'm driving myself crazy.

dynamic justgage value from soap

I would like to display the value coming back from $("#spanrWS_Measured").text(data[0]); as my justgage value (currently 123). Any help would be great. Full code is below.
<script src="scripts/raphael-2.1.4.min.js"></script>
<script src="scripts/justgage.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
setInterval(ajaxcall, 5000); // Call every 5 seconds
}); function ajaxcall(){
$.ajax({
url: 'soap.php',
success: function(data) {
data = data.replace('[','');
data = data.replace(']','');
data = data.split('|');
// Status
$("#spanrWS_Measured").text(data[0]);
}
}); }
document.addEventListener("DOMContentLoaded", function(event) {
var g1;
<!--Start G1->
var g1 = new JustGage({
id: "g1",
value: 123,
min: 0,
max: 100,
pointer: true,
pointerOptions: {
color: '#222D4B',
},
decimals: 1,
startAnimationTime: 500,
startAnimationType: ">",
refreshAnimationTime: 1000,
refreshAnimationType: "bounce",
title: "",
label: "mps",
titleFontColor: "black",
valueFontColor: "black",
labelFontColor: "black",
relativeGaugeSize: true,
customSectors: [{
color : "#00ff00",
lo : 0,
hi : 60
},{
color : "#ff0000",
lo : 61,
hi : 120
}],
});
<!--End G1-->
});
</script>

I used this in the end
function ajaxcall(){
$.ajax({
url: 'soap.php',
success: function(data) {
data = data.replace('[','');
data = data.split('|');
// Dials
g1.refresh(data[0]);
g2.refresh(data[1]);
g3.refresh(data[2]);

updating jqplot meter gauge after every 5 seconds

I am displaying jqplot meter gauge inside modal window and I want to update it after every 5 seconds. I wrote the following code but it is not working
$(document).ready(function(){
s1 = [Math.floor(Math.random()*(401)+100)];
plot3 = $.jqplot('meter',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 100,
max: 500,
intervals:[200, 300, 400, 500],
intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666'],
smooth: true,
animation: {
show: true
}
}
}
});
$('a[href=\"#yw1_tab_3\"]').on('shown', function(e) {
if (plot3._drawCount === 0) {
plot3.replot();
}
});
windows.setInterval(function() { plot3.destroy();
s1 = [Math.floor(Math.random()*(401)+100)];
plot3.replot();
}, 5000);
});
How can I update meter gauge every 5 seconds without updating whole page?

here is the fix: JsFiddle link
$(document).ready(function () {
var s1 = [Math.floor(Math.random() * (401) + 100)];
var plot3 = $.jqplot('meter', [s1], {
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 100,
max: 500,
intervals: [200, 300, 400, 500],
intervalColors: ['#66cc66', '#93b75f', '#E7E658', '#cc6666'],
smooth: true,
animation: {
show: true
}
}
}
});
setInterval(function () {
s1 = [Math.floor(Math.random() * (401) + 100)];
plot3.series[0].data[0] = [1,s1]; //here is the fix to your code
plot3.replot();
}, 1000);
});