Chart - potatoscript/asp.net.core.mvc GitHub Wiki
| ■ Chart with Chart.JS |
public IActionResult Index()
{
var model = new List<DataModel>();
Constant d = new Constant();
string sql = "SELECT DISTINCT " + d.pic + ", COUNT(" + d.name + "), ";
sql += " COUNT( CASE WHEN status != 'Done' THEN 1 END),";
sql += " COUNT( CASE WHEN status = 'Done' THEN 1 END)";
sql += " FROM " + d.table;
sql += " GROUP BY " + d.pic + " ";
sql += " ORDER BY COUNT(" + d.name + ") DESC ";
Database db = new Database(sql, _server);
if (db.data.HasRows)
{
while (db.data.Read())
{
model.Add(new DataModel
{
pic = db.data[0].ToString().Trim(),
status = db.data[2].ToString().Trim(),
status_done = db.data[3].ToString().Trim()
});
}
}
db.Close();
return View(model);
}@model List<DataModel>
@{
var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.pic).ToList());
var YLabels = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.status).ToList());
var YLabels_Done = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.status_done).ToList());
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Dashboard</h1>
<div class="chart-container">
<canvas id="tmsBarChart" style="width:100%;height:500px">Loading...</canvas>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
// to enable the chartArea setting
Chart.pluginService.register({
beforeDraw: function (chart, easing) {
if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
var helpers = Chart.helpers;
var ctx = chart.chart.ctx;
var chartArea = chart.chartArea;
ctx.save();
ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
ctx.restore();
}
}
});
var ctx = document.getElementById('tmsBarChart').getContext('2d');
var barChartData = {
labels: @Html.Raw(XLabels),
datasets: [
{
label: 'Completed',
yAxisID: 'y-axis-1',
type: 'bar',
backgroundColor:"grey",
borderColor: "black",
borderWidth: 1,
fill: true,
data: @Html.Raw(YLabels_Done),
},
{
label: 'In progress',
yAxisID: 'y-axis-1',
type: 'bar',
backgroundColor:"lightgreen",
borderColor: "black",
borderWidth: 1,
fill: true,
data: @Html.Raw(YLabels),
},
]
};
var myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#333',
boxWidth: 9,
fontColor: 'black',
fontFamily: '6px Montserrat',
usePointStyle: true,
}
},
hover: {
onHover: function (e) {
var point = this.getElementAtEvent(e);
if (point.length) e.target.style.cursor = "pointer";
else e.target.style.cursor = "default";
}
},
onClick: function (evt, item) {
alert(item.);
},
skipNull: true,
title: {
display: true,
fontSize: 18,
text: 'Number of Task '
},
tooltips: {
mode: 'index',
intersect: false,
/*
callbacks: {
label: function (tooltipItem) {
return tooltipItem.yLabel;
}
}
*/
},
//responsive: true,
scales: {
offset: true,
x: {
gridLines: {
offsetGridLines: true
}
},
xAxes: [{
stacked: true,
ticks: {
autoSkip: true,
fontSize: 15,
maxRotation: 45,
minRotation:45
},
}],
yAxes: [
{
stacked: true,
display: true,
position: 'left',
id: 'y-axis-1',
ticks: {
beginAtZero: false,
min: 0,
stepSize: 5,
fontSize: 15,
autoSkip: true,
callback: function (value, index, values) {
return value ;
}
}
},
{
//stacked: false,
display: true,
position: 'right',
id: 'y-axis-2',
scaleLabel: {
display: true,
labelString: 'unit'
},
ticks: {
beginAtZero: false,
fontSize: 15,
min: -50,
max: 50,
stepSize: 10,
autoSkip: true,
/* Include a dollar sign in the ticks
callback: function (value, index, values) {
return '$' + value;
}
*/
}
}
],
},
///to set the css of the font of the label
plugins: { ////by adding the plugin chartjs-plugin-labels.js
labels: {
render: function (args) {
// skip the zero label
var val = parseFloat(args.value);
if (val < 1) return "";
return parseFloat(args.value).toFixed(0);
},
arc: true,
fontSize: 15,
fontColor: 'black',
position: 'outside',
},
},
responsive: false,
chartArea: {
backgroundColor: 'White'
}
},
});
})
</script>