Applies to: Nevron Chart for .NET
How to implement real-time Chart in ASP.NET application using AJAX?
Nevron Chart for .NET provides advanced supports ASP.NET AJAX.
The following example uses Nevron AJAX Engine Instant Callback and will help you create a real-time line chart (smooth line) with 4 series generated with random data. With the Nevron Instant Callback technology, the performance of the component can be increased several times, depending on the complexity of the page it is hosted within.
1. In Visual Studio, create a new ASP.NET Web Application
2. If the current page view is Source, switch to Design
3. Drag and drop the NChartControl on the page
4. Open the solution explorer and make sure to add references to the following Nevron assemblies: Nevron.Chart.dll; Nevron.Chart.WebForm.dll; Nevron.GraphicsGL.dll; Nevron.Presentation.dll; Nevron.System.dll; and Nevron.UI.WebForm.Controls.dll;
Note - you need to install the appropriate version of Nevron .NET Vision depending on the version of Visual Studio you work with!
5. From the Solution explorer select all Nevron references and set Copy Local property to True.
6. From the Solution explorer open the Web.config and make sure the following configuration exists in your web.config file:
<?xml version="1.0"?>
<configuration>
<system.web>
<httpHandlers>
<add verb="*" path="NevronChart.axd" type="Nevron.Chart.WebForm.NChartImageResourceHandler" validate="false"/>
<add verb="*" path="NevronScriptManager.axd" type="Nevron.UI.WebForm.Controls.NevronScriptManager" validate="false"/>
<add verb="GET,HEAD" path="NevronPrinting.axd" type="Nevron.UI.WebForm.Controls.NPrintPreviewHttpHandler" validate="false"/>
<add verb="GET,HEAD" path="NevronCustomTools.axd" type="Nevron.Examples.Chart.WebForm.NChartZoomHttpHandler" validate="false"/>
</httpHandlers>
</system.web>
<system.webServer>
<handlers>
<add name="NevronChart" preCondition="integratedMode" verb="*" path="NevronChart.axd" type="Nevron.Chart.WebForm.NChartImageResourceHandler"/>
<add name="NevronScriptManager" preCondition="integratedMode" verb="*" path="NevronScriptManager.axd" type="Nevron.UI.WebForm.Controls.NevronScriptManager"/>
</handlers>
</system.webServer>
</configuration>
In Visual Studio 2010 and .NET 4.0 the following configuration is required:
<?xml version="1.0"?>
<configuration>
<system.web>
<httpRuntime requestValidationMode="2.0" />
<compilation debug="true" targetFramework="4.0">
<httpHandlers>
<add verb="*" path="NevronChart.axd" type="Nevron.Chart.WebForm.NChartImageResourceHandler" validate="false"/>
<add verb="*" path="NevronScriptManager.axd" type="Nevron.UI.WebForm.Controls.NevronScriptManager" validate="false"/>
<add verb="GET,HEAD" path="NevronPrinting.axd" type="Nevron.UI.WebForm.Controls.NPrintPreviewHttpHandler" validate="false"/>
<add verb="GET,HEAD" path="NevronCustomTools.axd" type="Nevron.Examples.Chart.WebForm.NChartZoomHttpHandler" validate="false"/>
</httpHandlers>
</system.web>
<system.webServer>
<handlers>
<add name="NevronChart" preCondition="integratedMode" verb="*" path="NevronChart.axd" type="Nevron.Chart.WebForm.NChartImageResourceHandler"/>
<add name="NevronScriptManager" preCondition="integratedMode" verb="*" path="NevronScriptManager.axd" type="Nevron.UI.WebForm.Controls.NevronScriptManager"/>
</handlers>
</system.webServer>
</configuration>
7. From the Solution explorer open the Default.aspx Source and make sure the following configuration exists:
<%@ Register assembly="Nevron.Chart.WebForm, Version=11.1.17.12, Culture=neutral, PublicKeyToken=346753153ef91008" namespace="Nevron.Chart.WebForm" tagprefix="ncwc" %>
<form id="form1" runat="server">
<ncwc:NChartControl ID="NChartControl1" runat="server" Height="250px"
Width="450px" AjaxEnabled="True" AsyncAutoRefreshEnabled="True"
AsyncClickEventEnabled="False" AsyncRefreshInterval="200"
AsyncCallbackTimeout="10000" AsyncRequestWaitCursorEnabled="False"
AsyncRefreshEnabled="True">
</ncwc:NChartControl>
</form>
8. From the Solution explorer open the Default.aspx.cs (Default.aspx.vb) file and use the following code to programmatically create the chart:
[C#]
using System;
using System.Drawing;
using Nevron;
using Nevron.Chart;
using Nevron.Chart.WebForm;
using Nevron.Dom;
using Nevron.GraphicsCore;
using Nevron.UI.WebForm.Controls;
...
public partial class _Default : System.Web.UI.Page
{
#region Event Handlers
protected void Page_Load(object sender, System.EventArgs e)
{
NChartControl1.HttpHandlerCallback = new CustomHttpHandlerCallback();
if (NChartControl1.RequiresInitialization)
{
NChartControl1.BackgroundStyle.FrameStyle.Visible = false;
NChartControl1.Panels.Clear();
NStandardFrameStyle frame = NChartControl1.BackgroundStyle.FrameStyle as NStandardFrameStyle;
frame.InnerBorderWidth = new NLength(0);
// set a chart title
NLabel header = NChartControl1.Labels.AddFooter("Nevron Chart ASP.NET AJAX Instant Auto Refresh");
header.TextStyle.FontStyle = new NFontStyle("Verdana", 10, FontStyle.Regular);
header.TextStyle.FillStyle = new NColorFillStyle(Color.FromArgb(60, 90, 108));
header.ContentAlignment = ContentAlignment.BottomRight;
header.Location = new NPointL(new NLength(3, NRelativeUnit.ParentPercentage), new NLength(2, NRelativeUnit.ParentPercentage));
// setup Smooth Line chart
NCartesianChart chart = new NCartesianChart();
chart.Location = new NPointL(new NLength(3, NRelativeUnit.ParentPercentage), new NLength(3, NRelativeUnit.ParentPercentage));
chart.Size = new NSizeL(new NLength(100, NRelativeUnit.ParentPercentage), new NLength(100, NRelativeUnit.ParentPercentage));
chart.BoundsMode = BoundsMode.Stretch;
chart.Margins = new NMarginsL(5, 10, 5, 10);
chart.Projection.SetPredefinedProjection(PredefinedProjection.Orthogonal);
chart.LightModel.EnableLighting = false;
chart.Axis(StandardAxis.Depth).Visible = false;
chart.Wall(ChartWallType.Floor).Visible = false;
chart.Wall(ChartWallType.Left).Visible = false;
chart.DockMargins = new NMarginsL(
new NLength(5, NRelativeUnit.ParentPercentage),
new NLength(10, NRelativeUnit.ParentPercentage),
new NLength(10, NRelativeUnit.ParentPercentage),
new NLength(5, NRelativeUnit.ParentPercentage));
chart.BoundsMode = BoundsMode.Stretch;
// setup X axis
NAxis axis = chart.Axis(StandardAxis.PrimaryX);
NDateTimeScaleConfigurator dateTimeScale = new NDateTimeScaleConfigurator();
dateTimeScale.MajorGridStyle.LineStyle.Pattern = LinePattern.Dot;
dateTimeScale.MajorGridStyle.SetShowAtWall(ChartWallType.Back, true);
dateTimeScale.MajorGridStyle.SetShowAtWall(ChartWallType.Floor, false);
dateTimeScale.InnerMajorTickStyle.Length = new NLength(0);
dateTimeScale.MaxTickCount = 8;
dateTimeScale.MajorTickMode = MajorTickMode.AutoMaxCount;
dateTimeScale.AutoDateTimeUnits = new NDateTimeUnit[] { NDateTimeUnit.Second };
dateTimeScale.RoundToTickMin = false;
dateTimeScale.RoundToTickMax = false;
dateTimeScale.EnableUnitSensitiveFormatting = false;
dateTimeScale.LabelValueFormatter = new NDateTimeValueFormatter("T");
dateTimeScale.LabelStyle.TextStyle = new NTextStyle(new Font("Verdana", 8), Color.Black);
axis.ScaleConfigurator = dateTimeScale;
// setup Y axis
axis = chart.Axis(StandardAxis.PrimaryY);
NLinearScaleConfigurator linearScale = (NLinearScaleConfigurator)axis.ScaleConfigurator;
linearScale.MajorGridStyle.LineStyle.Pattern = LinePattern.Dot;
linearScale.MajorGridStyle.SetShowAtWall(ChartWallType.Left, false);
linearScale.InnerMajorTickStyle.Length = new NLength(0);
linearScale.LabelStyle.TextStyle = new NTextStyle(new Font("Verdana", 8), Color.Black);
NScaleStripStyle stripStyle = new NScaleStripStyle(new NColorFillStyle(Color.Beige), null, true, 0, 0, 1, 1);
stripStyle.Interlaced = true;
stripStyle.SetShowAtWall(ChartWallType.Back, true);
linearScale.StripStyles.Add(stripStyle);
NChartControl1.Panels.Add(chart);
// generate some data
NSmoothLineSeries SmoothLine1 = SetupSmoothLineSeries(chart);
NSmoothLineSeries SmoothLine2 = SetupSmoothLineSeries(chart);
NSmoothLineSeries SmoothLine3 = SetupSmoothLineSeries(chart);
NSmoothLineSeries SmoothLine4 = SetupSmoothLineSeries(chart);
GenerateNewData(SmoothLine1);
GenerateNewData(SmoothLine2);
GenerateNewData(SmoothLine3);
GenerateNewData(SmoothLine4);
NStyleSheet styleSheet = NStyleSheet.CreatePredefinedStyleSheet(PredefinedStyleSheet.Bright);
styleSheet.Apply(NChartControl1.Document);
}
}
#endregion
#region Implementation
private void GenerateNewData(NSmoothLineSeries SmoothLine)
{
GenerateDateTimeData(SmoothLine, 100);
UpdateIndicators(NChartControl1.Document);
}
private void GenerateDateTimeData(NSmoothLineSeries s, int nCount)
{
s.ClearDataPoints();
DateTime dateTime = DateTime.Now.AddMilliseconds(-nCount * NChartControl1.AsyncRefreshInterval);
double dPrev = 100;
double value;
NDataPoint dataPoint;
for (int i = 0; i < nCount; i++)
{
GenerateDataPoint(dPrev, new NRange1DD(50, 350), out value);
dataPoint = new NDataPoint(value);
s.AddDataPoint(dataPoint);
dPrev = (double)s.Values[s.Values.Count - 1];
dateTime = dateTime.AddMilliseconds(NChartControl1.AsyncRefreshInterval);
s.XValues.Add(dateTime);
}
}
protected static void UpdateIndicators(NDocument document)
{
//return;
NSmoothLineSeries SmoothLine = (NSmoothLineSeries)document.RootPanel.Charts[0].Series[0];
double min = (double)SmoothLine.Values[SmoothLine.Values.FindMinValue()];
double max = (double)SmoothLine.Values[SmoothLine.Values.FindMaxValue()];
int count = SmoothLine.Values.Count;
double sum = 0;
for (int i = 0; i < count; i++)
{
sum += (double)SmoothLine.Values[i];
}
}
private NSmoothLineSeries SetupSmoothLineSeries(NCartesianChart chart)
{
// setup the smooth line series
NSmoothLineSeries SmoothLine = (NSmoothLineSeries)chart.Series.Add(SeriesType.SmoothLine);
SmoothLine.Name = "Price";
SmoothLine.Legend.Mode = SeriesLegendMode.None;
SmoothLine.DataLabelStyle.Visible = false;
SmoothLine.FillStyle = new NColorFillStyle(Color.RoyalBlue);
SmoothLine.UseXValues = true;
return SmoothLine;
}
protected static void GenerateDataPoint(double dPrev, NRange1DD range, out double value)
{
value = dPrev;
bool upward = false;
if (dPrev <= range.Begin)
{
upward = true;
}
else
{
if (dPrev >= range.End)
{
upward = false;
}
else
{
upward = WebExamplesUtilities.rand.NextDouble() > 0.5;
}
}
if (upward)
{
// upward value change
value = value + (2 + (WebExamplesUtilities.rand.NextDouble() * 10));
}
else
{
// downward value change
value = value - (2 + (WebExamplesUtilities.rand.NextDouble() * 10));
}
}
#endregion
#region Nested Classes
[Serializable]
public class CustomHttpHandlerCallback : NHttpHandlerCallback
{
#region INHttpHandlerCallback Members
public override void OnAsyncRefresh(string webControlId, System.Web.HttpContext context, NStateObject state, EventArgs args)
{
NChartSessionStateObject chartState = state as NChartSessionStateObject;
NRootPanel rootPanel = chartState.Document.RootPanel;
for (int i = 0; i < chartState.Document.RootPanel.Charts[0].Series.Count; i++)
{
NSmoothLineSeries SmoothLine = (NSmoothLineSeries)chartState.Document.RootPanel.Charts[0].Series[i];
if (SmoothLine == null)
return;
if (SmoothLine.Values.Count == 0)
return;
double dPrev = (double)SmoothLine.Values[SmoothLine.Values.Count - 1];
double value;
GenerateDataPoint(dPrev, new NRange1DD(50, 350), out value);
SmoothLine.Values.RemoveAt(0);
SmoothLine.XValues.RemoveAt(0);
SmoothLine.Values.Add(value);
int nLast = (SmoothLine.XValues.Count > 0 ? SmoothLine.XValues.Count - 1 : 0);
double dLastValue = (double)SmoothLine.XValues[nLast];
SmoothLine.XValues.Add(DateTime.Now);
UpdateIndicators(chartState.Document);
}
}
#endregion
}
#endregion
}
public class WebExamplesUtilities
{
public static Random rand = new Random();
}
[VB.NET]
Imports Microsoft.VisualBasic
Imports System
Imports System.Drawing
Imports Nevron
Imports Nevron.Chart
Imports Nevron.Chart.WebForm
Imports Nevron.Dom
Imports Nevron.GraphicsCore
Imports Nevron.UI.WebForm.Controls
...
Public Partial Class _Default
Inherits System.Web.UI.Page
#Region "Event Handlers"
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
NChartControl1.HttpHandlerCallback = New CustomHttpHandlerCallback()
If NChartControl1.RequiresInitialization Then
NChartControl1.BackgroundStyle.FrameStyle.Visible = False
NChartControl1.Panels.Clear()
Dim frame As NStandardFrameStyle = TryCast(NChartControl1.BackgroundStyle.FrameStyle, NStandardFrameStyle)
frame.InnerBorderWidth = New NLength(0)
' set a chart title
Dim header As NLabel = NChartControl1.Labels.AddFooter("Nevron Chart ASP.NET AJAX Instant Auto Refresh")
header.TextStyle.FontStyle = New NFontStyle("Verdana", 10, FontStyle.Regular)
header.TextStyle.FillStyle = New NColorFillStyle(Color.FromArgb(60, 90, 108))
header.ContentAlignment = ContentAlignment.BottomRight
header.Location = New NPointL(New NLength(3, NRelativeUnit.ParentPercentage), New NLength(2, NRelativeUnit.ParentPercentage))
' setup Line chart
Dim chart As NCartesianChart = New NCartesianChart()
chart.Location = New NPointL(New NLength(3, NRelativeUnit.ParentPercentage), New NLength(3, NRelativeUnit.ParentPercentage))
chart.Size = New NSizeL(New NLength(100, NRelativeUnit.ParentPercentage), New NLength(100, NRelativeUnit.ParentPercentage))
chart.BoundsMode = BoundsMode.Stretch
chart.Margins = New NMarginsL(5, 10, 5, 10)
chart.Projection.SetPredefinedProjection(PredefinedProjection.Orthogonal)
chart.LightModel.EnableLighting = False
chart.Axis(StandardAxis.Depth).Visible = False
chart.Wall(ChartWallType.Floor).Visible = False
chart.Wall(ChartWallType.Left).Visible = False
chart.DockMargins = New NMarginsL(New NLength(5, NRelativeUnit.ParentPercentage), New NLength(10, NRelativeUnit.ParentPercentage), New NLength(10, NRelativeUnit.ParentPercentage), New NLength(5, NRelativeUnit.ParentPercentage))
chart.BoundsMode = BoundsMode.Stretch
' setup X axis
Dim axis As NAxis = chart.Axis(StandardAxis.PrimaryX)
Dim dateTimeScale As NDateTimeScaleConfigurator = New NDateTimeScaleConfigurator()
dateTimeScale.MajorGridStyle.LineStyle.Pattern = LinePattern.Dot
dateTimeScale.MajorGridStyle.SetShowAtWall(ChartWallType.Back, True)
dateTimeScale.MajorGridStyle.SetShowAtWall(ChartWallType.Floor, False)
dateTimeScale.InnerMajorTickStyle.Length = New NLength(0)
dateTimeScale.MaxTickCount = 8
dateTimeScale.MajorTickMode = MajorTickMode.AutoMaxCount
dateTimeScale.AutoDateTimeUnits = New NDateTimeUnit() { NDateTimeUnit.Second }
dateTimeScale.RoundToTickMin = False
dateTimeScale.RoundToTickMax = False
dateTimeScale.EnableUnitSensitiveFormatting = False
dateTimeScale.LabelValueFormatter = New NDateTimeValueFormatter("T")
dateTimeScale.LabelStyle.TextStyle = New NTextStyle(New Font("Verdana", 8), Color.Black)
axis.ScaleConfigurator = dateTimeScale
' setup Y axis
axis = chart.Axis(StandardAxis.PrimaryY)
Dim linearScale As NLinearScaleConfigurator = CType(axis.ScaleConfigurator, NLinearScaleConfigurator)
linearScale.MajorGridStyle.LineStyle.Pattern = LinePattern.Dot
linearScale.MajorGridStyle.SetShowAtWall(ChartWallType.Left, False)
linearScale.InnerMajorTickStyle.Length = New NLength(0)
linearScale.LabelStyle.TextStyle = New NTextStyle(New Font("Verdana", 8), Color.Black)
Dim stripStyle As NScaleStripStyle = New NScaleStripStyle(New NColorFillStyle(Color.Beige), Nothing, True, 0, 0, 1, 1)
stripStyle.Interlaced = True
stripStyle.SetShowAtWall(ChartWallType.Back, True)
linearScale.StripStyles.Add(stripStyle)
NChartControl1.Panels.Add(chart)
' generate some data
Dim SmoothLine1 As NSmoothLineSeries = SetupSmoothLineSeries(chart)
Dim SmoothLine2 As NSmoothLineSeries = SetupSmoothLineSeries(chart)
Dim SmoothLine3 As NSmoothLineSeries = SetupSmoothLineSeries(chart)
Dim SmoothLine4 As NSmoothLineSeries = SetupSmoothLineSeries(chart)
GenerateNewData(SmoothLine1)
GenerateNewData(SmoothLine2)
GenerateNewData(SmoothLine3)
GenerateNewData(SmoothLine4)
Dim styleSheet As NStyleSheet = NStyleSheet.CreatePredefinedStyleSheet(PredefinedStyleSheet.Bright)
styleSheet.Apply(NChartControl1.Document)
End If
End Sub
#End Region
#Region "Implementation"
Private Sub GenerateNewData(ByVal SmoothLine As NSmoothLineSeries)
GenerateDateTimeData(SmoothLine, 100)
UpdateIndicators(NChartControl1.Document)
End Sub
Private Sub GenerateDateTimeData(ByVal s As NSmoothLineSeries, ByVal nCount As Integer)
s.ClearDataPoints()
Dim dateTime As DateTime = DateTime.Now.AddMilliseconds(-nCount * NChartControl1.AsyncRefreshInterval)
Dim dPrev As Double = 100
Dim value As Double
Dim dataPoint As NDataPoint
Dim i As Integer = 0
Do While i < nCount
GenerateDataPoint(dPrev, New NRange1DD(50, 350), value)
dataPoint = New NDataPoint(value)
s.AddDataPoint(dataPoint)
dPrev = CDbl(s.Values(s.Values.Count - 1))
dateTime = dateTime.AddMilliseconds(NChartControl1.AsyncRefreshInterval)
s.XValues.Add(dateTime)
i += 1
Loop
End Sub
Protected Shared Sub UpdateIndicators(ByVal document As NDocument)
'return;
Dim SmoothLine As NSmoothLineSeries = CType(document.RootPanel.Charts(0).Series(0), NSmoothLineSeries)
Dim min As Double = CDbl(SmoothLine.Values(SmoothLine.Values.FindMinValue()))
Dim max As Double = CDbl(SmoothLine.Values(SmoothLine.Values.FindMaxValue()))
Dim count As Integer = SmoothLine.Values.Count
Dim sum As Double = 0
Dim i As Integer = 0
Do While i < count
sum += CDbl(SmoothLine.Values(i))
i += 1
Loop
End Sub
Private Function SetupSmoothLineSeries(ByVal chart As NCartesianChart) As NSmoothLineSeries
' setup the line series
Dim SmoothLine As NSmoothLineSeries = CType(chart.Series.Add(SeriesType.SmoothLine), NSmoothLineSeries)
SmoothLine.Name = "Price"
SmoothLine.Legend.Mode = SeriesLegendMode.None
SmoothLine.DataLabelStyle.Visible = False
SmoothLine.FillStyle = New NColorFillStyle(Color.RoyalBlue)
SmoothLine.UseXValues = True
Return SmoothLine
End Function
Protected Shared Sub GenerateDataPoint(ByVal dPrev As Double, ByVal range As NRange1DD, <System.Runtime.InteropServices.Out()> ByRef value As Double)
value = dPrev
Dim upward As Boolean = False
If dPrev <= range.Begin Then
upward = True
Else
If dPrev >= range.End Then
upward = False
Else
upward = WebExamplesUtilities.rand.NextDouble() > 0.5
End If
End If
If upward Then
' upward value change
value = value + (2 + (WebExamplesUtilities.rand.NextDouble() * 10))
Else
' downward value change
value = value - (2 + (WebExamplesUtilities.rand.NextDouble() * 10))
End If
End Sub
#End Region
#Region "Nested Classes"
<Serializable> _
Public Class CustomHttpHandlerCallback
Inherits NHttpHandlerCallback
#Region "INHttpHandlerCallback Members"
Public Overrides Sub OnAsyncRefresh(ByVal webControlId As String, ByVal context As System.Web.HttpContext, ByVal state As NStateObject, ByVal args As EventArgs)
Dim chartState As NChartSessionStateObject = TryCast(state, NChartSessionStateObject)
Dim rootPanel As NRootPanel = chartState.Document.RootPanel
Dim i As Integer = 0
Do While i < chartState.Document.RootPanel.Charts(0).Series.Count
Dim SmoothLine As NSmoothLineSeries = CType(chartState.Document.RootPanel.Charts(0).Series(i), NSmoothLineSeries)
If SmoothLine Is Nothing Then
Return
End If
If SmoothLine.Values.Count = 0 Then
Return
End If
Dim dPrev As Double = CDbl(SmoothLine.Values(SmoothLine.Values.Count - 1))
Dim value As Double
GenerateDataPoint(dPrev, New NRange1DD(50, 350), value)
SmoothLine.Values.RemoveAt(0)
SmoothLine.XValues.RemoveAt(0)
SmoothLine.Values.Add(value)
Dim nLast As Integer
If SmoothLine.XValues.Count > 0 Then
nLast = (SmoothLine.XValues.Count - 1)
Else
nLast = (0)
End If
Dim dLastValue As Double = CDbl(SmoothLine.XValues(nLast))
SmoothLine.XValues.Add(DateTime.Now)
UpdateIndicators(chartState.Document)
i += 1
Loop
End Sub
#End Region
End Class
#End Region
End Class
Public Class WebExamplesUtilities
Public Shared rand As Random = New Random()
End Class
Related ASP.NET AJAX Examples:
Nevron Chart for .NET: http://examplesaspnetchart.nevron.com/
Contents > AJAX
For more details, take a look at the Online Documentation
Framework > Web FormsArticle ID: 175, Created On: 1/31/2011, Modified: 2/7/2011