D3 - Donut Chart

Here  I do a WEB API call and get the required data.


Sample code is as below

$(document).ready(function () {

    var jsonDataTshirt = {};
    var tshirts = [];

    jsonDataTshirt.tshirts = tshirts;
.
.
.


    //1) get tshirt sizes
    $.getJSON("API/MyWEBAPICall",
        function (Data) {

            $.each(Data, function (key, val) {

                if (key != "$id") {
                    var uCategory = { "fruit": key, "count": Number(val) };
                    jsonDataTshirt.tshirts.push(uCategory);
                }
            });

            // margin
            var margin = { top: 20, right: 20, bottom: 20, left: 20 },
                width = 400 - margin.right - margin.left,
                height = 400 - margin.top - margin.bottom,
                radius = width / 2 - 20;

            // color range
            var color = d3.scaleOrdinal()
                .range(["#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5", "#2196F3", "#1E88E5", "#1976D2"]);

            // donut chart arc
            var arc2 = d3.arc()
                .outerRadius(radius - 10)
                .innerRadius(radius - 70);

            // arc for the labels position
            var labelArc = d3.arc()
                .outerRadius(radius - 40)
                .innerRadius(radius - 40);

            // generate pie chart and donut chart
            var pie = d3.pie()
                .sort(null)
                .value(function (d) { return d.count; });

            // define the svg donut chart
            var svg2 = d3.select("#pie-tshirts-male").append("svg")
                .attr("width", width)
                .attr("height", height)
              .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

            var data = jsonDataTshirt.tshirts;
            // parse data
            data.forEach(function (d) {
                d.count = +d.count;
                d.fruit = d.fruit;
            })

            // "g element is a container used to group other SVG elements"
            var g2 = svg2.selectAll(".arc2")
                .data(pie(data))
              .enter().append("g")
                .attr("class", "arc2");

            // append path
            g2.append("path")
                .attr("d", arc2)
                .style("fill", function (d) { return color(d.data.fruit); })
              .transition()
                .ease(d3.easeLinear)
                .duration(2000)
                .attrTween("d", tweenDonut);

            // append text
            g2.append("text")
              .transition()
                .ease(d3.easeLinear)
                .duration(2000)
              .attr("transform", function (d) { return "translate(" + labelArc.centroid(d) + ")"; })
                .attr("dy", ".35em")
                .text(function (d) { return d.data.fruit; });

            //Add the count in outside the arc
                g2.append("text")
                    .transition()
                    .ease(d3.easeLinear)
                    .duration(2000)
                    .attr("transform", function(d) {
                        var _d = labelArc.centroid(d);
                        _d[0]*= 1.4; //multiply by a constant factor
                        _d[1] *= 1.4; //multiply by a constant factor
                        return "translate(" +_d + ")";
                        })
                    .attr("dy", ".35em")
                    .text(function (d) {
                       return d.data.count;
                        })
                    .style("font-size", "10px");;

            function tweenDonut(b) {
                b.innerRadius = 0;
                var i = d3.interpolate({ startAngle: 0, endAngle: 0 }, b);
                return function (t) { return arc2(i(t)); };
            }

        });
.
.
.
});


Sample: Do nut chart is drawn as shown in the middle

Unable to cast object of type 'System.Data.Entity.Infrastructure.DbQuery`1[System.Int32]' to type 'System.IConvertible'

 Following is a sample linq query which might cause the problem:

int id = Convert.ToInt32(from ts in db.TShirtSizes where ts.Size == "S" select ts.Id);

You get an error as :

Unable to cast object of type 'System.Data.Entity.Infrastructure.DbQuery`1[System.Int32]' to type 'System.IConvertible'

What happens is that, in the initial query you get a list of results. If you need to get a single value, do it by changing the code as shown below

int id = Convert.ToInt32((from ts in db.TShirtSizes where ts.Size == "S" select ts.Id).Single());

Install the latest npm

npm install npm@latest -g

'ng' is not recognized as an internal or external command operable program or batch file

The error:

Cause: The environment variable is not set to pick up the ng file location.

The ng file location in you computer would be as shown below

Fix: 

Add the environment variable as shown below:

Update the Path variable. Add a semicolon at the end of the value and type in: %AppData%\npm

Now try ng again in the command line console

Google Graphs - 3D Pie chart

In my pageMy page I have refered the below JS files in the header:

• jquery-1.12.4.min.js
• https://www.gstatic.com/charts/loader.js [Google Script file for graphing]
• feedbacks.js [This is my custom JS file where all the code goes]

There is a div to load the graph inside:

   <div id="event-rating-1" style="width: 750px; height: 350px;"></div>

The script :

$(document).ready(function () {

    //variable declaration
    var jsonEventFeedback = {};
    var feedbacks = [];


    $.getJSON("API/Feedbacks/GetEventFeedbacks/",
    function (Data) {
     
        var questionListing = [];

        for(var i=0; i<Data.length; ++i){
            questionListing[i] = Data[i];
        }

        //Draw the google chart
        google.charts.load("current", { packages: ["corechart"] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Rating', 'Participants'],
              ['Bad', Number(questionListing[0].CountForOne)],
              ['Not Bad', Number(questionListing[0].CountForTwo)],
              ['Ok', Number(questionListing[0].CountForThree)],
              ['Good', Number(questionListing[0].CountForFour)],
              ['Excellent', Number(questionListing[0].CountForFive)]
            ]);

            var options = {
                title: questionListing[0].Question,
                is3D: true,
            };

            var chart = new google.visualization.PieChart(document.getElementById('event-rating-1'));
            chart.draw(data, options);
        }

    });

Sample Graphs:

Using QRCoder

Download QRCoder from Git hub

Include the dll reference "QRCoder" and in your class specify the using directive as :

using QRCoder;


The simple code to generate the qr code is as shown in the below code snippet. Here payload is a string. The payload string was constructed from a StringBuilder.


QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode(payLoad, QRCodeGenerator.ECCLevel.Q);
QRCode qrCode = new QRCode(qrCodeData);
Bitmap qrCodeImage = qrCode.GetGraphic(20);

JQuery Auxiliaries

Capture drop down selection change.

Here my drop down control's id is : SessionList

$(document).ready(function () {

.

.

.

    $("#SessionList").on('change', function () {

        if ($(this).val() == 'selectionKey') {

            DoSomething();

        } else {

            DoSomethingElse();

        }

    });

.

.

.

});

Do a Call to Web API and capture the results

$(document).ready(function () {

.

.

.

    $.getJSON("API/Feedbacks/GetEventFeedbacks/",

    function (Data) {

        

        var questionListing = [];

        for(var i=0; i<Data.length; ++i){

            questionListing[i] = Data[i];

        }

.

.

.

});