Array equivalent of Jquery in c#

Question

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?

TryingToImprove · Accepted Answer · 2015-03-10 13:41:41Z

4

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()),

edited Mar 10, 2015 at 13:41

answered Mar 10, 2015 at 13:11

TryingToImprove

7,4555 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

WAQ Over a year ago

I have already tried the exact same thing. but does the same thing (does not show label)

TryingToImprove Over a year ago

Can you provide the result of the serialize method?

Sully Over a year ago

[{"label":"Pending","data":10},{"label":"New","data":40},{"label":"Overdue","data":50}]

WAQ Over a year ago

this is what I get "[{"label":"Pending","data":"10"},{"label":"In Progress","data":"20"},{"label":"Cancelled","data":"40"}]"

WAQ Over a year ago

'JSON.parse(isPostBackObject.val()),' did the trick for me. Thanks a lot man :)

|

haim770 · Accepted Answer · 2015-03-10 13:11:37Z

3

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);

answered Mar 10, 2015 at 13:11

haim770

49.2k7 gold badges113 silver badges139 bronze badges

4 Comments

TryingToImprove Over a year ago

Either by using a class/model and transform the object in the Select or by using a anonymous class like the example

haim770 Over a year ago

I provided an example of how you can output the correct structure to be parsed by the PieChart. What do you mean by 'protect'?

WAQ Over a year ago

When I serialize I get this "[{"label":"Pending","data":"10"},{"label":"In Progress","data":"20"},{"label":"Cancelled","data":"40"}]"

WAQ Over a year ago

percentage values are being displayed perfectly fine with both data.Add("Pending", "10"); and data.Add("Pending", 10); Issue is with the labels. Undefined appears instead of the labels.

Bellash · Accepted Answer · 2015-03-10 13:18:11Z

0

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);

answered Mar 10, 2015 at 13:18

Bellash

8,2776 gold badges57 silver badges95 bronze badges

Collectives™ on Stack Overflow

Array equivalent of Jquery in c#

3 Answers 3

7 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related