[Solved] Change series type of a paneChart

[Nikhil]

Hello,

I'm having trouble changing the series type of just one pane in a paneChart. I have the documentation for changing the series type and can achieve that fine, but I'm having trouble accessing just one pane.

<div id="chart1" data-win-control="Telerik.UI.RadChart" data-win-options="{
            dataSource: {
                data: [
                    {value: 10},
                    {value: 20},
                    {value: 30},
                    {value: 40},
                    {value: 50}
                ]},
            series: [
                {
                    field: 'value'
                }]
        }">
</div>

var radioButtonGroup = document.getElementById("radioButtonGroup");
var inputs = radioButtonGroup.getElementsByTagName("input");
var radioButtons = Array.prototype.slice.call(inputs);
//attach the click event on each of the radio buttons
radioButtons.forEach(function (item) {
    item.addEventListener("click", function () {
        var chart = document.getElementById("chart1").winControl;
        //clear the chart series
        chart.series = [];
        var newSeries;
        //based on the selected button, instantiate new series
        switch (this.value) {
            case "bar":
                newSeries = new Telerik.UI.Chart.BarSeries();
                break;
            case "column":
                newSeries = new Telerik.UI.Chart.ColumnSeries();
                break;
            default: newSeries = null;
        }
        if (newSeries) {
            //assign a field to the series and add them to the chart
            newSeries.field = "value";
            chart.series.push(newSeries);
            chart.refresh();
        }
    });
});

[Tsvetina]

Hello Nikhil,

Can you please specify where exactly is your difficulty with replacing one series from a chart with panes?

You can find and remove the series in question from the chart.series array and then push a new series object that defines a valueAxis name in addition to the field name. The series will be associated with a pane using its assigned value axis. You don't need to reference the panes in your code.

Is this the approach you follow and are there problems with it on your side?

Regards,
Tsvetina
Telerik

[Nikhil]

Ok, I was removing the entire series and then trying to push everything again, defining the panes again. I didn't realize the chart would pick up the axis names again on its own. It works now with the following.

<div id="chart1" data-win-control="Telerik.UI.RadChart" data-win-options="{
            dataSource: {
                data: [
                    {value: 10},
                    {value: 20},
                    {value: 30},
                    {value: 40},
                    {value: 50}
                ]},
            series: [
                {
                    name: "Top",
                    field: 'value',
                    axis: "top"
                },
                {
                    name: "Bottom",
                    field: 'value2',
                    axis: 'bottom'
                }],
            valueAxis: [{
                name: "top",
                pane: "topPane",
            }, {
                name: "bottom",
                pane: "bottomPane",
            }],
            panes: [
                {
                    name: "topPane",
                    height: 350
                },
                {
                    name: "bottomPane",
                    height: 100
                }
            }];
        }">
</div>

var radioButtonGroup = document.getElementById("radioButtonGroup");
var inputs = radioButtonGroup.getElementsByTagName("input");
var radioButtons = Array.prototype.slice.call(inputs);
//attach the click event on each of the radio buttons
radioButtons.forEach(function (item) {
    item.addEventListener("click", function () {
        var chart = document.getElementById("chart1").winControl;
        //clear the chart series
        chart.series.pop(); // ** The series I want to remove happens to be the last one, so I just remove that. I could also iterate through chart.series[j].name and check each one to find the series name I'm looking for...that would be more reliable. **
        var newSeries;
        //based on the selected button, instantiate new series
        switch (this.value) {
            case "bar":
                newSeries = new Telerik.UI.Chart.BarSeries();
                break;
            case "column":
                newSeries = new Telerik.UI.Chart.ColumnSeries();
                break;
            default: newSeries = null;
        }
        if (newSeries) {
            //assign a field to the series and add them to the chart
            newSeries.field = "value";
            newSeries.name = "top"; // ** Added this **
            newSeries.valueAxis = "top"; // ** Added this **
            // ** This works fine...are there any other values of the series I SHOULD be pushing here in addition to the .name? **
            // ** How is this working without pushing newSeries.axis = "top" ? Is pushing newSeries.axis = "top" interchangeable with pushing newSeries.valueAxis = "top"? **
            chart.series.push(newSeries);
            chart.refresh();
        }
    });
});

It works, but I guess now my two questions are: 

1) ** This works fine...are there any other values of the series I SHOULD be pushing here in addition to the .name? **

2) ** Specifically, how is this working without pushing newSeries.axis = "top" ? Is pushing newSeries.axis = "top" interchangeable with pushing newSeries.valueAxis = "top"? **

Initially the series is assigned to an axis with the axis: value, not the valueAxis: value.

            series: [

                {  

                    name: "Top",

                    field: 'value',

                    axis: "top"

                },

                {

                    name: "Bottom",

                    field: 'value2',

                    axis: 'bottom'

                }],

Thanks,
Nikhil

[Tsvetina]

Hello Nikhil,

I might have misled you by using valueAxis in my explanation. As you pointed out, the correct option name is axis. I assume it worked for you because the axis you are assigning is the first one, which the series in question would use by default, even when you do not set it. However, to be safe, set newSeries.axis = "top" (and remove  newSeries.valueAxis = "top").

As for other names, as long as you do not want to further customize the series, these settings should be enough. 



Regards,
Tsvetina
Telerik

[Nikhil]

Ah, ok got it. Thank you!

Nikhil