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];

        }

.

.

.

});

Angular UI Grid ui-grid.woff file not found When Published to Azure

A typical scenario goes like  you have been using the Angular UI Grid in your local server. All the images in the grid were looking good (including the down & up arrows etc..). You published your web application to Azure and suddenly instead of the down & up arrows you get some text similar to Chinese fonts.

When you open up the developer console in the web browser, you get a 404 file not found error for ui-grid.woff.

The reason behind is that Azure does not have MIME types configured for several font file formats. Whereas, if you check on your local IIS the MIME file types are already configured

So the below entry must be added to web.config to include the mime types. If not Azure will simply return a 404 error even though the files are actually published to Azure.

<system.webServer>
    <staticContent>
        <mimeMap fileExtension="woff" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

Create Azure Storage and store images as blobs

1. Create a Storage Account

Connect to Azure portal.
In the left pane you can see the "Storage accounts". Click on the link.

On the top left hand side you can click on "Add" and add new storage account. Specify the storage name and etc.. You can either create a new resource group or use an existing group for your storage's resource group.

once created you get the below page, listing your storage accounts. click on the newly created storage account.

Note that you get a list of storage options which you can modify and add. You can  also get the connection string to the storage account under the "Access keys" section.

The next step is to create a container inside the storage to hold the blobs, in my care its going to be the images.

2. Create the container to store the blobs
Click on containers. create a new container. I have named it as "Images"

3. Now is the fun part. Coding to upload the images to Azure Blob Storage

        public string UploadImageUsingByteArray(byte[] byteArray, string fileNamewithGuid)
        {
            string blobUrl = string.Empty;
            try
            {
                CloudStorageAccount storageAccount = CloudStorageAccount.Parse(storageConnectionString); //here the storageConnectionString you can obtain from the storage properties under Access keys

                //Create a blob client
                CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
                CloudBlobContainer container = blobClient.GetContainerReference(imageContainerName); //my container name is image
                container.CreateIfNotExists();

                if (container.Exists())
                {
                    CloudBlockBlob blockBlob = container.GetBlockBlobReference(fileNamewithGuid);
                    blockBlob.Properties.ContentType = "image/jpeg";
                    blockBlob.UploadFromByteArray(byteArray, 0, byteArray.Length);


                    blobUrl = blockBlob.Uri.AbsoluteUri; //returns the blob's URL. How awesome is that
                }
            }
            catch (Exception)
            {
                throw;
            }
            return blobUrl;
        }

Here I have used the option to upload a byte array using the method UploadFromByteArray(). You can also use the method UploadFromStream() if your input is a stream. It works for a file stream as well.

Refresh the container when your code has run, and you get your images in Azure blob