Dynamically add series with separate Y axis to line chart

[Ivan Janjic]

Hello,

I need to add series dynamically to line chart but with separate vertical axis for each added series. I managed to add series dynamically, but every series is using the same vertical axis. Is it possible for ASP.NET MVC Chart control to add Y axis dynamically when new series is added, like on the attached image? I'm loading series data dynamically from web API controller and adding series through javascript using:

$("#mychart").ejChart('instance').model.series.push(newSeries);

New series is created like this:

function createNewSeries(data, name) {

return {

dataSource: data,

xName: "TimeStamp",

yName: "Value",

name: name,

type: "line",

enableAnimation: true

       };

    }

Image:Multiple vertical axes

[Saravana Kumar Kanagavel]

Hi Ivan, 

 

Thanks for contacting Syncfusion Support. 

 

We have analyzed your query and prepared a sample based on your requirement. In the sample, we have initially render the chart with one series used by default primaryYAxis. Then we have added the new series with new SecondayYAxis dynamically on button click event. 

 

Please find the code snippet below 

 

[JS] 

function addNewSeries() { 

        // Create new secondary y Axis  

        var newAxis = { 

            majorGridLines: { visible: false }, 

            orientation: 'Vertical', 

            opposedPosition: true, 

            axisLine: { visible: false }, 

            rangePadding: 'normal', 

            name: 'yAxis', 

            labelFormat: '${value}', 

            title: { text: "Total Transactions" } 

        }; 

        // Getting the chart instance 

        var chart = $("#container").ejChart("instance"); 

        // Create the new series with data 

        var newSeries = { 

            name: "Mango", 

            dataSource: GetDateTimeData(new Date("1/1/2009"), new Date("10/1/2009")).Open, 

            xName: "XValue", 

            type:"line", 

            fill: "#a0f441", 

            yName: "YValue", 

            yAxisName: "yAxis" 

        } 

        // Push the new series and axes in chart instance 

        chart.model.series.push(newSeries); 

        chart.model.axes.push(newAxis); 

        // Redrawing the chart once 

        chart.redraw(); 

    } 

 

Kindly find the sample from the below location. 

Sample Link :  http://www.syncfusion.com/downloads/support/forum/133511/ze/Sample-1702523000 

  

Please find the output of the sample below 

 

 

 

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K. 

 

[Ivan Janjic]

Thank you for the quick response and working example.

I did the same in my code but it didn't work. The reason was that I was also assigning axis name dynamically and it contained space in it. Removing space from axis name and your example, resolved my problem.

Kind regards,

Ivan

[Saravana Kumar Kanagavel]

Hi Ivan, 

 

Thanks for your update. 

 

We have analyzed your query and tried to reproduce the reported issue in our sample but not able to reproduce the issue at our end. In the sample , we have dynamically add the new axis with title text which is containing space between two words. Thus, Chart rendered properly with new axis title. 

 

And we have reattached the sample to reproduce the issue for you reference and attached in the below location. 

 

Sample Link : http://www.syncfusion.com/downloads/support/forum/133511/ze/Sample-1576932455 

  

Please find the output of chart before create the new axis below 

 

 

Please find the output after added new axis dynamically from the below 

 

 

 

If you still face any concern, kindly revert us with issue reproducing runnable sample or modified the attached sample along with replication steps. This will be helpful to find the issue and to provide the exact solution sooner. 

 

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K. 

 

[Ivan Janjic]

Hello,

the problem occurs not when the axis title text has spaces in it but when axis name property has it (in your case it is 'Mango'). Also, I found out that the same problems occurs when name property contains underscores.

If that's the case, and axis name contains any of the before mentioned characters, I'm getting this javascript error in console and the chart is not rendered.

ej.web.all.min.js:10 Uncaught TypeError: Cannot read property '_validCross' of undefined

    at ej.EjAxisRenderer._drawYAxisGridLine (ej.web.all.min.js:10)

    at ej.EjAxisRenderer._drawGridLines (ej.web.all.min.js:10)

    at Object.draw (ej.web.all.min.js:10)

    at Object.bindTo (ej.web.all.min.js:10)

    at Object.redraw (ej.web.all.min.js:10)

    at addFirstSeries (Index:293)

    at t.DataManager.<anonymous> (Index:327)

    at i (jquery-3.1.1.min.js:2)

    at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2)

    at t.DataManager.<anonymous> (ej.web.all.min.js:10)

Kind regards,

Ivan

[Saravana Kumar Kanagavel]

Hi Ivan, 

 

Sorry for the inconvenience.  

 

We have analyzed this and able to reproduce the reported issue at our end. So we have logged bug report for this and fix for this will be included in our upcoming Essential Studio 2017 Volume 4 Service Pack 1 release which is expect to be rollout on end of December, 2017. 

 

Regards, 

Saravana Kumar K.