This is a migrated thread and some comments may be shown as answers.
live data in HtmlChart with multiple y axis
3 Answers 61 Views
This is a migrated thread and some comments may be shown as answers.
RamaKrishna P
Top achievements
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

Sort by
0
Stanimir
Telerik team
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.
0
RamaKrishna P
Top achievements
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)
0
Stanimir
Telerik team
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
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.
Asked by
RamaKrishna P
Top achievements
Rank 1
Answers by
Stanimir
Telerik team
RamaKrishna P
Top achievements
Rank 1
Share this question
or