Post
Ask Question

Prepare Charts Based On Generated C# Corner Statistics Data Using TUI Charts Library

Introduction

 
This is a series of 2 articles where we will see the process of preparing the C# Corner Statistics charts. You can read the first part here -
  1. Generate or prepare C# Corner Statistics Data based on available information on the C# Corner website. The data is generated in the JSON format.
  2. Prepare Charts Based On Generated C# Corner Statistics Data Using TUI Charts Library
In this article, we will learn how to prepare the chart data from raw JSON from C# Corner statistics data and draw a chart using the Toast UI(TUI) Charts Library.
 
Description
 
In the previous article, we have learned how to grab or generate C# Corner statistics using web scraping with the help of cheerio.js.
 
Let's start Step by step to draw charts using Toast UI(TUI) Charts Library.
 
Step 1
 
Install or add the prerequisite references for drawing charts
 
As we are generating charts, we obviously need JavaScript Charts Library and its dependent JS and CSS files.
  1. <link rel="stylesheet" href="css/tui-chart.min.css">    
  2. <script src="js/jquery-3.3.1.min.js" type='text/javascript'></script>    
  3. <script type='text/javascript' src='js/tui-code-snippet.min.js'></script>    
  4. <script type='text/javascript' src='js/raphael.min.js'></script>    
  5. <script src="js/tui-chart.min.js"></script>    
  6. <script src="js/lodash.min.js"></script>   
Here, tui-chart.js is dependent on tui-code-snippet and Raphael.js so first, we need to add references to these JavaScript libraries before adding tui-chart JS.
 
Lodash.js is the most popular and useful JavaScript Utility Library that we will use here for preparing the chart.
 
What does Wikipedia say about lodash?
 
Lodash is a JavaScript library that provides utility functions for common programming tasks using the functional programming paradigm.
 
To generate the data for any chart, we have to make some manipulation (Conversion) on raw JSON data before passing that data to a chart. 
 
Using lodash utility function, it will be easy to generate the chart's series data for any Chart Library.
 
Step 2 
 
Add the required HTML controls or selectors for charts.
  1. <body>    
  2.     <h3>Sample TUI Bar charts based on c-sharpcorner web scrapping data.</h3>    
  3.     
  4.     <div id="tui-chart1"></div>    
  5.     <br/>    
  6.     <div id="tui-chart2"></div>    
  7.     <br/>    
  8.     <div id="tui-chart3"></div>    
  9.     <br/>    
  10.     
  11. </body>  
From Web scraping data from c-sharp corner website, we found total 152 Technology categories and for that Big, JSON Data is generated. For this article, I have grabbed the top 10 technology categories based on their article count. So, this JSON data is our raw data for preparing the meaningful visualization charts.
 
Step 3
 
Code snippet get top 10 technology categories based on article count using Lodash.js from Big JSON Data.
  1. var categoryData = ["Articles", "Blogs", "Links", "Videos", "News"];  
  2. var topData = _.chain(AllData).sortBy(function(item) {  
  3.  return -1 * parseFloat(item.categoryData[categoryData.indexOf("Articles")].count);  
  4. }).take(10).value(); 
