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
- How can I configure the legend with a specific height in highstock?
- Use same directive in same view and bind different data
- Handle legends overflow in Highstocks
- Adding different style to a series in legend in Highcharts
- Highcharts on click show larger graph
- Highcharts Pie Chart.How to set labels in two lines
- Align date ticks on x axis
- HighCharts – Horizontal chart: moving bars down, make space for labels above them
- How to hide empty stacked columns in categories in Highcharts?
- In Highcharts can legends be shown as dropdown or option of select all deselect all legends?
- Remove the categories text under the bars on Highcharts chart
- Removing the circle around a spiderweb chart in Highcahrts
- Manage multiple highchart charts in a single webpage
- Highcharts Spiderweb after Gauge causes strange behavior
- How do you set the stack order of the series in a stacked bar chart?
- GWT:creat a simple meteogram in GWTHighCharts
- highcharts drilldown not working
- How do I group number of SharePoint items by status and chart in Highcharts?
- Highcharts box plot chart customization
- Customizing the colors of individual series in HighCharts
- how to use object as series for Highcharts
- How to Change the color of the text in donut chart
- Highcharts chartWidth no longer works with chart.getSVG()
- Highcharts: Dual axis line and column with multiple series
- Highchart click response time
- how to make custom directive or pass variable in directive in angular js
- Highcharts behaviour in mobile browser (scrolling the whole graph not the specific point)
- Using Highcharts, I want to overlay a line showing the optimal value for a bar
- Highcharts I've lost my drilldown scrollbar
- ASP.NET WebRequest to Highcharts export server