score:0

Accepted answer

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.

score: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; }
        }

Related Query

More Query from same tag