Search code examples
javascriptasp.netasp.net-mvccanvasjs

Rendered Data in Canvas JS Chart

I am using CanvasJs to render a chart and it works fine right now. Though I am not sure, if it displays the data in an appropriate way in the chart. Here is the logic that I am using:

var query = from c in GetProducts()
            group c by c.Type into g
            select new
            {
                Type = g.Key,
                Count = g.Count()
            };

double val = 0;
string valNo = "";

List<DataPoint> dataPoints = new List<DataPoint>();

foreach (var item in query)
{
   val = ((Convert.ToDouble(item.Count) / 30) * 100); //The logic - Tracks user login for 30 days. For the time being, days are fixed to 30 days
   valNo = val.ToString("#.##");

   DataPoint aDataPoint = new DataPoint();

   aDataPoint.y = valNo;
   aDataPoint.legendText = item.Type;
   aDataPoint.label = item.Type;

   dataPoints.Add(aDataPoint);

   ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);
}

The controller and model:

public List<UserType> GetProducts()
{
   List<UserType> aLst = new List<UserType>()
   {
       new UserType() { UserId = 1001, Type = "Admin" },
       new UserType() { UserId = 1002, Type = "User" },
       new UserType() { UserId = 1003, Type = "Admin" },
       new UserType() { UserId = 1004, Type = "User" },
       new UserType() { UserId = 1005, Type = "Admin" },
       new UserType() { UserId = 1006, Type = "Operator" },
       new UserType() { UserId = 1007, Type = "Operator" },
       new UserType() { UserId = 1008, Type = "Admin" },
       new UserType() { UserId = 1009, Type = "Operator" },
       new UserType() { UserId = 1010, Type = "Admin" },
       new UserType() { UserId = 1011, Type = "Operator" },
       new UserType() { UserId = 1012, Type = "Vendor" },
       new UserType() { UserId = 1013, Type = "Vendor" },
       new UserType() { UserId = 1014, Type = "Admin" },
       new UserType() { UserId = 1015, Type = "Admin" },
       new UserType() { UserId = 1016, Type = "Admin" }
    };

    return aLst;
}

public class DataPoint
{
    public string y { get; set; }
    public string legendText { get; set; }
    public string label { get; set; }
}

The view:

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer"></div>

<script type="text/javascript">
                debugger;
                window.onload = function () {
                var chart = new CanvasJS.Chart("chartContainer", {
                        title: {
                            text: "Frequently Visited User Types (Sample)"
                        },
                        animationEnabled: true,
                        legend: {
                    verticalAlign: "center",
                            horizontalAlign: "left",
                            fontSize: 20,
                            fontFamily: "Helvetica"
                        },
                        theme: "theme2",
                                        data: [
                {
                    type: "pie",
                    indexLabelFontFamily: "Garamond",
                    indexLabelFontSize: 20,
                    indexLabel: "{label} {y}%",
                    startAngle: -20,
                    showInLegend: true,
                    toolTipContent: "{legendText} {y}%",
                    dataPoints: @Html.Raw(ViewBag.DataPoints),
                } ]
                    });
            chart.render();
        };
</script>

Now the sample image that I am getting:

Sample Chart

I am bit worried about the chart that's shown above I mean the data rendered and the calculation. Though my logic works but in the chart, the admin takes 26.67% of the chart and again it seems like it has taken 50% of it. So is the data rendering perfectly in the chart? The thing that confuses me is here - Canvas JS Chart. It calculates all the type values as 100% at the end and it covers the full chart. So is it dependent upon the type numbers or I am missing something here? Any advice or suggestion would be highly appreciable - Thanks.

Solution

  • The data you have in data points are: admin, 26.67 ; user, 6.67;operator,13.33 and vendor, 6,67. So the admin % is 26.67/53.33 * 100 = 50%. So the pie chart is perfectly right. It depends what you want to display in your chart. The admin appears 8 times over 16, it must be represented with an half pie. The label values are different because of your calculation count/30*100.