Reference or add sample JSON data using script tag as below. Reference this JSON object to the page before drawing any charts so it is available before use.
  1. <script>    
  2.     var topArticleData = [{    
  3.         "category": "ASP.NET",    
  4.         "url": "https://www.c-sharpcorner.com/technologies/asp-dot-net-programming",    
  5.         "categoryData": [{    
  6.             "categoryType": "Articles",    
  7.             "count": "4256"    
  8.         }, {    
  9.             "categoryType": "Blogs",    
  10.             "count": "1380"    
  11.         }, {    
  12.             "categoryType": "Links",    
  13.             "count": "111"    
  14.         }, {    
  15.             "categoryType": "Videos",    
  16.             "count": "77"    
  17.         }, {    
  18.             "categoryType": "News",    
  19.             "count": "18"    
  20.         }]    
  21.     }, {    
  22.         "category": "SharePoint",    
  23.         "url": "https://www.c-sharpcorner.com/technologies/sharepoint",    
  24.         "categoryData": [{    
  25.             "categoryType": "Articles",    
  26.             "count": "3944"    
  27.         }, {    
  28.             "categoryType": "Blogs",    
  29.             "count": "2318"    
  30.         }, {    
  31.             "categoryType": "Links",    
  32.             "count": "54"    
  33.         }, {    
  34.             "categoryType": "Videos",    
  35.             "count": "37"    
  36.         }, {    
  37.             "categoryType": "News",    
  38.             "count": "22"    
  39.         }]    
  40.     }, {    
  41.         "category": "C#",    
  42.         "url": "https://www.c-sharpcorner.com/technologies/csharp-programming",    
  43.         "categoryData": [{    
  44.             "categoryType": "Articles",    
  45.             "count": "2567"    
  46.         }, {    
  47.             "categoryType": "Blogs",    
  48.             "count": "1684"    
  49.         }, {    
  50.             "categoryType": "Links",    
  51.             "count": "71"    
  52.         }, {    
  53.             "categoryType": "Videos",    
  54.             "count": "98"    
  55.         }, {    
  56.             "categoryType": "News",    
  57.             "count": "14"    
  58.         }]    
  59.     }, {    
  60.         "category": "Azure",    
  61.         "url": "https://www.c-sharpcorner.com/technologies/azure",    
  62.         "categoryData": [{    
  63.             "categoryType": "Articles",    
  64.             "count": "1491"    
  65.         }, {    
  66.             "categoryType": "Blogs",    
  67.             "count": "174"    
  68.         }, {    
  69.             "categoryType": "Links",    
  70.             "count": "62"    
  71.         }, {    
  72.             "categoryType": "Videos",    
  73.             "count": "90"    
  74.         }, {    
  75.             "categoryType": "News",    
  76.             "count": "141"    
  77.         }]    
  78.     }, {    
  79.         "category": "SQL Server",    
  80.         "url": "https://www.c-sharpcorner.com/technologies/sql-server",    
  81.         "categoryData": [{    
  82.             "categoryType": "Articles",    
  83.             "count": "1205"    
  84.         }, {    
  85.             "categoryType": "Blogs",    
  86.             "count": "1175"    
  87.         }, {    
  88.             "categoryType": "Links",    
  89.             "count": "62"    
  90.         }, {    
  91.             "categoryType": "Videos",    
  92.             "count": "25"    
  93.         }, {    
  94.             "categoryType": "News",    
  95.             "count": "25"    
  96.         }]    
  97.     }, {    
  98.         "category": "Angular",    
  99.         "url": "https://www.c-sharpcorner.com/technologies/angularjs",    
  100.         "categoryData": [{    
  101.             "categoryType": "Articles",    
  102.             "count": "1000"    
  103.         }, {    
  104.             "categoryType": "Blogs",    
  105.             "count": "269"    
  106.         }, {    
  107.             "categoryType": "Links",    
  108.             "count": "14"    
  109.         }, {    
  110.             "categoryType": "Videos",    
  111.             "count": "41"    
  112.         }, {    
  113.             "categoryType": "News",    
  114.             "count": "14"    
  115.         }]    
  116.     }, {    
  117.         "category": "Windows 10",    
  118.         "url": "https://www.c-sharpcorner.com/technologies/windows_10",    
  119.         "categoryData": [{    
  120.             "categoryType": "Articles",    
  121.             "count": "915"    
  122.         }, {    
  123.             "categoryType": "Blogs",    
  124.             "count": "114"    
  125.         }, {    
  126.             "categoryType": "Links",    
  127.             "count": "46"    
  128.         }, {    
  129.             "categoryType": "Videos",    
  130.             "count": "24"    
  131.         }, {    
  132.             "categoryType": "News",    
  133.             "count": "312"    
  134.         }]    
  135.     }, {    
  136.         "category": "UWP",    
  137.         "url": "https://www.c-sharpcorner.com/technologies/universal-windows-apps",    
  138.         "categoryData": [{    
  139.             "categoryType": "Articles",    
  140.             "count": "887"    
  141.         }, {    
  142.             "categoryType": "Blogs",    
  143.             "count": "86"    
  144.         }, {    
  145.             "categoryType": "Links",    
  146.             "count": "28"    
  147.         }, {    
  148.             "categoryType": "Videos",    
  149.             "count": "9"    
  150.         }, {    
  151.             "categoryType": "News",    
  152.             "count": "18"    
  153.         }]    
  154.     }, {    
  155.         "category": ".NET",    
  156.         "url": "https://www.c-sharpcorner.com/technologies/dot_net_2015",    
  157.         "categoryData": [{    
  158.             "categoryType": "Articles",    
  159.             "count": "818"    
  160.         }, {    
  161.             "categoryType": "Blogs",    
  162.             "count": "710"    
  163.         }, {    
  164.             "categoryType": "Links",    
  165.             "count": "332"    
  166.         }, {    
  167.             "categoryType": "Videos",    
  168.             "count": "91"    
  169.         }, {    
  170.             "categoryType": "News",    
  171.             "count": "93"    
  172.         }]    
  173.     }, {    
  174.         "category": "Visual Studio",    
  175.         "url": "https://www.c-sharpcorner.com/technologies/visual-studio",    
  176.         "categoryData": [{    
  177.             "categoryType": "Articles",    
  178.             "count": "737"    
  179.         }, {    
  180.             "categoryType": "Blogs",    
  181.             "count": "231"    
  182.         }, {    
  183.             "categoryType": "Links",    
  184.             "count": "51"    
  185.         }, {    
  186.             "categoryType": "Videos",    
  187.             "count": "73"    
  188.         }, {    
  189.             "categoryType": "News",    
  190.             "count": "115"    
  191.         }]    
  192.     }];    
  193. </script>   
