Seperate Datasource Data Navigator and Chart

8 posts, 0 answers
  1. Rick
    Rick avatar
    23 posts
    Member since:
    Jul 2013

    Posted 22 Jun Link to this post

    Hi

    I have implemented an Ajax call when the chart zooms it gets more data at greater granularity the attached Js file (I have to screen shot it). This works fine.

    However is there a way of keeping the navigator not zoomed in:

  2. Rick
    Rick avatar
    23 posts
    Member since:
    Jul 2013

    Posted 22 Jun in reply to Rick Link to this post

    JS Code:

     

    function pageLoad() {
     
        var charts = document.getElementsByClassName("GSNRadGraph");
        if (charts != null) {
            for (var chartIndex = 0; chartIndex < charts.length; chartIndex++) {
                $find(charts[chartIndex].id)._chartObject.bind("selectEnd", OnSelectEnd);
            }
        }
    };
     
    function OnSelectEnd(e) {
        var id = e.sender._navigator.chart.wrapper[0].id;
        var args =
        {
            eventType: "chart_Select",
            id: id,
            from: e.from.format("yyyy-MM-dd HH:mm:ss"),
            to: e.to.format("yyyy-MM-dd HH:mm:ss")
        };
     
        var url = "\handles\GraphSelectionHandler.ashx?args=" + JSON.stringify(args);
     
        jQuery.ajax({
            url: url,
            cache: false,
            async: false,
            error: function (xhr, ajaxOptions, thrownError) {
                alert(url + " " + xhr.status + " " + thrownError);
            },
            success: function (newDataSource) {
     
              //  debugger;
                if (newDataSource != null) {
     
                    var dataObjects = eval('(' + newDataSource + ')');
     
                    var RadHtmlChart1 = $find(id);
     
                    // Get the current datasource
                    var datasource = eval(RadHtmlChart1.get_dataSourceJSON());
     
                    var obj = dataObjects[0];
                    var properties = [];
                    for (var prop in obj) {
                        if (typeof obj[prop] != 'function') {
                            properties.push(prop.toString());
                        }
                    }
     
                    // Set the new values       
                    for (var index = 0; index < datasource.length; index++) {
                        for (var p in properties) {
                            var val = properties[p];
                            if (val != "Date" && val != "ID") { // The navigator handles setting up the dates and no need to set Id
                                try {
                                    if (index < dataObjects.length) {
                                        if (dataObjects[index][val].length == 0) {
                                            datasource[index][val] = null;
                                        }
                                        else {
                                            datasource[index][val] = dataObjects[index][val];
                                        }
                                    }
                                    else {
                                        datasource[index][val] = null;
                                    }
                                }
                                catch (e) {
                                    alert(e);
                                }
                            }
                        }
                    }
     
                    try {
                        RadHtmlChart1.set_dataSource(datasource);
                        RadHtmlChart1.set_transitions(true);
                        RadHtmlChart1.repaint();
                    }
                    catch (e) { }
                }
            }
        })
    };

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 27 Jun Link to this post

    Hi Rick,

    If you would like to set a particular from/to value for the navigator you can use the corresponding API for that (i.e., the select method of the navigator).

    Regards,
    Danail Vasilev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Rick
    Rick avatar
    23 posts
    Member since:
    Jul 2013

    Posted 07 Jul in reply to Danail Vasilev Link to this post

    Im not sure how your answer helps me!
     
    The JavaScript above from your website gets more data on selection. This also affects the data navigator as it uses the same DataTable.
     
    My question is how can I give the Data Naviagtor a separate data source from the chart as the chart plots different data on zoom.
     
    This is how I set it up in the code behind in C#
     
    private static void Setup(  this RadHtmlChart chart,
                                        DataTable table,
                                        ChartLayout layout,
                                        string xAxisDataFormatString,
                                        string xLabel,
                                        string chartTitle = "")
            {
                chart.ChartTitle.Text = chartTitle;           
                chart.Transitions = true;
                chart.Legend.Appearance.Position = ChartLegendPosition.Bottom;
                chart.ClientIDMode = System.Web.UI.ClientIDMode.Static;                     
                chart.Pan.Enabled = true;
                chart.OnClientSeriesClicked = JSONHelper.ChartSeriesClick;
                 
                var xAxis = chart.PlotArea.XAxis;
                xAxis.Name = XAxisName;
                xAxis.DataLabelsField = XAxisColumnName;           
                xAxis.TitleAppearance.Text = xLabel;
                xAxis.LabelsAppearance.Visible = true;
                xAxis.MajorGridLines.Visible = false;
                xAxis.MinorGridLines.Visible = false;
                xAxis.LabelsAppearance.DataFormatString = xAxisDataFormatString;
                xAxis.LabelsAppearance.RotationAngle = 45;
                xAxis.Type = AxisType.Auto;
                xAxis.BaseUnit = DateTimeBaseUnit.Seconds;
                xAxis.EnableBaseUnitStepAuto = true;
                 
                xAxis.LabelsAppearance.TextStyle.FontSize = FontSize;
                xAxis.TitleAppearance.TextStyle.FontSize = FontSize;
     
                var scattter = chart.PlotArea.Series.OfType<ScatterLineSeries>().FirstOrDefault();
                // Stock layout does not support ScatterLineSeries
                if (layout == ChartLayout.Stock && scattter == null)
                {
                    chart.Layout = layout;
                    chart.Navigator.XAxis.Name = "nav" + XAxisName;
                    chart.Navigator.Visible = true;
                    chart.Navigator.SelectionHint.Visible = true;
                    chart.Legend.Appearance.Visible = true;
                    chart.Legend.Appearance.Position = ChartLegendPosition.Bottom;            
                    chart.Navigator.SelectionHint.DataFormatString = "From: {0:dd/MM/yy HH:mm:ss} To: {1:dd/MM/yy HH:mm:ss}";
                     
                    
                    foreach (var series in chart.PlotArea.Series.OfType<LineSeries>())
                    {
                        // If not visible then is event data and should not appear in navigator
                        if(series.VisibleInLegend)
                        {
                            if (!series.Name.EndsWith(ChartHelper.ParameterNote))
                            {
                                var s = new LineSeries()
                                {
                                    Name = series.Name,
                                    AxisName = series.AxisName,
                                    Visible = true,
                                    DataFieldY = series.DataFieldY,
                                };
     
                                foreach (SeriesItem item in series.SeriesItems)
                                {
                                    s.Items.Add(item.YValue);
                                }
                                chart.Navigator.Series.Add(s);
                            }
                        }
                    }
                }
                else
                {
                    chart.Layout = ChartLayout.Default;
                    chart.Zoom.Enabled = true;
                    chart.Zoom.MouseWheel.Enabled = true;
                    chart.Zoom.Selection.Enabled = true;               
                }
                 
                chart.DataSource = table;
                chart.DataBind();
            }
  6. Rick
    Rick avatar
    23 posts
    Member since:
    Jul 2013

    Posted 07 Jul in reply to Rick Link to this post

    On further investigation I think there is something wrong with the OnSelectEnd javascript.

    I turned this off and got the display I wanted, see attached image.

    However we can not return all the points stored. We could have 10,000 points thus we average in the code behind 500 points. On zoom we get more high def data.

  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 12 Jul Link to this post

    Hello Rick,

    Currently the RadHtmlChart with stock layout doesn't support binding to separate data sources its main plot area and the navigator. What I can suggest, however, is that you create a Kendo Stock Chart where you can try to set both data sources on the client-side. You can examine the following dojo example for such approaches:
        - http://dojo.telerik.com/@tsvetomir/icInu
        - http://dojo.telerik.com/@stamo/abaze

    In order to create Kendo Stock Chart, however, you should initially load the stock chart specific scripts:
       1) Either manually load the specific scripts via the script manager - http://docs.telerik.com/devtools/aspnet-ajax/general-information/performance/disabling-embedded-resources
       2) Or just place a hidden RadHtmlChart with Layout="Stock" on the page:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Layout="Stock" Style="visibility: hidden;">
    </telerik:RadHtmlChart>


    Regards,
    Danail Vasilev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  8. Rick
    Rick avatar
    23 posts
    Member since:
    Jul 2013

    Posted 12 Jul in reply to Danail Vasilev Link to this post

    Thank you for suggestion.

     

    Is not the RadHtmlChart a wrapper around the Kendo Stock Chart. If so are there plans to expose this functionality Server side.

  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 13 Jul Link to this post

    Hello Rick,

    Yes, the RadHtmlChart is actually an ASP.NET server-side wrapper of the Kendo UI DataViz Charts. Regarding the features I would suggest that you log your ideas about the controls in our public feedback portal - http://feedback.telerik.com/Project/108. If they get enough votes and approval from our management they may be implemented in the future.

    Regards,
    Danail Vasilev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017