This is a migrated thread and some comments may be shown as answers.

live data in HtmlChart with multiple y axis

3 Answers 195 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

RamaKrishna P asked on 23 Dec 2013, 05:02 AM

Live-ChartImage.png

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

answered on 26 Dec 2013, 09:14 AM

Hi,

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.

answered on 27 Dec 2013, 07:37 AM

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:

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