live data in HtmlChart with multiple y axis

4 posts, 0 answers
  1. RamaKrishna P
    RamaKrishna P avatar
    7 posts
    Member since:
    Jun 2010

    Posted 22 Dec 2013 Link to this post


    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.......
  2.
  3. Stanimir
    Admin
    Stanimir avatar
    1654 posts

    Posted 26 Dec 2013 Link to this post

    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.
  5. RamaKrishna P
    RamaKrishna P avatar
    7 posts
    Member since:
    Jun 2010

    Posted 26 Dec 2013 Link to this post

    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)
  7. Stanimir
    Admin
    Stanimir avatar
    1654 posts

    Posted 27 Dec 2013 Link to this post

    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.
Back to Top