Implement HTML5 Canvas charts using Chart.js in ASP.Net

Last Reply 3 months ago By Mudassar

Posted 3 months ago

Hi Friends

i'm using Chart Bar in my page (Chart.js) such as below :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DataBase Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
</head>
<body>
    
    <div class="container" style="width:50%;height:500px;">
        <canvas id="myChart"></canvas>
    </div>
</body>

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['user1', 'user2', 'user3', 'user4', 'user5', 'user6', 'user7'],
            datasets: [{
                label: 'Sum(Countticket)',
                data: [12, 19, 3, 17, 6, 3, 7],
                backgroundColor: "rgba(153,255,51,0.6)"
            }, {
                label: 'Sum(Priceticket)',
                data: [2, 29, 5, 5, 2, 3, 10],
                backgroundColor: "rgba(255,153,0,0.6)"
            }]
        }
    });
</script>
</html>

my table in datase is this :

 

CREATE TABLE [Customers](
	[id] [int] IDENTITY(1,1) NOT NULL,
	[codecenter] [int] NULL,
	[usercode] [int] NULL,
	[codeprogram] [int] NULL,
	[dateservice] [nvarchar](50) NULL,
	[sans] [nvarchar](50) NULL,
	[countticket] [int] NULL,
	[description] [ntext] NULL,
	[priceticket] [bigint] NULL
)

now i want show sum(countticket) & sum(priceticket) for every usercode in my chart.

please Guide me i need that

thanks alot


Posted 3 months ago

Hi dear Mudassar

sorry i couldn't Implementation in my chart bar, i changed the source code and not word :(

I do not know much i want as that chart bar in first topic.

thanks


Posted 3 months ago

We can give reference article and you have to code.

If you are stuck in code you can share and and we can correct.

But we cannot write code as per your Database table.