Seperate Datasource Data Navigator and Chart

[Rick]

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:

[Rick]

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) { }
            }
        }
    })
};

[Danail Vasilev]

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

[Rick]

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();
        }

[Rick]

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.

[Danail Vasilev]

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

[Rick]

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.

[Danail Vasilev]

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