Return Dynamic Array From Controller Asp.Net MVC

Question

I can generate a Pie Chart Just like the picture by using the code below

<script>
         var pieChartData = [
        { label: "Data 1", data: 16, color: "#62cb31", },
        { label: "Data 2", data: 6,  color: "#A4E585", },
        { label: "Data 3", data: 22, color: "#368410", },
        { label: "Data 4", data: 32, color: "#8DE563", }
    ];

    var pieChartOptions = {
        series: {
            pie: {
                show: true
            }
        },
        grid: {
            hoverable: true
        },
        tooltip: true,
        tooltipOpts: {
            content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
            shifts: {
                x: 20,
                y: 0
            },
            defaultTheme: false
        }
    };

    $.plot($("#_ByRegion"), pieChartData, pieChartOptions);
</script>

Now what I want to do is to generate the var data = [] dynamically from Controller. How to do this? Also the data is from the Database.

Use ajax call and return 2d array from controller

Sorangwala Abbasali
– Sorangwala Abbasali

2017-02-24 06:31:09 +00:00
Commented Feb 24, 2017 at 6:31 — Sorangwala Abbasali
– Sorangwala Abbasali, Commented Feb 24, 2017 at 6:31
@SorangwalaAbbasali any example on how to do that? :)

Yuu
– Yuu

2017-02-24 06:35:50 +00:00
Commented Feb 24, 2017 at 6:35 — Yuu
– Yuu, Commented Feb 24, 2017 at 6:35

Community · Accepted Answer · 2017-05-23 12:16:52Z

By Combining Pranav Patel and Ghanshyam Singh answers I was able able to reach the desired output

Model

public class GenderPieChart_Model
{
    public string GenderDesc { get; set; }
    public int GenderID { get; set; }
}

Controller

public JsonResult Gender()
{
     Dashboard_Layer data = new Dashboard_Layer();
     var lst = data.Gender();
     return Json(lst, JsonRequestBehavior.AllowGet);
}

Business Layer

public IEnumerable<GenderPieChart_Model> Gender()
    {
        List<GenderPieChart_Model> data = new List<GenderPieChart_Model>();
        using (SqlConnection con = new SqlConnection(Connection.MyConn()))
        {
            SqlCommand com = new SqlCommand("dbo.sp_Project_DashBoard 4", con);
            con.Open();
            SqlDataReader reader = com.ExecuteReader();
            while (reader.Read())
            {
                GenderPieChart_Model value = new GenderPieChart_Model();
                value.GenderDesc = Convert.ToString(reader.GetValue(0));
                value.GenderID = Convert.ToInt32(reader.GetValue(1));
                data.Add(value);
            }
        }
        return data;
    }

View

<div class="flot-chart-content" id="_ByGender" style="height: 150px"></div>
<script>
$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "@Url.Action("Gender", "Dashboard")",
        content: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var myData = data;
            var pieChartData = [];
            $.each(data, function (i,v) {
                pieChartData.push({ label: v.GenderDesc, data: v.GenderID, color: "#62cb31", });
            })
            var pieChartOptions = {
                series: {
                    pie: {
                        show: true
                    }
                },
                grid: {
                    hoverable: true
                },
                tooltip: true,
                tooltipOpts: {
                    content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
                    shifts: {
                        x: 20,
                        y: 0
                    },
                    defaultTheme: false
                }
            };
            $.plot($("#_ByGender"), pieChartData, pieChartOptions);
        }
    })

});
</script>

Pranav Patel · Accepted Answer · 2017-02-24 06:53:12Z

2

you can call when your controller on ready event and after getting data (returned Json from your controller) can process further. You can try like below

<script>
$(document).ready(function(){
    $.ajax({
        type: "POST", //GET or POST
        url: "<YOUR URL>",
        data: "<YOUR PARAMETER IF NEEDED>",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data){ //data is your json returned from controller
        var myData = JSON.parse(data);

        //create your 'pieChartData' from object 'myData'
        //pieChartData = 

        var pieChartOptions = {
            series: {
                pie: {
                    show: true
                }
            },
            grid: {
                hoverable: true
            },
            tooltip: true,
            tooltipOpts: {
                content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
                shifts: {
                    x: 20,
                    y: 0
                },
                defaultTheme: false
            }
        };

        $.plot($("#_ByRegion"), pieChartData, pieChartOptions);
        }
    });
});
</script>

edited Feb 24, 2017 at 6:53

answered Feb 24, 2017 at 6:40

Pranav Patel

1,55914 silver badges28 bronze badges

1 Comment

Yuu Over a year ago

It would say Unexpected token o in JSON at position

Ghanshyam Singh · Accepted Answer · 2017-02-24 07:00:45Z

Its simple just return Json from your controller:

first create a model class for the properties

public class Chart
{
    public string label{get;set;}
    public string data{get;set;}
    public string color{get;set;}
}

MVC action method:-

public JsonResult Chart()
{
   List<Chart> chartList=new List();
   // Code to fetch Data in List chartList
   return Json(chartList,JsonRequestBehaviour.AllowGet);
}

Ajax Call:-

<script>
$(document).ready(function(){
    $.ajax({
        type: "POST", //GET or POST
        url: "/Controller/Chart",
        data: "<YOUR PARAMETER IF NEEDED>",
        dataType: "json",
        success: function(data){ 
          $.each(data,function(i,index){
          // Code to plot Chart here

          });
         }

    });
});
</script>

Collectives™ on Stack Overflow

Return Dynamic Array From Controller Asp.Net MVC

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related