We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to send XAxis, YAxis and Series data from Controller to View?

Thread ID:

Created:

Updated:

Platform:

Replies:

119931 Aug 15,2015 07:47 AM UTC Aug 17,2015 04:25 PM UTC ASP.NET MVC 2
loading
Tags: Chart
beeseda
Asked On August 15, 2015 07:47 AM UTC

Hi,
I want to show dynamic number of charts in a page and each chart has its own xAxis, yAxis and multiple series data based on values on database. So I want to prepare xAxis, yAxis and Series data in Controller and pass it to View. How can I do this? Should I create AxisBuilder and SeriesBuilder? or Something else?
Thanks.

Sanjith Kesavan [Syncfusion]
Replied On August 17, 2015 12:56 PM UTC

We have analyzed your query and created the sample as per your requirement.
In the sample we have added the grid before the chart. The problem with your requirement is that you are trying to access the chart element before it was created, so we can achieve this using a work around by using ChartLoad event. We have created a variable to find whether the chart is loaded in the page so that the data from the grid can be loaded after creating chart. In sample we have initially declared ischartLoad is false. ischartLoad is set as true once the chart is rendered and then we can get the instance of the chart as usually in the onActionComplete. Please find the below code snippet.

var ischartLoad = false;       

function chartLoad(sender) {

    ischartLoad = true;

    sender.model.series[0].dataSource = grid.model.currentViewData;

    sender.model.series[0].xName = "categoryName";

    sender.model.series[0].yName = "salesAmount";

}       

onActionComplete = function (sender) {           

    var data = sender.model.currentViewData;

    if (ischartLoad) {

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

          chart.model.series[0].dataSource = sender.model.currentViewData;                 

          chart.redraw();

   }

   else {               

        grid = sender;                

    }      
}
In the above code for the render the chart we have used the data in the currentVIewData. Using this we can get the number of columns equal to the number of data in the grid’s page.
Screenshot before filtering

Screenshot after filtering


Please find the sample from the below location
Sample link: http://www.syncfusion.com/downloads/support/forum/119931/ze/WebApplication1826640165

Regards,

Sanjith K.​


Sanjith Kesavan [Syncfusion]
Replied On August 17, 2015 04:25 PM UTC

Hi Beeseda,
Please ignore the previous response.
We have analyzed your query. We have created sample as per your requirement. In the sample we have created textbox to enter the number of chart required. As per the number entered in the textbox, chart is created with the values from the local data.
Please find the code snippet
[HTML]

<div>

    <input type="number" id="input" onchange="chnageDataSource()" />
</div>
[JS]

function chnageDataSource(sender) {           

   var val1 = parseInt(document.getElementById("input").value);

   if (val1) {

        for (var i = 1; i <= val1; i++) {

             var element = document.createElement("div");

             element.setAttribute("id", "chart" + i.toString());

             document.getElementById("body").appendChild(element);

        }

   }

   for (var j = 1; j <= val1; j++) {

        id = "#chart" + j.toString();

        $(function () {

            $(id).ejChart();

        });

   }

   $.ajax({

      type: "POST",

      url: "Home/Getjsondata",

      async: false,

      success: function (data) {

          //Binding retrived data to chart

          for (var i = 1; i <= val1; i++) {        

               var chartObj = $("#chart"+i).ejChart("instance");

              chartObj.model.series[0].dataSource = data[i-1].DataPoints;

               chartObj.model.series[0].xName = "xname";

               chartObj.model.series[0].yName = "yname";

               chartObj.model.series[0].border.color = data[i-1].bColor;

              chartObj.model.series[0].opacity = data[i-1].opacity;

              chartObj.model.series[0].fill = data[i-1].fill;

              chartObj.model.series[0].name = data[i-1].SeriesName;

              chartObj.model.series[0].type = data[i-1].SeriesType;

              chartObj.redraw();

          }

                   

      },

    });

}

In the above code as per the number entered in the textbox, charts are created. For render the chart, data is bind from the controller using ajax postback.

Please find the below code

public ActionResult Getjsondata()

{

     //Return chart data in JSON format

     var Data4 = GetData1();

     ArrayList dataList2 = new ArrayList();

     dataList2.Add(new seriesWithDataPoints("Product P", Data4, "transparent", 0.5, "#69D2E7","Line"));

}

public ArrayList GetData1()

{

     ArrayList point1 = new ArrayList();           

     point1.Add(new dataVal(1900, r.Next(0,6)));

     point1.Add(new dataVal(1920, r.Next(0,6)));

     point1.Add(new dataVal(1940, r.Next(0,6)));

     point1.Add(new dataVal(1960, r.Next(0,6)));

     point1.Add(new dataVal(1980, r.Next(0,6)));

     point1.Add(new dataVal(2000, r.Next(0,6)));

    return point1;

}

Screenshot:

Entering the number of the chart


Screenshot of the charts


Please find the sample from below location.

Sample Link:
Charts

Please let us know if you have any concerns.

Regards,

Sanjith K.​


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;