RamaKrishna P
Top achievements
Rank 1
Rank 1
RamaKrishna P
asked on 23 Dec 2013, 05:02 AM
hi
i want to display live data in RadHtmlChart for every second with time axis(programmatically).can u Pls send me the example like below image.at present we are using RadChart to display charts but it is showing error like (Error loading RadChartImage?).thats why we want to use Radhtmlchart for better performance.
i am updating htmlchart for every second do i need to add series every time.
Thank you.......
3 Answers, 1 is accepted
0
Hi,
I prepared a small sample which you can use as reference to implement your solution:
You can also find helpful information in the following online resources:
HtmlChart - Client-side Binding
HtmlChart - Scatter Line Chart
ScatterLine chart
Date axis
Formatting Dates
Regards,
Stanimir
Telerik
I prepared a small sample which you can use as reference to implement your solution:
<telerik:RadHtmlChart Width="500" runat="server" ID="RadHtmlChart1" Transitions="false"><PlotArea> <Series> <telerik:ScatterLineSeries DataFieldY="value" DataFieldX="axisXValue" > <LabelsAppearance Position="Left" DataFormatString="{1}"></LabelsAppearance> <TooltipsAppearance DataFormatString="{1}"></TooltipsAppearance> </telerik:ScatterLineSeries> </Series> <YAxis MaxValue="250" Step="50" Color="Orange" Width="3" MinValue="0"> </YAxis> <AdditionalYAxes> <telerik:AxisY MaxValue="7" Step="1" MinValue="0" Color="Red" Width="3"></telerik:AxisY> </AdditionalYAxes> <XAxis Type="Date" BaseUnit="seconds"> </XAxis></PlotArea></telerik:RadHtmlChart><script type="text/javascript">var startDate = new Date();function UpdateChart() { var chart = $find("RadHtmlChart1"), endDate = new Date(+startDate + 3000); chart._chartObject.options.xAxis.min = startDate; chart._chartObject.options.xAxis.max = endDate; chart._chartObject.options.xAxis.axisCrossingValue = [startDate, endDate]; //here you should implement your logic on creating the data source chart.set_dataSource([ { value: 190, axisXValue: startDate }, { value: 180, axisXValue: new Date(+startDate + 1000) }, { value: 205, axisXValue: new Date(+startDate + 2000) }, { value: Math.floor(Math.random() * (210 - 140 + 1) + 140), axisXValue: endDate } ]); chart.repaint();}Sys.Application.add_load(function () { UpdateChart(); window.setInterval(function () { startDate = new Date(+startDate + 1000); UpdateChart(); }, 1000);});</script>You can also find helpful information in the following online resources:
HtmlChart - Client-side Binding
HtmlChart - Scatter Line Chart
ScatterLine chart
Date axis
Formatting Dates
Regards,
Stanimir
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
RamaKrishna P
Top achievements
Rank 1
Rank 1
answered on 27 Dec 2013, 04:11 AM
hi
we are using ASP.net Ajax Q3 2013 SP1 BaseUnit="seconds" is not working it is showing Error.we want to create chart programatically in code(vb.net)
we are using ASP.net Ajax Q3 2013 SP1 BaseUnit="seconds" is not working it is showing Error.we want to create chart programatically in code(vb.net)
0
Hi RamaKrishna,
Indeed the BaseUnit="seconds" is implemented for the next official release of RadControls for ASP.NET AJAX. So in mean time you can update the javascript, which i provided and add the following line:
Here is the entire script:
Regards,
Stanimir
Telerik
Indeed the BaseUnit="seconds" is implemented for the next official release of RadControls for ASP.NET AJAX. So in mean time you can update the javascript, which i provided and add the following line:
chart._chartObject.options.xAxis.baseUnit = "seconds";Here is the entire script:
var startDate = new Date();function UpdateChart() { var chart = $find("RadHtmlChart1"), endDate = new Date(+startDate + 3000); chart._chartObject.options.xAxis.min = startDate; chart._chartObject.options.xAxis.max = endDate; chart._chartObject.options.xAxis.baseUnit = "seconds"; chart._chartObject.options.xAxis.axisCrossingValue = [startDate, endDate]; //here you should implement your logic on creating the data source chart.set_dataSource([ { value: 190, axisXValue: startDate }, { value: 180, axisXValue: new Date(+startDate + 1000) }, { value: 205, axisXValue: new Date(+startDate + 2000) }, { value: Math.floor(Math.random() * (210 - 140 + 1) + 140), axisXValue: endDate } ]); chart.repaint();}Sys.Application.add_load(function () { UpdateChart(); window.setInterval(function () { startDate = new Date(+startDate + 1000); UpdateChart(); }, 1000);});Regards,
Stanimir
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.