How to display data from mysql as a piechart using chart.js?

Question

I want to display the club name and the number of children from the table below in a piechart

Here is the behind code for the PieChart webform I have created:

public partial class PieChart : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)
{

}


string club_name;
int no_children;

public int TargetClub_No()

{


    string CS = ConfigurationManager.ConnectionStrings["dbyouthworkConnectionString"].ConnectionString;
    using (MySqlConnection con = new MySqlConnection(CS))
    {
        MySqlCommand cmd = new MySqlCommand("SELECT no_children, club_name FROM pie_chart WHERE club_name = 'Target Club'", con);



        con.Open();
        MySqlDataReader rdr = cmd.ExecuteReader();
        while (rdr.Read())
        {

            club_name = rdr["club_name"].ToString();
            no_children = Convert.ToInt32(rdr["no_children"]);

        }
          return no_children;

    }


}

}

I have already downloaded the js.chart file and jquery file

Here is the code in the PieChart.aspx file I have created :

<body>
<form id="form1" runat="server">
 <canvas id="mycanvas" width="256" height="256"></canvas>
<script>
    $(document).ready(function () {
        var ctx = $("#mycanvas").get(0).getContext("2d");
        // pie chart data

        var t = <% TargetClub_No(); %>; 
        var data = [
        {
            value: t,
            color: "cornflowerblue",
            highlight: "lightskyblue",
            label: "Target Club"
        },
        {
            value: 50,
            color: "lightgreen",
            highlight: "yellowgreen",
            label: "Lightgreen"
        },
        {
            value: 40,
            color: "orange",
            highlight: "darkorange",
            label: "Orange"
        }

        ];


        //draw
        var piechart = new Chart(ctx).Pie(data);
    });
</script>

<div>

</div>
</form>

*Here I have firstly tried to input the number of children from target club however when I run the code I get a blank page instead of a pie chart

SCREEN SHOTS USING DEV TOOLS IN CHROME: This one shows that I have done something wrong in calling 'public int TargetClub_No()'

Here is the screen shot of the networks tab:

Not sure what this tab means though...

Hey Sonia, if you're using chrome the inbuilt dev tools are great at helping out issues like this. Specifically the network tab, do you have any output from there? — Ed Baker
– Ed Baker, Commented Mar 2, 2016 at 2:42

fqhv · Accepted Answer · 2016-03-02 12:57:34Z

1

First there are syntax errors in your JS.. This portion:

var t = '<% TargetClub_No(); %>' 
//var data = [

should look like this:

var t = <%= TargetClub_No() %>;
var data = [

Now your C# method TargetClub_No() needs to return a value to assign to t. For what you are trying to do at first you want to return the number of children from target club. Like this:

public int TargetClub_No()
{
    ...
    //nothing else needs to change
    ...

    return no_children;
}

Eventually you will probably want your method TargetClub_No() to return all of the data in a way that you can assign it to data directly.

Here is an article that does exactly what you want (and a little more):
Chart.js Asp.net : Create Pie chart with database jQuery Ajax C#

edited Mar 2, 2016 at 12:57

answered Mar 2, 2016 at 4:39

fqhv

1,1971 gold badge13 silver badges25 bronze badges

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

2 Comments

Sonia Mathews Over a year ago

I have changed the code but I still get a blank page with no pie chart appearing

fqhv Over a year ago

I think I messed up the syntax around the line you mentioned above. Try <%= TargetClub_No() %>;

Collectives™ on Stack Overflow

How to display data from mysql as a piechart using chart.js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related