Showing Bar chart in asp.net (html,java script)

Question

Hi All, I have requirement like need to show verticl Bar graph example like I have DB Jobs total -21 in this i need to show in bar graph(vertical) has 1 Failed , 20 is running and total count of Jobs (total 3 bar graphs ) i need to show in Bar chart graph as vertical. I am getting total count of Jobs on each running,Failed ,total and also i need to show Month on Xaxis on each Jobs. I am using asp.net C# . Thanks Anand

Laxmidhar Sahoo · Answer

html > head > head > body > script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" > script > canvas id = "ctx" width = "700" > canvas > body > html > script > var chart = new Chart(ctx, { type: 'bar', data: { labels: ['Standing costs', 'Running costs'], // responsible for how many bars are gonna show on the chart // create 12 datasets, since we have 12 items // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs') // put 0, if there is no data for the particular bar datasets: [{ label: 'Washing and cleaning', data: [0, 8], backgroundColor: '#22aa99' }, { label: 'Traffic tickets', data: [0, 2], backgroundColor: '#994499' }, { label: 'Tolls', data: [0, 1], backgroundColor: '#316395' }, { label: 'Parking', data: [5, 2], backgroundColor: '#b82e2e' }, { label: 'Car tax', data: [0, 1], backgroundColor: '#66aa00' }, { label: 'Repairs and improvements', data: [0, 2], backgroundColor: '#dd4477' }, { label: 'Maintenance', data: [6, 1], backgroundColor: '#0099c6' }, { label: 'Inspection', data: [0, 2], backgroundColor: '#990099' }, { label: 'Loan interest', data: [0, 3], backgroundColor: '#109618' }, { label: 'Depreciation of the vehicle', data: [0, 2], backgroundColor: '#109618' }, { label: 'Fuel', data: [0, 1], backgroundColor: '#dc3912' }, { label: 'Insurance and Breakdown cover', data: [4, 0], backgroundColor: '#3366cc' }] }, options: { responsive: false, legend: { position: 'right' // place legend on the right side of chart }, scales: { xAxes: [{ stacked: true // this should be set to make the bars stacked }], yAxes: [{ stacked: true // this also.. }] } } }); script > https://code.tutsplus.com/tutorials/getting-started-with-chartjs-line-and-bar-charts--cms-28384

Sanwar Ranwa · Answer

Hi Annand https://www.c-sharpcorner.com/UploadFile/asmabegam/draw-Asp-Net-bar-chart-using-html5-and-jquery/ follow the article and try to implement.

anand m · Answer

I dont have any code

Laxmidhar Sahoo · Answer

hi Display some codes