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.