gauge.js
100% native and cool looking JavaScript gauge
I want to have a simple gauge view where i will define the start value and the end value and have a pointer to show given variable value.
So i can show a given value like speedmeter.For example if my the value of a textView is 1300 , then next to the textview i want to have this custom meter view animation like this!
It is possible?Any existing example code?
Source: (StackOverflow)
I am currently evaluating different gauge controls. But I would like to hear opinions of others who has used or evaluated gauges.
My requirements are:
- Having adjustable value ranges(for example: normal, low, critical range)
- Have several indicators on a single gauge
- Fast update time (suitable for showing live data)
I would appreciate if you could give a reason why a specific gauges is good.
P.S. I am quite impressed with actipro gauges, really a lot of customization can be made, I would be grateful if anyone gave some comments about this control.
Source: (StackOverflow)
I am trying to manage to work the following example MeterGauge Since the xhtml code is not complete that you can use it to make an entire xhtml page, I have taken the missing tags from PrimeFaces official doc at page 12.
Then created the JavaBean file ChartView.java (taking the code from MeterGauge sample page) and tried running it on a GlassFish server, but it failed, as you can see from logs
metergauge2.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<h:head>
</h:head>
<h:body>
<p:chart type="metergauge" model="#{chartBean.meterGaugeModel1}" style="width:400px;height:250px" />
<p:chart type="metergauge" model="#{chartBean.meterGaugeModel2}" style="width:400px;height:250px" />
</h:body>
</html>
ChartView.java
package sources;
import javax.annotation.PostConstruct;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import org.primefaces.model.chart.MeterGaugeChartModel;
@ManagedBean
public class ChartView implements Serializable {
private MeterGaugeChartModel meterGaugeModel1;
private MeterGaugeChartModel meterGaugeModel2;
@PostConstruct
public void init() {
createMeterGaugeModels();
}
public MeterGaugeChartModel getMeterGaugeModel1() {
return meterGaugeModel1;
}
public MeterGaugeChartModel getMeterGaugeModel2() {
return meterGaugeModel2;
}
private MeterGaugeChartModel initMeterGaugeModel() {
List<Number> intervals = new ArrayList<Number>(){{
add(20);
add(50);
add(120);
add(220);
}};
return new MeterGaugeChartModel(140, intervals);
}
private void createMeterGaugeModels() {
meterGaugeModel1 = initMeterGaugeModel();
meterGaugeModel1.setTitle("MeterGauge Chart");
meterGaugeModel1.setGaugeLabel("km/h");
meterGaugeModel2 = initMeterGaugeModel();
meterGaugeModel2.setTitle("Custom Options");
meterGaugeModel2.setSeriesColors("66cc66,93b75f,E7E658,cc6666");
meterGaugeModel2.setGaugeLabel("km/h");
meterGaugeModel2.setGaugeLabelPosition("bottom");
meterGaugeModel2.setShowTickLabels(false);
meterGaugeModel2.setLabelHeightAdjust(110);
meterGaugeModel2.setIntervalOuterRadius(100);
}
}
Glassfish logs
2015-07-17T16:51:23.536+0200|Grave: Error Rendering View[/metergauge2.xhtml]
java.lang.NullPointerException
at org.primefaces.component.chart.renderer.MeterGaugeRenderer.encodeData(MeterGaugeRenderer.java:33)
at org.primefaces.component.chart.renderer.BasePlotRenderer.render(BasePlotRenderer.java:29)
at org.primefaces.component.chart.ChartRenderer.encodeScript(ChartRenderer.java:98)
at org.primefaces.component.chart.ChartRenderer.encodeEnd(ChartRenderer.java:67)
at javax.faces.component.UIComponentBase.encodeEnd(UIComponentBase.java:919)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1863)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1859)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1859)
at com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView(FaceletViewHandlingStrategy.java:456)
at org.apache.myfaces.application.ViewHandlerImpl.renderView(ViewHandlerImpl.java:285)
at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:120)
at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:219)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:647)
at org.apache.catalina.core.StandardWrapper.service(StandardWrapper.java:1682)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:318)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:160)
at org.apache.catalina.core.StandardPipeline.doInvoke(StandardPipeline.java:734)
at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:673)
at com.sun.enterprise.web.WebPipeline.invoke(WebPipeline.java:99)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:174)
at org.apache.catalina.connector.CoyoteAdapter.doService(CoyoteAdapter.java:415)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:282)
at com.sun.enterprise.v3.services.impl.ContainerMapper$HttpHandlerCallable.call(ContainerMapper.java:459)
at com.sun.enterprise.v3.services.impl.ContainerMapper.service(ContainerMapper.java:167)
at org.glassfish.grizzly.http.server.HttpHandler.runService(HttpHandler.java:201)
at org.glassfish.grizzly.http.server.HttpHandler.doHandle(HttpHandler.java:175)
at org.glassfish.grizzly.http.server.HttpServerFilter.handleRead(HttpServerFilter.java:235)
at org.glassfish.grizzly.filterchain.ExecutorResolver$9.execute(ExecutorResolver.java:119)
at org.glassfish.grizzly.filterchain.DefaultFilterChain.executeFilter(DefaultFilterChain.java:284)
at org.glassfish.grizzly.filterchain.DefaultFilterChain.executeChainPart(DefaultFilterChain.java:201)
at org.glassfish.grizzly.filterchain.DefaultFilterChain.execute(DefaultFilterChain.java:133)
at org.glassfish.grizzly.filterchain.DefaultFilterChain.process(DefaultFilterChain.java:112)
at org.glassfish.grizzly.ProcessorExecutor.execute(ProcessorExecutor.java:77)
at org.glassfish.grizzly.nio.transport.TCPNIOTransport.fireIOEvent(TCPNIOTransport.java:561)
at org.glassfish.grizzly.strategies.AbstractIOStrategy.fireIOEvent(AbstractIOStrategy.java:112)
at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy.run0(WorkerThreadIOStrategy.java:117)
at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy.access$100(WorkerThreadIOStrategy.java:56)
at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy$WorkerThreadRunnable.run(WorkerThreadIOStrategy.java:137)
at org.glassfish.grizzly.threadpool.AbstractThreadPool$Worker.doWork(AbstractThreadPool.java:565)
at org.glassfish.grizzly.threadpool.AbstractThreadPool$Worker.run(AbstractThreadPool.java:545)
at java.lang.Thread.run(Thread.java:745)
2015-07-17T16:51:23.601+0200|Avvertenza: StandardWrapperValve[Faces Servlet]: Servlet.service() for servlet Faces Servlet threw exception
java.lang.NullPointerException
at org.primefaces.component.chart.renderer.MeterGaugeRenderer.encodeData(MeterGaugeRenderer.java:33)
at org.primefaces.component.chart.renderer.BasePlotRenderer.render(BasePlotRenderer.java:29)
at org.primefaces.component.chart.ChartRenderer.encodeScript(ChartRenderer.java:98)
at org.primefaces.component.chart.ChartRenderer.encodeEnd(ChartRenderer.java:67)
at javax.faces.component.UIComponentBase.encodeEnd(UIComponentBase.java:919)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1863)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1859)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1859)
at com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView(FaceletViewHandlingStrategy.java:456)
at org.apache.myfaces.application.ViewHandlerImpl.renderView(ViewHandlerImpl.java:285)
at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:120)
at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:219)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:647)
at org.apache.catalina.core.StandardWrapper.service(StandardWrapper.java:1682)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:318)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:160)
at org.apache.catalina.core.StandardPipeline.doInvoke(StandardPipeline.java:734)
at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:673)
at com.sun.enterprise.web.WebPipeline.invoke(WebPipeline.java:99)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:174)
at org.apache.catalina.connector.CoyoteAdapter.doService(CoyoteAdapter.java:415)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:282)
at com.sun.enterprise.v3.services.impl.ContainerMapper$HttpHandlerCallable.call(ContainerMapper.java:459)
at com.sun.enterprise.v3.services.impl.ContainerMapper.service(ContainerMapper.java:167)
at org.glassfish.grizzly.http.server.HttpHandler.runService(HttpHandler.java:201)
at org.glassfish.grizzly.http.server.HttpHandler.doHandle(HttpHandler.java:175)
at org.glassfish.grizzly.http.server.HttpServerFilter.handleRead(HttpServerFilter.java:235)
at org.glassfish.grizzly.filterchain.ExecutorResolver$9.execute(ExecutorResolver.java:119)
at org.glassfish.grizzly.filterchain.DefaultFilterChain.executeFilter(DefaultFilterChain.java:284)
at org.glassfish.grizzly.filterchain.DefaultFilterChain.executeChainPart(DefaultFilterChain.java:201)
at org.glassfish.grizzly.filterchain.DefaultFilterChain.execute(DefaultFilterChain.java:133)
at org.glassfish.grizzly.filterchain.DefaultFilterChain.process(DefaultFilterChain.java:112)
at org.glassfish.grizzly.ProcessorExecutor.execute(ProcessorExecutor.java:77)
at org.glassfish.grizzly.nio.transport.TCPNIOTransport.fireIOEvent(TCPNIOTransport.java:561)
at org.glassfish.grizzly.strategies.AbstractIOStrategy.fireIOEvent(AbstractIOStrategy.java:112)
at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy.run0(WorkerThreadIOStrategy.java:117)
at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy.access$100(WorkerThreadIOStrategy.java:56)
at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy$WorkerThreadRunnable.run(WorkerThreadIOStrategy.java:137)
at org.glassfish.grizzly.threadpool.AbstractThreadPool$Worker.doWork(AbstractThreadPool.java:565)
at org.glassfish.grizzly.threadpool.AbstractThreadPool$Worker.run(AbstractThreadPool.java:545)
at java.lang.Thread.run(Thread.java:745)
Source: (StackOverflow)
I would like to display a linear gauge like the one in fusion charts using html5 or javascript. On doing a google search i could not find any open source / free linear gauge similar to the one fusion charts have
Source: (StackOverflow)
Indicator automatically extends when the row in the table will be more than one line of text. Here is an example how it looks like: screen
What to do to not change its size?
There is an option such "Auto-fit all gauges in panel" in Indicator properties. But I don't understand how it works and what should I do to change it in right way.
Any tips? ;)
Source: (StackOverflow)
I need a graphical needle gauge (like a speedometer etc) for my app but such a UI widget is not part of the SDK so I probably have to create it myself.
My idea is to have the background with the tickmarks and coloured fields (green, yellow, red) as one bitmap and the needle as another bitmap drawn on top of the background, but rotated in the appropriate angle.
In my book, Professional Android 2 Application Development, there is a somewhat similar example with a compass rose, although that one is drawn using line graphics, not pre-fabricated images like I will have to use to get the desired look.
However, in the compass example the whole canvas is rotated before drawing the tick marks. I cannot use this approach as it will also rotate the gauge background. So I need to somehow rotate the needle image (which should be transparent) before superimposing it. But I don't know how to do accomplish this.
Can anyone lead me in the right direction on how to proceed with the needle gauge? Also, if there is a better way to build the meter than sketched above, please let me know.
Source: (StackOverflow)
I am trying to make google gauge pointer move, but it is not moving, I have set animation configuration as it suppose to be set in var options , such as duration : 1000 and easing: 'inAndOut' , I am n00b in Google API so for give my ignorance attempt.
can anyone help me.
here is the tutorial link that I am using it. the code is working but partially, the gauge pointer should move slowly to it's max, however, in my case it wont work.
here is the code.
<html>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Match',80],
]);
var options = {
width: 440, height: 140,
greenFrom: 70, greenTo: 100,
yellowFrom:50, yellowTo: 70,
redFrom:0, redTo: 50,
minorTicks: 5,
animation:{
duration: 1000,
easing: 'inAndOut',
},
majorTicks : ['0','10','20','30','40','50','60','70','80','90','100']
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div<%=id%>'));
chart.draw(data, options);
clearChart();
}
</script>
</html>
Source: (StackOverflow)
Okay so i've been trying to do this for a couple of days and i am getting no where. So i have the following two images:
The First is a RPM Gauge
The Second image is a full white graphic representing rpm gauge being full:
I want to do the following:
- ask the user for an RPM input, if for example they enter 1.2 the gauge will fill up as follows:
I have the user input working i need help with the animation. Here is what i have tried:
- I have tried using PorterDuff but it also clips the gauge in the background not just the white bar
- I've tried splitting the image into little bitmaps and store them into arrays so that i can recall parts but this was slow and often crashed
- I made some progress by applying the Gauge first to the canvas then saving the canvas: canvas.save(); then clipping a path on the white image then restoring the canvas. However i do not know how to clip in a circular fashion starting from bottom left to a 180 degress to the bottom right (CW). Is this the best way?
I know there is probably an easier or more efficient way of doing this i just don't have a clue. Anyone with any good ideas?
*Note all images are PNG's
Thanks in advance!
Source: (StackOverflow)
This functionality is available for the Pie Chart via the plotOptions size parameter, however after inspecting the Highcharts API the size isn't available for the Gauge.
size API entry for Pie Chart
Considering the likeness of the two charts (being circular), I was hoping there would be a similar option but the gauge always fills some subset of the container div that I am unable to control. Has anyone else run into this issue or found a solution?
Source: (StackOverflow)
I am looking for a light weight chart and gauge library in java script to design web pages
of an embedded product.
I searched in Google but many were heavy and some libraries were needed be downloaded at run time.
Since mine is an embedded device I need a small size js library.
Thanks
Source: (StackOverflow)
I have created a desktop (winforms) and web based (asp.net) dashboard application that uses the Dundas circular and linear gauges.
e.g. 
I need to recreate these gauges using the xcode ui and objective c (or something that can be imported into a view based project)
Are there any frameworks available that can create these types of gauges? I had a look at core plot, but it doesn't have this type of functionality.
Source: (StackOverflow)
I have a problem with the Highcharts gauge.
Actually, it doesn't display and I have a JS error.
TypeError: $[b.defaultSeriesType] is not a constructor highcharts.js (line 159)
I have 3 tabs (using bootstrap/jquery) with pie in the two others and there is no problem with these ones.
I don't understand because I have just copied the example from the Highcharts website. Does anyone have any ideas what might be causing this?
EDIT :
Here is a part of the JS
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',
type : 'gauge',
plotBackgroundColor : null,
plotBackgroundImage : null,
plotBorderWidth : 0,
plotShadow : false
},
title : {
text : 'Speedometer'
},
pane : {
startAngle : -150,
endAngle : 150,
background : [
{
backgroundColor : {
linearGradient : {
x1 : 0,
y1 : 0,
x2 : 0,
y2 : 1
},
stops : [
[ 0, '#FFF' ],
[ 1, '#333' ] ]
},
borderWidth : 0,
outerRadius : '109%'
},
{
backgroundColor : {
linearGradient : {
x1 : 0,
y1 : 0,
x2 : 0,
y2 : 1
},
stops : [
[ 0, '#333' ],
[ 1, '#FFF' ] ]
},
borderWidth : 1,
outerRadius : '107%'
}, {
// default background
}, {
backgroundColor : '#DDD',
borderWidth : 0,
outerRadius : '105%',
innerRadius : '103%'
} ]
},
// the value axis
yAxis : {
min : 0,
max : 200,
minorTickInterval : 'auto',
minorTickWidth : 1,
minorTickLength : 10,
minorTickPosition : 'inside',
minorTickColor : '#666',
tickPixelInterval : 30,
tickWidth : 2,
tickPosition : 'inside',
tickLength : 10,
tickColor : '#666',
labels : {
step : 2,
rotation : 'auto'
},
title : {
text : 'km/h'
},
plotBands : [ {
from : 0,
to : 120,
color : '#55BF3B' // green
}, {
from : 120,
to : 160,
color : '#DDDF0D' // yellow
}, {
from : 160,
to : 200,
color : '#DF5353' // red
} ]
},
series : [ {
name : 'Speed',
data : [ 80 ],
tooltip : {
valueSuffix : ' km/h'
}
} ]
});
And in my html I have this
<div class="tab-pane fade" id="requetesSeconde">
<div id="container"
style="width: 400px; height: 300px; margin: 0 auto"></div>
</div>
Source: (StackOverflow)
I am currently writing a program that will automatically generate PDF files using reportlab (a python module). I would like to know if it would be possible to put google gauges in but not as an image, instead as a request sent to google which outputs the correct gauges based on inputs or whatever it may be.
sorry if this question is unclear but if anyone understands what I mean, any help is very appreciated.
thanks
Source: (StackOverflow)
Hi I am trying to display multiple gauges (highcharts) which moves as per the data getting updated in SQL Server. I am using JSON Data.
The problem which I am facing is that once I refresh the page it takes the last values in the database but not updating it. I need to refresh the page to see the change and that not what I really want.
Thats the code I am using
<script type="text/javascript">
$(function () {
$('#container1').highcharts({
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Pressure Meter'
},
pane: {
startAngle: -150,
endAngle: 150
},
yAxis: [{
min: 0,
max: 150,
lineColor: '#339',
tickColor: '#339',
minorTickColor: '#339',
offset: -25,
lineWidth: 2,
labels: {
distance: -20,
rotation: 'auto'
},
tickLength: 5,
minorTickLength: 5,
endOnTick: false
}, {
min: 0,
max: 25,
tickPosition: 'outside',
lineColor: '#933',
lineWidth: 2,
minorTickPosition: 'outside',
tickColor: '#933',
minorTickColor: '#933',
tickLength: 5,
minorTickLength: 5,
labels: {
distance: 12,
rotation: 'auto'
},
offset: -20,
endOnTick: false
}],
series: [{
name: 'Pressure',
data: [80],
dataLabels: {
formatter: function () {
var psi = this.y,
bar = Math.round(psi / 14.50);
return '<span style="color:#339">' + psi + ' psi</span><br/>' +
'<span style="color:#933">' + bar + ' bar</span>';
},
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#DDD'],
[1, '#FFF']
]
}
},
tooltip: {
valueSuffix: ' psi'
}
}]
},
// Add some life
function (chart1) {
setInterval(function () {
$.getJSON("s11.aspx", function (data1, textStatus1) {
$.each(data1, function (index1, wind1) {
var point1 = chart1.series[0].points[0],
newVal1 = wind1;
point1.update(newVal1);
});
});
}, 3000);
});
});
</script>
<%-- Flow Sensor Rig 1--%>
<script type="text/javascript">
$(function () {
$('#container2').highcharts({
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Flow Meter'
},
pane: {
startAngle: -150,
endAngle: 150
},
yAxis: [{
min: 0,
max: 100,
lineColor: '#339',
tickColor: '#339',
minorTickColor: '#339',
offset: -25,
lineWidth: 2,
labels: {
distance: -20,
rotation: 'auto'
},
tickLength: 5,
minorTickLength: 5,
endOnTick: false
}, {
min: 0,
max: 50,
tickPosition: 'outside',
lineColor: '#933',
lineWidth: 2,
minorTickPosition: 'outside',
tickColor: '#933',
minorTickColor: '#933',
tickLength: 5,
minorTickLength: 5,
labels: {
distance: 12,
rotation: 'auto'
},
offset: -20,
endOnTick: false
}],
series: [{
name: 'Pressure',
data: [80],
dataLabels: {
formatter: function () {
var GPM = this.y,
m3h = Math.round(GPM / 4.40);
return '<span style="color:#339">' + GPM + ' GPM</span><br/>' +
'<span style="color:#933">' + m3h + ' m3/hr</span>';
},
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#DDD'],
[1, '#FFF']
]
}
},
tooltip: {
valueSuffix: ' GPM'
}
}]
},
// Add some life
function (chart2) {
setInterval(function () {
$.getJSON("S12.aspx", function (data2, textStatus2) {
$.each(data2, function (index2, wind2) {
var point2 = chart.series[0].points[0],
newVal2 = wind2;
point2.update(newVal2);
});
});
}, 3000);
});
});
</script>
<%-- Temperature Sensor Rig 1--%>
<script type="text/javascript">
$(function () {
$('#container3').highcharts({
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Temperature Meter'
},
pane: {
startAngle: -150,
endAngle: 150
},
yAxis: [{
min: 0,
max: 100,
lineColor: '#339',
tickColor: '#339',
minorTickColor: '#339',
offset: -25,
lineWidth: 2,
labels: {
distance: -20,
rotation: 'auto'
},
tickLength: 5,
minorTickLength: 5,
endOnTick: false
}],
series: [{
name: 'Temperature',
data: [80],
dataLabels: {
formatter: function () {
var Degree = this.y;
return '<span style="color:#339">' + Degree + ' Degree</span><br/>';
},
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#DDD'],
[1, '#FFF']
]
}
},
tooltip: {
valueSuffix: ' Degree'
}
}]
},
// Add some life
function (chart3) {
setInterval(function () {
$.getJSON("s13.aspx", function (data3, textStatus3) {
$.each(data3, function (index3, wind3) {
var point3 = chart3.series[0].points[0],
newVal3 = wind3;
point3.update(newVal3);
});
});
}, 3000);
});
});
</script>
My JSON looks like an array
[1387204961992.4268,72]
I am not getting the dynamically updating gauge which I intend to show.
Source: (StackOverflow)
I am looking for an open source Thermometer that i can connect to a JSON or XML datasource and display this on my website.
The site is an asp.net site so javascript controls are not a problem.
My Googling didn't reveal very much at all.
Any suggestions are welcome.
Source: (StackOverflow)