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

<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>

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Laxmidhar Sahoo6y ago
1. <html>
2. <head>
3. head>
4. <body>
5. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js">script>
6. <canvas id="ctx" width="700">canvas>
7. body>
8. html>
9. <script>
10. var chart = new Chart(ctx, {
11. type: 'bar',
12. data: {
13. labels: ['Standing costs', 'Running costs'], // responsible for how many bars are gonna show on the chart
14. // create 12 datasets, since we have 12 items
15. // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
16. // put 0, if there is no data for the particular bar
17. datasets: [{
18. label: 'Washing and cleaning',
19. data: [0, 8],
20. backgroundColor: '#22aa99'
21. }, {
22. label: 'Traffic tickets',
23. data: [0, 2],
24. backgroundColor: '#994499'
25. }, {
26. label: 'Tolls',
27. data: [0, 1],
28. backgroundColor: '#316395'
29. }, {
30. label: 'Parking',
31. data: [5, 2],
32. backgroundColor: '#b82e2e'
33. }, {
34. label: 'Car tax',
35. data: [0, 1],
36. backgroundColor: '#66aa00'
37. }, {
38. label: 'Repairs and improvements',
39. data: [0, 2],
40. backgroundColor: '#dd4477'
41. }, {
42. label: 'Maintenance',
43. data: [6, 1],
44. backgroundColor: '#0099c6'
45. }, {
46. label: 'Inspection',
47. data: [0, 2],
48. backgroundColor: '#990099'
49. }, {
50. label: 'Loan interest',
51. data: [0, 3],
52. backgroundColor: '#109618'
53. }, {
54. label: 'Depreciation of the vehicle',
55. data: [0, 2],
56. backgroundColor: '#109618'
57. }, {
58. label: 'Fuel',
59. data: [0, 1],
60. backgroundColor: '#dc3912'
61. }, {
62. label: 'Insurance and Breakdown cover',
63. data: [4, 0],
64. backgroundColor: '#3366cc'
65. }]
66. },
67. options: {
68. responsive: false,
69. legend: {
70. position: 'right' // place legend on the right side of chart
71. },
72. scales: {
73. xAxes: [{
74. stacked: true // this should be set to make the bars stacked
75. }],
76. yAxes: [{
77. stacked: true // this also..
78. }]
79. }
80. }
81. });
82. script>
https://code.tutsplus.com/tutorials/getting-started-with-chartjs-line-and-bar-charts--cms-28384
+1