15 October 2015

Using Chart.js with MVC



This is how the view might look

 @model wapitest.Models.ChartData  
 <!doctype html>  
 @{  
   ViewBag.Title = "Index";  
   Layout = null;  
 }  
 <html>  
 <head>  
   <title>Line Chart</title>  
   <script src="~/Scripts/Chart.js"></script>  
 </head>  
 <body>  
   @Model.title  
   <div style="width:30%">  
     <div>  
       <canvas id="canvas" height="450" width="600"></canvas>  
     </div>  
   </div>  
   <script>  
           var lineChartData = {  
             labels : @Html.Raw(Model.label) ,  
                datasets : [  
                     {  
                          label: "D1",  
                          fillColor : "rgba(220,220,220,0.2)",  
                          strokeColor : "rgba(220,220,220,1)",  
                          pointColor : "rgba(220,220,220,1)",  
                          pointStrokeColor : "#fff",  
                          pointHighlightFill : "#fff",  
                          pointHighlightStroke : "rgba(220,220,220,1)",  
                          data : @Model.data  
                     },  
                     {  
                          label: "D2",  
                          fillColor : "rgba(151,187,205,0.2)",  
                          strokeColor : "rgba(151,187,205,1)",  
                          pointColor : "rgba(151,187,205,1)",  
                          pointStrokeColor : "#fff",  
                          pointHighlightFill : "#fff",  
                          pointHighlightStroke : "rgba(151,187,205,1)",  
                          data : [7,6,5,4,3,2,1]  
                     }  
                ]  
           }  
      window.onload = function(){  
           var ctx = document.getElementById("canvas").getContext("2d");  
           window.myLine = new Chart(ctx).Line(lineChartData, {  
                responsive: true  
           });  
      }  
   </script>  
 </body>  
 </html>  


This is the model

 using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Web;  
 namespace wapitest.Models  
 {  
   public class ChartData  
   {  
     public string label { get; set; }  
     public string data { get; set; }  
     public string title { get; set; }  
   }  
 }  


And this is the controller function

     public ActionResult Chart()  
     {  
       ViewBag.Title = "Line chart";  
       ChartData cd = new ChartData();  
       cd.title = "Chart Title";  
       cd.data = "[1,5,10,15,5,4,3]";  
       cd.label = @"[""mon"", ""tue"", ""wed"", ""thu"", ""fri"", ""sat"", ""sun""]";  
       return View(cd);  
     }  

2 comments:

  1. Kind of lost where you have data: @Model.data....what is .data??

    ReplyDelete
    Replies
    1. data is

      ChartData cd = new ChartData();
      cd.title = "Chart Title";
      cd.data = "[1,5,10,15,5,4,3]";
      cd.label = @"[""mon"", ""tue"", ""wed"", ""thu"", ""fri"", ""sat"", ""sun""]";

      as per the controller function

      Sorry for the late reply, only just saw your comment and work has been busy for the last few months

      Delete