How to parse data to graph in MVC

Question

I have this query.

SELECT p.courseCategory, COUNT(c.courseField) AS courseCount
from ProgramCategories p left outer join  CourseCategory c
on(c.courseField = p.courseCategory)
group by p.courseCategory;

I want to dispaly courseCategory and its count in a bar Chart.

X axis- for courseCategory
Y axis- for courseCount

This is the barchart what want in View. This is demo chart working nicely.

<canvas id="income" width="600" height="400"></canvas>

<script>
      var barData = {
      labels: ["January", "February", "March", "April", "May", "June"],
      datasets: [
         {
            fillColor: "#48A497",
            strokeColor: "#48A4D1",
            data: [456, 479, 324, 569, 702, 600]
         }]
      }
      var income = document.getElementById("income").getContext("2d");
      new Chart(income).Bar(barData);
 </script>

To labels I want to set CourseCategories and for data I want to set courseCount. I don't know how to set these records to my View. How the method in controller should be and How I call that in my razor view.

Checkout http://stackoverflow.com/questions/20471511/how-to-get-data-from-model-to-javascript-mvc-4 — potatopeelings, Sep 07 '15 at 11:10

score 0 · Answer 1 · answered Sep 08 '15 at 09:43

You can use Chart.Mvc which is a .NET wrapper on chart.js library: http://www.martinobordin.it/Chart.Mvc/Home/QuickStart

This should solve your problem.

Of course you can look to source code (https://github.com/martinobordin/Chart.Mvc) and do it your own way :)

How to parse data to graph in MVC

1 Answers1