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
- Highcharts x-axis label
- Using datetime axes, but with changing scales
- Highcharts draggable points - prevent hidding tooltip
- Is it possible to change background color of highcharts?
- Why isn't my spline chart showing when using combo charts?
- Select custom date range on highstock control
- Highcharts Sync charts horizontally
- HIghcharts, Selecting a second Point within the Point.select event
- Javascript+Highcharts: Substituting series.data for my own
- Highcharts pie/bar combo. How to load json and how are the data series expressed
- How to match up category labels with multiple series?
- Stacked Bar Highcharts how to show the values
- How do I auto scale an axis with a max height in highcharts?
- how to customize the tooltip in solid gauge in highchart
- Decimals on yAxis are not being displayed, even if that same code works on highcharts jsfiddle
- Append React Highchart with Annotations after initial load of chart
- How to use 'compare' for all series except one
- Highcharts navigator not working with data set
- Dynamic pointStart in HighCharts ( RoR)
- Is it possible use size (z) argument with RHighcharter and a categorical Y-axis?
- Adding information to xAxis - r shiny
- HighCharts: Custom button next to legend inside chart area
- Highcharts numeric x-axis
- Highchart : Json Array For ToolTip
- Highcharts legend not showing series names
- Highcharts - drill down to multiple series
- Highcharts plotOptions.area.depth does not exist in latest version
- highchart desing issue regarding linerange on the chart
- Highcharts won't slant data on a bar chart
- Highstock - how to shift the X axis