score:0
Accepted answer
i did some modification on trial and error basis and got it working, actually i have to use eval
function which i was not using previously.
here is the answer
javascript
function requestdata() {
$.ajax({
url: 'default3.aspx',
datatype: 'json',
error: function (point) {
var series = chart.series[0],
shift = series.data.length > 50; // shift if the series is longer than 20
var values = eval(point);
chart.series[0].addpoint([values[0], values[1]], true, shift);
chart.series[1].addpoint([values[0], values[2]], true, shift);
chart.series[2].addpoint([values[0], values[3]], true, shift);
chart.series[3].addpoint([values[0], values[4]], true, shift);
chart.series[4].addpoint([values[0], values[5]], true, shift);
chart.series[5].addpoint([values[0], values[6]], true, shift);
chart.series[6].addpoint([values[0], values[7]], true, shift);
chart.series[7].addpoint([values[0], values[8]], true, shift);
chart.series[8].addpoint([values[0], values[9]], true, shift);
chart.series[9].addpoint([values[0], values[10]], true, shift);
// call it again after defined seconds
settimeout(requestdata, 5000);
},
success: function (point) {
var series = chart.series[0],
shift = series.data.length > 50; // shift if the series is longer than 20
// add the point
// chart.series[0].addpoint(eval(point), true, shift);
var values = eval(point);
chart.series[0].addpoint([values[0], values[1]], true, shift);
chart.series[1].addpoint([values[0], values[2]], true, shift);
chart.series[2].addpoint([values[0], values[3]], true, shift);
chart.series[3].addpoint([values[0], values[4]], true, shift);
chart.series[4].addpoint([values[0], values[5]], true, shift);
chart.series[5].addpoint([values[0], values[6]], true, shift);
chart.series[6].addpoint([values[0], values[7]], true, shift);
chart.series[7].addpoint([values[0], values[8]], true, shift);
chart.series[8].addpoint([values[0], values[9]], true, shift);
chart.series[9].addpoint([values[0], values[10]], true, shift);
// call it again after defined seconds
settimeout(requestdata, 5000);
},
cache: false
});
}
$(document).ready(function () {
chart = new highcharts.chart({
chart: {
renderto: 'container',
defaultseriestype: 'spline',
events: {
load: requestdata
}
},
title: {
text: 'sensor data vs. time'
},
xaxis: {
type: 'datetime',
tickpixelinterval: 150,
maxzoom: 20 * 1000
},
yaxis: {
minpadding: 0.2,
maxpadding: 0.2,
title: {
text: 'value',
margin: 80
}
},
series: [{
name: 'pressure 1 (psi)',
data: []
}, {
name: 'flow 1 (gpm)',
data: []
}, {
name:'temperature 1 (c)',
data: []
}, {
name: 'speed 1 (rpm)',
data: []
}, {
name: 'power 1 (kw)',
data: []
}, {
name:'pressure 2 (psi)',
data: []
}, {
name:'flow 2 (gpm)',
data: []
}, {
name:'temperature 2 (c)',
data: []
}, {
name: 'speed 2 (rpm)',
data: []
}, {
name: 'power 2 (kw)',
data: []
}]
});
});
server side code (c#)
public partial class default3 : system.web.ui.page
{
public datatable dt = new datatable();
public string data;
list<string> hidxcategories11 = new list<string>();
public string chartdata
{
get;
set;
}
protected void page_load(object sender, eventargs e)
{
getdata();
var epoch = new datetime(1970, 1, 1, 0, 0, 0, datetimekind.utc);
var timediff = datetime.now - new datetime(1970, 1, 1);
var totaltime = timediff.totalmilliseconds;
list<double> _data = new list<double>();
foreach (datarow row in dt.rows)
{
_data.add(totaltime);
_data.add((double)convert.todouble(row["s11"]));
_data.add((double)convert.todouble(row["s12"]));
_data.add((double)convert.todouble(row["s13"]));
_data.add((double)convert.todouble(row["s14"]));
_data.add((double)convert.todouble(row["s15"]));
_data.add((double)convert.todouble(row["s21"]));
_data.add((double)convert.todouble(row["s22"]));
_data.add((double)convert.todouble(row["s23"]));
_data.add((double)convert.todouble(row["s24"]));
_data.add((double)convert.todouble(row["s25"]));
}
javascriptserializer jss = new javascriptserializer();
chartdata = jss.serialize(_data);
response.write(chartdata);
}
private void getdata()
{
stringbuilder str = new stringbuilder();
sqlconnection con = new sqlconnection("data source=localhost\\sqlexpress;initial catalog=mydata;integrated security=sspi");
sqldataadapter adp = new sqldataadapter("select top 1 * from mytable order by id desc ", con);
adp.fill(dt);
}
}
html (.aspx) code
<script src="javascript/highcharts.js"></script>
<script src="javascript/exporting.js"></script>
<div id="container" style="min-width: 280px; height: 400px; margin: 0 auto"></div>
score:2
i advice replace this:
chart.series[0].addpoint([0, 1], true, true);
//other points as first
chart.series[9].addpoint([0, 10], true, true);
with
chart.series[0].addpoint([0, 1], false, true);
//other points as first
chart.series[9].addpoint([0, 10], true, true);
points cannot be added to the empty chart, dynamically, but you can set null value on data like here http://jsfiddle.net/g2tka/1/ or use addseries.
Source: stackoverflow.com
Related Query
- Live multiple series with highchart
- Highchart Treemap with Multiple series and should behave live heat map
- Creating a Highchart with multiple series from a JSON file
- Highchart multiple series with csv
- Highchart Line chart – data series with multiple axis - 2nd series placed in the middle of X axis
- How to have multiple highcharts with different series data in vuejs without repeating code
- Get point by ID from highchart with multiple series
- Highchart Color Issue for series with single data with multiple colors
- Highchart show/hide y axis with multiple associated series
- Highchart data series filled with different colors
- Highcharts with JSON data and multiple series
- Need stacked column chart with multiple series
- Display multiple time series with rCharts hPlot
- Highchart axis max with multiple axes
- Highcharts: update series on multiple charts with same data
- Multiple Series Timeline with HighCharts
- Highcharts not displaying series data for graph with multiple Y-axes
- Click events on highcharts with multiple series
- Highcharts async Server Loading with multiple series
- Showing multiple data with same x and y in highchart
- Highcharts, how to change hover bg color for series with multiple columns (categories)
- Highcharts problem with xAxis using multiple series
- Several Series with the same xAxis data in HighChart
- Highstock - How to add multiple series with JSON-Array
- Waterfall Highchart to start some of the columns in between the series with 0 y-axis
- How to hide empty column in column hightcharts with multiple series
- Change chart type and redraw with multiple series in Highcharts
- Highcharts shared tooltip between charts with multiple series and shared tooltip
- Highcharts show the same yAxis start and end value with multiple data series
- Problem with multiple labels in Highchart
More Query from same tag
- Hyperlink bar chart in Highcharter
- Gauge chart with steps of colors
- Highstock, how to offset all Y data from a serie on clicking range selector buttons
- Highcharts adding labels/columns with no data
- Datalabels is getting hidden outside the svg container in Sunburst Highchart
- High Charts Graph insert into PDF using FPDF library
- Highcharts prevent page on mobile Safari from moving up and down as I scroll horizontally through data points
- Highcharts, mixed stacked & non-stacked columns
- How can I customize a Highchart filename?
- Problems with range selector on highcharts (highstock)
- highcharts group series click event to get all data in catagory
- Highcharts - making a point clickable?
- Correctly plot time series in Highcharts/Highstock
- How to use existing SVG symbols (in a file) as markers in highcharts?
- Highcharts: Is it possible to have separate plotOptions for each series?
- Highcharts / Highstock - toggle yaxis from compare to value and back to compare
- Highcharts 5 tooltip colour with custom css class
- Hide segment of a line in Highcharts
- How to serialize JSON without outputting quotes around certain values
- Spiderweb chart with circular gridline interpolation: Label is seen very far away from Plotline
- Rails 3: Creating compact array for highcharts includes nil, but shouldn't
- I want to show all lines but just legend of one of them in highchart
- How to change text color of bubble on Highmap on select state?
- High Charts Breaking jQuery Across Rails App
- Highcharts Boxplot - box with lower, upper quartile and median is not displaying when min and max are null of a category
- How can I show vertical line in highchart as shown in below image?
- How to synchronize the From To date wrapper in Highstock?
- Highcharts-vue options as variable
- How to add markers to a grouped bar plot in Highcharts?
- unable to draw pie chart in angularjs using highcharts