This is a migrated thread and some comments may be shown as answers.

RadHtmlChart remember series toggles state

2 Answers 143 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 18 Aug 2014, 12:37 PM
Hi,

I have RadHtmlChart inside a RadDock. I've got a refresh button on the RadDock command that refreshes the grid. When you click on the chart series it toggles the bars visibility.

If the user hide a series then clicks the refresh button on the dock, the hidden series is shown again.

Is it possible to maintain the visibilty toggle state after a postback? Using the RadPersistenceFramework perhaps?

Thanks in advance,

Matt

2 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 20 Aug 2014, 12:49 PM

Hi Matt,

RadHtmlChart renders entirely on the client, so a postback that includes it is expected to reset its state (the series are only hidden via JavaScript and their state does not travel to the server).

The RadPersistenceFramework is designed to store certain settings between page visits rather than postbacks and I do not believe it would be suitable for such a task.

What I can suggest is using the legendItemClick event (http://docs.telerik.com/kendo-ui/api/dataviz/chart#events-legendItemClick) to store the hidden series in a hidden field that can survive postbacks and then when the page loads, to traverse the series and hide them again. If necessary, you can store those hidden field values in custom settings of a persistence manager.

Here is a small example I prepared for you:

the chart + hidden field container that makes the DOM traversal easier

<div class="chartHolder">
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="400px" Height="400px">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries Name="first">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="1" />
                        <telerik:CategorySeriesItem Y="2" />
                    </SeriesItems>
                </telerik:ColumnSeries>
                <telerik:ColumnSeries Name="second">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="3" />
                        <telerik:CategorySeriesItem Y="4" />
                    </SeriesItems>
                </telerik:ColumnSeries>
                <telerik:ColumnSeries Name="third">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="5" />
                        <telerik:CategorySeriesItem Y="6" />
                    </SeriesItems>
                </telerik:ColumnSeries>
                <telerik:ColumnSeries Name="fourth">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="7" />
                        <telerik:CategorySeriesItem Y="8" />
                    </SeriesItems>
                </telerik:ColumnSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    <asp:HiddenField runat="server" ID="HiddenField1" />
    <asp:Button ID="Button1" Text="postback" runat="server" />
</div>

the scripts that store the series state:

function pageLoad() {
    var chart = $find("<%=RadHtmlChart1.ClientID%>");
    chart._chartObject.bind("legendItemClick", function (args) { storeHiddenSeries(args, chart); });
    toggleSeriesVisibility(chart);
}
 
function storeHiddenSeries(eventArgs, chart) {
    setTimeout(function () {
        var hf = getHiddenFieldFromChart(chart);
        var theSeries = chart._chartObject.options.series;
        var hfVal = "";
        for (var i = 0; i < theSeries.length; i++) {
            if (theSeries[i].visible == false) {
                hfVal = hfVal + "|" + i;
            }
        }
        hf.val(hfVal);
    }, 0);
}
 
function toggleSeriesVisibility(chart) {
    var hf = getHiddenFieldFromChart(chart);
    var hfVal = hf.val();
        var hiddenSeriesIndexes = hfVal.split("|");
        for (var i = 0; i < hiddenSeriesIndexes.length; i++) {
            var seriesIndex = parseInt(hiddenSeriesIndexes[i]);
            if (seriesIndex) {
                chart._chartObject.options.series[seriesIndex].visible = false;
            }
        }
        chart.repaint();
}
 
function getHiddenFieldFromChart(chart) {
    return $telerik.$(chart.get_element()).closest(".chartHolder").find("input[type='hidden']").first();
}

You can use this as base and modify it to fit your concrete setup.

Regards,

Marin Bratanov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Matt
Top achievements
Rank 1
answered on 27 Aug 2014, 03:42 PM
Hi Martin,

Thanks a lot. That's fixed it. A very clever solution. However there is a minor bug in the javascript. In your solution, it would not 'toggle' the first series. I got it to work like this:

function storeHiddenSeries(eventArgs, chart)
        {
            setTimeout(function()
            {
                var hf = getHiddenFieldFromChart(chart);
                var theSeries = chart._chartObject.options.series;
                var hfVal = "";
                for (var i = 0; i < theSeries.length; i++)
                {
                    hfVal = hfVal + "|" + i + ":" + theSeries[i].visible;                  
                }
                hf.val(hfVal);
            }, 0);
        }
 
        function toggleSeriesVisibility(chart)
        {
            var hf = getHiddenFieldFromChart(chart);
            var hfVal = hf.val();
            var hiddenSeriesIndexes = hfVal.split("|");
            for (var i = 0; i < hiddenSeriesIndexes.length; i++)
            {
                var seriesValues = hiddenSeriesIndexes[i];
 
                if (seriesValues != "")
                {
                    var itemSettings = seriesValues.split(":");
 
                    var index = parseInt(itemSettings[0]);
                    var isVisible = itemSettings[1];
 
                    chart._chartObject.options.series[index].visible = (isVisible === 'true');
                }              
            }
            chart.repaint();
        }


Thanks again,
Matt
Tags
Chart (HTML5)
Asked by
Matt
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Matt
Top achievements
Rank 1
Share this question
or