How to populate data from sql for morris donut chart ?

Question

1.00/5 (3 votes)

See more:

Hi ,

JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        debugger;
        /* MORRIS DONUT CHART
              ----------------------------------------*/
        Morris.Donut({
            element: 'morris-donut-chart',
            data: [{
                label: "Arun",
                value: 27000
            }, {
                label: "Saumya",
                value: 5500
            }, {
                label: "Nilesh",
                value: 5500
            }, {
                label: "Tejas",
                value: 5500
            }, {
                label: "Raj",
                value: 27000
            }],
            resize: true
        });
    });
</script>

this is the data i want to bring from database , please suggest

below is what i have tried so far

[WebMethod]
public static List<ChartDetails> GetPiechartData()
{
    using (SqlConnection con = new SqlConnection(ApConfig.GetConectionString))
    {
        SqlCommand cmd = new SqlCommand("Usp_Getdata", con);
        cmd.CommandType = CommandType.StoredProcedure;
        SqlDataAdapter da = new SqlDataAdapter();
        da.SelectCommand = cmd;
        DataTable dt = new DataTable();
        da.Fill(dt);

        List<ChartDetails> dataList = new List<ChartDetails>();

        foreach (DataRow dtrow in dt.Rows)
        {
            ChartDetails details = new ChartDetails();
            details.PlanName = dtrow[0].ToString();
            details.PaymentAmount = Convert.ToInt32(dtrow[1]);

            dataList.Add(details);
        }
        return dataList;
    }
}

and on script

XML

<script type="text/javascript">
    $(function () {
        debugger;
        $.ajax(
        {
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            url: 'Home.aspx/GetPiechartData',
            data: '{}',
            success: function (response) {
                Morris.Donut({
                    element: 'donut-example',
                    data: response
                });
            },

            error: function () {
                alert("Error loading data! Please try again.");
            }
        });
    })
</script>

<div class="col-md-3 col-sm-12 col-xs-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            Donut Chart Example
        </div>
        <div class="panel-body">
            <div id="morris-donut-chart"></div>
        </div>
    </div>
</div>

Posted 26-May-15 15:59pm

Torakami

Updated 4-Oct-16 22:31pm

v3

Add a Solution

2 solutions

Solution 2

thanks a lot . it is working for me

Posted 4-Oct-16 22:31pm

shahir Kolakkattil

Comments

Torakami 5-Oct-16 11:45am

you can put it into comment , and accepting my solution would be better.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Torakami · Accepted Answer · 2015-05-28T15:13:00

Hi all ,

no one has answered this question as there might be many few who actually worked on morris js charts. I checked online but i have also found only limited data and documentation from internet. after so much reserch and tying i got the solution to display morris danut chart in asp.net

below is my solution what i have tried so far , so in future other developer will get an answer to deal with that

http://idevexplorer.com/2014/11/morris-js-chart-in-an-mvc-application/[^]

above link has got excellent examples given to refer, how to use paramnters and all but they havent shown how to generate dynamically

<script type="text/javascript">
    $(document).ready(function () {
        Morris.Donut({
            element: 'morris-donut-chart',
            data: $.parseJSON(Graph()),
            resize: true
        });
    });

    function Graph() {
        var data = "";
        $.ajax({
            type: 'POST',
            url: 'Home.aspx/GetPiechartData',
            dataType: 'json',
            async: false,
            contentType: "application/json; charset=utf-8",
            data: {},
            success: function (result) {
                data = result.d;
            },
            error: function (xhr, status, error) {
                alert(error);
            }
        });

        return data;
    }
</script>

XML

<div class="col-md-3 col-sm-12 col-xs-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            Donut Chart Example
        </div>
        <div class="panel-body">
            <div id="morris-donut-chart"></div>
        </div>
    </div>
</div>

and in my codebehind i called my webmethod

[WebMethod]
      public static string GetPiechartData()
      {
          using (SqlConnection con = new SqlConnection(ApConfig.GetConectionString))
          {
              SqlCommand cmd = new SqlCommand("Usp_Getdata", con);
              cmd.CommandType = CommandType.StoredProcedure;
              SqlDataAdapter da = new SqlDataAdapter();
              da.SelectCommand = cmd;
              DataTable dt = new DataTable();
              da.Fill(dt);

              List<GraphData> dataList = new List<GraphData>();

              foreach (DataRow dtrow in dt.Rows)
              {
                  GraphData details = new GraphData();
                  details.label = dtrow[0].ToString();
                  details.value = dtrow[1].ToString();

                  dataList.Add(details);
              }

              //oper = null which means its first load.
              var jsonSerializer = new JavaScriptSerializer();
              string data = jsonSerializer.Serialize(dataList);
              return data;
          }
      }

make sure you do use label and value to make it work from class