Boilerplate for MVC app dashboard using Chart.js.
- Chart.js
- bootstrap
- Add the following scripts to the
<head>tag:
- Chart.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" type="text/javascript"></script> - D3.js
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script> - Cal-HeatMap (Calendar heatmap)
<script type="text/javascript" src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
-
Add in a chart into an MVC view's
<body>tag with the canvas and script elements using this method. -
Bootstrap helps to display the components in rows. The following styling helps to space the charts from each other and stretch their height to each chart container:
<div class="row">
<div class="col-xl-8 col-md-12" style="padding: 0px 20px 20px 20px;">
<div class="card card-default" style="height:100%;">
<div class="card-body">
<div class="chart-container">
<canvas id="mixed-chart"></canvas>
<script>
...
If you want to add new charts, replace the <canvas> and <script> tags with charts from chartsjs.org or using Tobias Ahlin's blog to experiment with different chart samples.
- Move everything in
<script>tag to seperate .js file. - Move inline styling to seperate .css file
- Add inline mock data for calendar heatmap
- Add Models for charts and bind datasets to these
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent