CODEWITHSUNDEEP
c#jqueryasp.net
WAQ
WAQ

Reputation: 2626

Array equivalent of Jquery in c#

I am trying to show a Pie Chart in my web application. Here is the data that was showing the Pie Chart in jquery.

var piedata = [
{ label: "Pending", data: 0 },
{ label: "In Progress", data: 65 },
{ label: "Cancelled", data: 15 },
{ label: "Submitted", data: 110 },
{ label: "Open", data: 60 },
{ label: "On Hold", data: 57 }
];

Here is the jquery Script to Show the Pie Chart

<script>
    $(document).ready(function () {
        var isPostBackObject = $("#hdnIsPostback");
        alert(isPostBackObject.val());
        if ($("#piechart").length) {
            $.plot($("#piechart"), isPostBackObject.val(),
                {
                    series: {
                        pie: {
                            show: true
                        }
                    },
                    grid: {
                        hoverable: true,
                        clickable: true
                    },
                    legend: {
                        show: false
                    }
                });

            function pieHover(event, pos, obj) {

                if (!obj)
                    return;
                percent = parseFloat(obj.series.percent).toFixed(2);
                $("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' (' + percent + '%)</span>');
            }

            $("#piechart").bind("plothover", pieHover);
        }
    });
</script>

Since this was in Jquery, so these are hard coded values. I have the status ifnormation in database that I want to set above. How do I set the data from code behind file so that I can show the Pie chart based on values from db.

I have tried to set like this 

var data = new Dictionary<string, string>();
            data.Add("Pending", "10");
            data.Add("New", "40");
            data.Add("Overdue", "50");
            hdnIsPostback.Value = new JavaScriptSerializer().Serialize(data);

This code does show the Piechart but the labels like "Pending"/"New" dont show up in the Pie chart. Undefined appears instead. How do I do this?

Upvotes: 0

Views: 721

Answers (3)

TryingToImprove
TryingToImprove

Reputation: 7407

You can use a normal C# array or IEnumerable..

You define a C# class; 

public class PieModel {
    public string label { get; set; }
    public double data { get; set; }
}

And save the data to a list instead;

var data = new List<PieModel> {
    new PieModel { label = "Pending", data = 10d }
    new PieModel { label = "New", data = 40d }
    new PieModel { label = "Overdue", data = 50d }
};

hdnIsPostback.Value = new JavaScriptSerializer().Serialize(data);

It is not tested code

With your updated answer you are going to need to parse the value of your textbox to JSON.. JSON.parse..

var isPostBackObject = $("#hdnIsPostback");

if ($("#piechart").length) {
    $.plot($("#piechart"), JSON.parse(isPostBackObject.val()),

Upvotes: 4

Bellash
Bellash

Reputation: 8204

The best equivalent IMO is the dynamic List as of C#4.0+ and anonymous types (objects)

  var data=new List<dynamic>(){             
    new { label = "Pending", data = 10d },
    new { label = "New", data = 40d },
    new { label = "Overdue", data = 50d }
    };
   var serialised = new JavaScriptSerializer().Serialize(data);

Upvotes: 0

haim770
haim770

Reputation: 49105

The JavaScriptSerializer will serialize your dictionary into an array of objects that contain Key and Value pairs ([{Key:"Pending", Value:"0"}...]) and that's definitely not the format you expect.

You need to project your dictionary into an array of objects containing label and data fields:

var pieData = data.Select(x => new
{
    label = x.Key,
    data = x.Value

}).ToArray();

Then serialize it to JSON:

hdnIsPostback.Value = new JavaScriptSerializer().Serialize(pieData);

Upvotes: 3

Related Questions