Chart Controls using TagHelpers & morris.js

Sep 04, 2016     Viewed 29085 times    1 Comments
Posted in #TagHelpers  #Charts 

Almost web developers remembered that ASP.NET support chart controls since ASP.NET 3.5 as separate package that you can download it easily, after awhile they become built-in in ASP.NET 4, for more details you can refer to ScottGu's blog post here.

In this blog post I'll explain how can we develop some of the common charting controls that our applications & websites many need with the help of the tag helpers and morris.js.

Morris.js is an open source javascript library that powers the graphs. It has a very simple APIs for drawing line, bar, area and donut charts.

1. Line Charts

2. Area Charts

3. Bar Charts

4. Donut Charts

For more information about morris.js, please visit this link.

Now let us dig into chart controls and how I Create them. First of all weng, String>> contentData = new List<KeyValuePair<String, String>>
        {
            new KeyValuePair<String, String>(POST_PAREMETER_NAME, inputCss)
        };
        using (HttpClient httpClient = new HttpClient())
        {
            using (FormUrlEncodedContent content = new FormUrlEncodedContent(contentData))
            {
                using (HttpResponseMessage response = await httpClient.PostAsync(URL_CSS_MINIFIER, content))
                {
                    response.EnsureSuccessStatusCode();
                    return await response.Content.ReadAsStringAsync();
                }
            }
        }
    }
}
}

Similarly JavaScriptMinifier which did the exact thing for the JavaScript content using https://javascript-minifier.com.

JavaScript Minifier

using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Threading.Tasks;

namespace HelloMvc.TagHelpers
{
    public static class JavaScriptMinifier
{
    private const string URL_JS_MINIFIER       = "https://javascript-minifier.com/raw";
    private const string POST_PAREMETER_NAME    = "input";

    public static async Task<String> MinifyJs(string inputJs)
    {
        List<KeyValuePair<String, String>> contentData = new List<KeyValuePair<String, String>>
        {
            new KeyValuePair<String, String>(POST_PAREMETER_NAME, inputJs)
        };

        using (HttpClient httpClient = new HttpClient())
        {
            using (FormUrlEncodedContent content = new FormUrlEncodedContent(contentData))
            {
                using (HttpResponseMessage response = await httpClient.PostAsync(URL_JS_MINIFIER, content))
                {
                    response.EnsureSuccessStatusCode();
                    return await response.Content.ReadAsStringAsync();
                }
            }
        }
    }
}
}

After

Twitter Facebook Google + LinkedIn


1 Comment

Jay (3/3/2017 8:36:35 AM)

Why do you disable right clicking on links on your blog? It would be cool to open up links to different posts in a different tab.


Leave a Comment