Step 4 
 
Prepare the charts' data and draw charts.
  1. <script>    
  2.        //drawBarChartUsingTUILibrary({ id, chartTitle,datacategory,isColumnChart})    
  3.        //Reusable utility function to draw tui bar or column charts    
  4.        function drawBarChartUsingTUILibrary(options) {    
  5.            // Common chartOption for Tui Charts     
  6.            var chartOptions = {    
  7.                chartExportMenu: {    
  8.                    visible: false // default is true.    
  9.                },    
  10.                chart: {    
  11.                    width: 470,    
  12.                    height: 250,    
  13.                    title: 'C-SharpCorner Articles Technology Category',    
  14.                    format: '1,000'    
  15.                },    
  16.                yAxis: {    
  17.                    title: 'Y Axis'    
  18.                },    
  19.                xAxis: {    
  20.                    title: 'X Axis',    
  21.                    min: 0,    
  22.                    //max: 9000,    
  23.                    // suffix: '$'    
  24.                },    
  25.                series: {    
  26.                    showLabel: true    
  27.                }    
  28.            };    
  29.     
  30.            //Sub Category    
  31.            var categoryData = ["Articles", "Blogs", "Links", "Videos", "News"];    
  32.     
  33.            // Generate series data based on sub Category    
  34.            var data = {    
  35.                // categories: _.pluck(topData,'category'),    
  36.                categories: [options.category],    
  37.                // _.map is similar to map function for collection object  
  38.                series: _.map(options.data, function(e) {    
  39.                    // Calculate Article count in each category, _.find is similar to the filter function for collection object  
  40.                    var ele = _.find(e.categoryData, function(e) {    
  41.                        return e.categoryType === options.category ? e.count : 0;    
  42.                    });    
  43.                    return {    
  44.                        name: e.category,    
  45.                        data: parseInt(ele.count)    
  46.                    };    
  47.                })    
  48.            };    
  49.     
  50.            //Update Json nested proprties using Lodash  set function  
  51.            _.set(chartOptions, "chart.title", options.chartTitle);    
  52.            if (options.isColumnChart) {    
  53.                //Draw tui Columns Charts    
  54.     
  55.                tui.chart.columnChart(document.getElementById(options.id), data, chartOptions);    
  56.            } else {    
  57.                //Draw tui Bar Charts    
  58.                tui.chart.barChart(document.getElementById(options.id), data, chartOptions);    
  59.            }    
  60.        }    
  61.     
  62.        $(document).ready(function() {    
  63.            console.log("Dom is ready, Now call a function to draw charts");    
  64.     
  65.            drawBarChartUsingTUILibrary({    
  66.                id: "tui-chart1",    
  67.                chartTitle: 'C-SharpCorner Top 10 Contribution by Articles Count',    
  68.                data: topArticleData,    
  69.                category: "Articles"    
  70.            });    
  71.            drawBarChartUsingTUILibrary({    
  72.                id: "tui-chart2",    
  73.                chartTitle: 'C-SharpCorner Top 10 Contribution by Blogs Count',    
  74.                data: topArticleData,    
  75.                category: "Blogs"    
  76.            });    
  77.            drawBarChartUsingTUILibrary({    
  78.                id: "tui-chart3",    
  79.                chartTitle: 'C-SharpCorner Top 10 Contribution by News Count',    
  80.                data: topArticleData,    
  81.                category: "News",    
  82.                isColumnChart: true    
  83.            });    
  84.        });    
  85.    </script>   
In the above JavaScript code snippet, I have created a reusable function to draw charts based on the provided parameters. I have used some of the Lodash utility functions like _.map, _.find, _.set. to prepare the charts series data.
 

Conclusion

 
In this article, we learned how to draw charts and generate charts data from any raw JSON data using lodash js and Toast UI Charts. I hope you liked it.


Similar Articles