Chart.js – In Graph Data for Pie & Doughnut Charts

by

0👍

✅

You can use Chart.js to generate a chart in your design.

var data = [
  {
    value: 20,
    color:"#F7464A"
  },
  {
    value: 13.3,
    color: "#46BFBD"
  },
  {
    value: 6.7,
    color: "#FDB45C"
  },
  {
    value: 6.7,
    color: "#FDB45C"
  },
  {
    value: 6.7,
    color: "#FDB45C"
  },
  {
    value: 46.6,
    color: "#FDB45C"
  }
]

var options =
{
  animation: false,
  tooltipTemplate: "<%= value %>%",
  tooltipFillColor: "rgba(0,0,0,0)",
  tooltipFontColor: "rgba(1,1,1,1)",
  tooltipCaretSize: 0,
  tooltipFontStyle: "bold",

  tooltipEvents: [],
  onAnimationComplete: function() { this.showTooltip(this.segments, true); }
}

var ctx = document.getElementById("myChart").getContext("2d");
var myPieChart = new Chart(ctx).Pie(data,options);
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

However the placement of the labels is not optimal.

👍:0

enter image description hereRetrieving data from Database using Pi chats in chats.js and Asp.net and C#
Here is the code it worked for me

    <script src="Scripts/Chart.js"></script>
    <script src="Scripts/Chart.min.js"></script>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="http://www.chartjs.org/assets/Chart.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function () {
                var dataarr = new Array();
                debugger;
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "JsCps.aspx/GetDataonload",
                    data: {},
                    async: true,
                    cache: false,
                    dataType: "json",
                    success: OnSuccess_,
                    error: OnErrorCall_
                })
                function OnErrorCall_(repo) {
                    //alert(repo);
                }
                function OnSuccess_(response) {
                    debugger;
                    var aData = response.d;
                    var colorarray = ["#F9E559", "#218C8D", "#6CCECB", "#EF7126", "#8EDC9D", " #473E3F"];
                    for (var i = 0; i < aData.length; i++) {
                        //alert(aData);
                        var obj = {};
                        obj.text = aData[i].Accounts;
                        obj.value = aData[i].Accountvalues;
                        obj.label = aData[i].Accounts;
                        var color = colorarray[i];
                        obj.color = color;
                        dataarr.push(obj);
                    }
                    debugger;

                    //Fix for IE 8
                    if ($.browser.msie && $.browser.version == "8.0") {
                        G_vmlCanvasManager.initElement(el);
                    }
                    var helpers = Chart.helpers;

                    var canvas = document.getElementById('bar');
                    var bar = new Chart(canvas.getContext('2d')).Pie(dataarr, {

                        responsive: false,
                        maintainAspectRatio: true,
                        animation: false
                    });
                    for (var i = 0; i < dataarr.length; i++) {
                        var legendHolder = $("<div />");

                        legendHolder.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + dataarr[i].color + "'></span> " + dataarr[i].text)
                        legendHolder.css("margin-top", "0px");
                        $("#legend").append(legendHolder);

                    }
                }
            });
         </script>
C# Code
--------
 [WebMethod(EnableSession = true)]
        public static List<Chatdata> GetDataonload()
        {
            List<Chatdata> dataList = new List<Chatdata>();
            string Constring = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString.ToString();
            using (SqlConnection con = new SqlConnection(Constring))
            {
                string countryname = string.Empty;
                //string StartDate = DateTime.Now.AddDays(-180).ToString("yyyy-MM-dd");
                string StartDate = DateTime.Now.AddDays(-60).ToString("yyyy-MM-dd");
                string EndDate = DateTime.Now.ToString("yyyy-MM-dd");
                SqlCommand cmd = new SqlCommand("usp_sales_Adcaps", con);
                cmd.CommandTimeout = 50;
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@country", countryname);
                cmd.Parameters.AddWithValue("@istartdate", StartDate);
                cmd.Parameters.AddWithValue("@ienddate", EndDate);
                con.Open();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.SelectCommand = cmd;
                DataTable dt = new DataTable();
                da.Fill(dt);
                con.Close();


                foreach (DataRow dtrow in dt.Rows)
                {
                    Chatdata details = new Chatdata();
                    details.Accounts = dtrow[0].ToString();
                    details.Accountvalues = Convert.ToInt64(dtrow[1].ToString());
                    dataList.Add(details);

                }
                return dataList;
            }
        }
  public class Chatdata
        {
            public string Accounts { get; set; }
            public Int64 Accountvalues { get; set; }
        }

Leave a comment