score:3
I think there is a bug or something in the visual studio 2012
. I just paste the entire code on the new aspx
page it it got working. I have not done anything else I just pasted the code on another page.
<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: 1000,
lineColor: '#339',
tickColor: '#339',
minorTickColor: '#339',
offset: -25,
lineWidth: 2,
labels: {
distance: -20,
rotation: 'auto'
},
tickLength: 5,
minorTickLength: 5,
endOnTick: false
}, {
min: 0,
max: 1000,
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 (chart) {
setInterval(function () {
$.getJSON("S12.aspx", function (data, textStatus) {
$.each(data, function (index, wind) {
var point = chart.series[0].points[0],
newVal = wind;
point.update(newVal);
});
});
}, 3000);
});
});
</script>
score:2
In order for the chart to update, the browser somehow needs to request the latest data from the server. There are two ways it can do this:
- A page refresh - the whole page is fetched again, with the latest data.
- An Ajax request. This makes a request for just the data, without re-loading the entire page.
I presume you would like to update the chart without reloading the entire page. In order do to this, you need to find out about making ajax requests using jquery.
The highcharts site has some resources which will help you (e.g. http://www.highcharts.com/docs/working-with-data/preprocessing-live-data). You need to learn how to make an ajax call in javascript, and use the returned data to update your chart. You will also need to write the server side part which returns the ajax data. The example given is in php, but it should be fairly straight forward to do something similar in asp.net.
score:3
Try to place this part of code
setInterval(function() {
$(function() {
$.getJSON('S12.aspx', function(data) {
$.each(data, function(val) {
if (val !== null)
{
var point = chart.series[0].points[0];
point.update(val);
}
});
});
})
},2000)
Inside callback chart, like here: http://www.highcharts.com/demo/gauge-speedometer
If you receive any errors,please attach.
Source: stackoverflow.com
Related Query
- Plot Highchart Gauge with JSON Data
- creating highchart with ajax json data
- HighChart Heatmap with JSON data
- Plot Highchart multiple series line chart using JSON data
- Issue with JSON data encoded from the server, not able to plot the chart
- Highchart : How to plot Stacked bar graph with line by below JSON respons
- How to redraw highchart series with json data value?
- How to plot multiple lines in a single graph using HighChart with JSON
- Issue with highchart data display when parsing JSON data
- HighChart with multple JSON api data
- new to highchart and stuck with type datetime , data not plot
- highchart activity gauge chart using json data from a file
- highchart bar using json with series and xAxis data
- Highchart tooltip with json data
- Data parsing from mysql into highchart with json
- Highcharts - Get and plot data with MySQLi + JSON (step by step)
- Reload chart data via JSON with Highcharts
- How to display highchart y axis with constistant data
- Highchart data series filled with different colors
- Highcharts with JSON data and multiple series
- Highcharts scatter plot with lots of data points running really slow
- time data with irregular intervals in HighChart
- Highcharts - Global configuration with common code and unique data & Headings
- Show more data on Gauge chart with Highcharts
- Formatting JSON Data with ColdFusion for HighCharts
- Showing multiple data with same x and y in highchart
- Highcharts with ajax and json data what am i doing wrong?
- Several Series with the same xAxis data in HighChart
- Adding data to a highchart chart using an array with IDs
- How can i get the json data with the specific between Year?
More Query from same tag
- Highcharts plotBands do not work with setExtremes function
- Highcharts stacked column don't show the stacked with min value
- highchart legend multiple position ? first legend left and 2nd legend right show in a chart
- Remove Zero From the HIGHCHART
- Highcharts column chart with two different scales
- Populate HighCharts Dataset in Javascript from ViewData Object .Net Core
- Highcharts.js - Event when any point is clicked
- Can highcharts stacked percentage column chart be less than 100%
- Chart not fill all the page in A4 format when printing. (highcharts)
- How to highlight a range in highstock?
- Highcharts data label getting cut off
- How to update Highcharts with live data?
- How to put shadow inside of bar chart in highcharts?
- Highcharts - Combine columns
- Highcharts Column Series Point Object Click Function
- Plot always starts at 0, highstock spline chart
- highcharts zero values results in graph half way instead at the bottom
- dynamic highcharts with json data
- remove strikethrough from highchart legend symbol
- Highcharts 8.0.4 is missing some x-axis labels
- Hide the highcharts tracker from image
- Highcharts Semi Donut Pie with Negative Percentage
- How to hide legends in highcharts in mobile view alone
- Parse HTTP Response that Contains Serialized Object with Functions
- Drilldown for grouped column chart in highcharts
- How do I make a Tornado Chart using Highcharts
- cant work live stock graph in android using json data url
- HighCharts display total of stacked column in labels
- Add data to a legend, with different format? Or should I use a label?
- Highcharts - How to remove drilldown link on empty items?