This article about How to make Pivot Report in ASP.Net Core Using Webdatarocks. WebDataRocks is a free web reporting tool for data analysis and visualization. It is written in JavaScript and is not constrained by any external framework. This simple but enterprise-featured web-based pivot grid can be added to your website, application or project web page within minutes. For detail about Webdatarocks you can see in Here.
In this guide, I will tell you how to make Pivot Report in ASP.Net Core Using Webdatarocks starting from making a project in Microsoft Visual Studio until testing in browser. You can also follow this instruction directly using your computer.
- Create new project console application with Microsoft Visual Studio 2017 or etc. (Example : webdatarocks_example)
- Download WebDataRocks to get the JavaScript and CSS locally, refer from CDN, or include it with npm package manager. Download Here
- Extract the downloaded file and place it on path application wwwroot\lib.
- After extract ZIP containing all compiled and minified files and simply include them into your project:
|
1 2 3 |
<link href="webdatarocks.min.css" rel="stylesheet"/> <script src="webdatarocks.toolbar.min.js"></script> <script src="webdatarocks.js"></script> |
- Edit file views index.cshtml in Home Folder like below :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
@{ ViewData["Title"] = "Webdatarocks Example"; } <h2 style="text-align:center;">@ViewData["Title"]</h2> <br /> <head> <link href="~/lib/webdatarocks-1.0.2/webdatarocks.min.css" rel="stylesheet" /> <script src="~/lib/webdatarocks-1.0.2/webdatarocks.toolbar.min.js"></script> <script src="~/lib/webdatarocks-1.0.2/webdatarocks.js"></script> <link rel="stylesheet" type="text/css" href="~/lib/webdatarocks-1.0.2/theme/lightblue/webdatarocks.min.css" /> <script src="~/lib/webdatarocks-1.0.2/webdatarocks.googlecharts.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> </head> <table> <tr> <td style="width: 800px;"><div id="wdr-component"></div></td> <td><div id="googlechart-container" style="width:750px;height:550px;"></div></td> </tr> </table> <script type="text/javascript" charset="utf-8"> var pivot = new WebDataRocks({ container: "#wdr-component", toolbar: true, report: { "dataSource": { "dataSourceType": "csv", "filename": "https://cdn.webdatarocks.com/data/data.csv" }, "slice": { "rows": [{ "uniqueName": "Country", "sort": "asc" }], "columns": [{ "uniqueName": "Category", "sort": "asc" }, { "uniqueName": "Measures" }], "measures": [{ "uniqueName": "Revenue", "formula": "sum(\"Price\") * sum(\"Quantity\") ", "individual": true, "caption": "Revenue" }] }, "formats": [{ "name": "", "thousandsSeparator": " ", "decimalSeparator": ".", "decimalPlaces": 2, "maxSymbols": 20, "currencySymbol": "", "currencySymbolAlign": "left", "nullValue": " ", "infinityValue": "Infinity", "divideByZeroValue": "Infinity" }] }, reportcomplete: function () { pivot.off("reportcomplete"); pivotTableReportComplete = true; createGoogleChart(); } }); var pivotTableReportComplete = false; var googleChartsLoaded = false; google.charts.load('current', { 'packages': ['geochart'], 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(onGoogleChartsLoaded); function onGoogleChartsLoaded() { googleChartsLoaded = true; if (pivotTableReportComplete) { createGoogleChart(); } } function createGoogleChart() { if (googleChartsLoaded) { pivot.googlecharts.getData({ type: "bar" }, drawChart, drawChart ); } } function drawChart(_data) { var data = google.visualization.arrayToDataTable(_data.data); var options = { colorAxis: { colors: ['#2f682f', '#367736', '#3d863d', '#449544'] }, backgroundColor: '#b3e5fc', datalessRegionColor: '#ffffff', defaultColor: '#f5f5f5', tooltip: { textStyle: { fontSize: 17, fontName: 'Proxima Nova' } } }; var chart = new google.visualization.GeoChart(document.getElementById('googlechart-container')); chart.draw(data, options); } </script> |
- Next Step,Running the application with IIS Express In Microsoft visual studio 2017.
You can see Pivot Report in ASP.Net Core Using Webdatarocks Github in Here.
Thank you for reading this article about Pivot Report in ASP.Net Core Using Webdatarocks, I hope this article is useful for you. Visit My Github about ASP.Net Core in Here