0
\$\begingroup\$

I displayed and styled the chart.js and am also using mock data in the array, I just can't get my head around how to populate the data in the chart.js using MVC 5. I have tried lots of different methods and it's displaying data but not displaying the chart. Ideally, I need two datasets; one is for the weekly expense and one for the monthly expense. If anyone can suggest or point me in the right direction it would be much appreciated.

Index.cshtml

 <div style="width: 80%;">
        <canvas id="barChart" heigh="400" width="400"></canvas>
    </div>
    <script>

        var chart = document.getElementById("barChart").getContext('2d');
        Chart.defaults.global.animation.duration = 2000;
        var barChart = new Chart(chart,
            {
                type: 'bar',
                data: {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    datasets: [{
                            label: 'Weekly Expenses',
                            fill: true,
                            barTension: 0.1,
                            borderColor: '#2C3E50',  
                            borderWidth: 2,
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: "#2C3E50",
                            pointBackgroundColor: "#fff",
                            pointBorderWidth: 2,
                            pointHoverRadius: 8,
                            pointHoverBackgroundColor: "#2C3E50",
                            pointHoverBorderColor: "#2C3E50",
                            pointHoverBorderWidth: 5,
                            pointRadius: 10,
                            PointHitRadius:10,
                            data: [20,30,40,50,60,70,80,90,100,120,140,50]
                    },
                        {
                            label: 'Monthly Expenses',
                            fill: true,
                            barTension: 0.8,
                            backgroundColor: '#2C3E50',
                            borderColor: '#f0c419',  
                            borderWidth: 2,
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: "#f0c419",
                            pointBackgroundColor: "#fff",
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: "#f0c419",
                            pointHoverBorderColor: "#f0c419",
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            PointHitRadius:1,
                            data: /*[10,20,30,40,50,60,70,80,90,100,110,120]*/ data
                        }
                    ]
                },
                options: {
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    beginAtZero: true,
                                },
                            }]
                    }
                }

            });
    </script>
\$\endgroup\$
  • \$\begingroup\$ Hi. If your code is not finished - perhaps the quesion belongs to stackoverflow? Here on code-review the aim is to work on working code to improve it. \$\endgroup\$ – jakubiszon Dec 12 '19 at 7:23
  • \$\begingroup\$ Hi @jakubiszon the code is finished and it works perfectly that's what I need improvement. \$\endgroup\$ – beetle_juice Dec 12 '19 at 9:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.