Hi sir,
I have a static gantt chart code, i want to populated it from database so that months on y axis and time on x axis.
My database table name test is like this.
months nvarchar(50)
starttime nvarchar(50)
endtime nvarchart(50)
i want to use this query
select months, starttime, endtime from test
to populate gantt chart.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mytest.aspx.cs" Inherits="WebApplication1.mytest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting Started with Chart JS with www.chartjs3.com</title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100vw;
height: 40px;
background: #1A1A1A;
color: rgba(54, 162, 235, 1);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(54, 162, 235, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 700px;;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(54, 162, 235, 1);
background: white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="chartMenu">
<p>WWW.CHARTJS3.COM (Chart JS <span id="chartVersion"></span>)</p>
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script>
// setup
const data = {
// labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Weekly Sales',
data: [
{ x: ['2022-10-03', '2022-10-06'], y: 'Task 1' },
{ x: ['2022-10-06', '2022-10-12'], y: 'Task 2' },
{ x: ['2022-10-09', '2022-10-12'], y: 'Task 3' },
{ x: ['2022-10-12', '2022-10-21'], y: 'Task 4' },
{ x: ['2022-10-15', '2022-10-24'], y: 'Task 5' },
{ x: ['2022-10-18', '2022-10-30'], y: 'Task 6' }
],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1,
borderSkipped: false,
borderRadius: 10,
barPercentage: 0.5
}]
};
//todayLine plugin block
const todayLine = {
id: 'todayLine',
afterDatasetsDraw(chart, args, pluginOptions) {
const { ctx, data, chartArea: { top, bottom, left, right }, scales: { x, y } } = chart;
ctx.save();
ctx.beginPath();
ctx.lineWidth = 3;
}
}
// config
const config = {
type: 'bar',
data,
options: {
indexAxis: 'y',
scales: {
x: {
type: 'time',
time: {
unit: 'day'
},
min: '2022-10-01',
max: '2022-10-31'
}
}
},
plugins:[todayLine]
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
// Instantly assign Chart.js version
const chartVersion = document.getElementById('chartVersion');
chartVersion.innerText = Chart.version;
</script>
</form>
</body>
</html>
I don't know how to write c# code for this.
