Home Forums Chart Support Display Chart using JSON data in ASP MVC

Display Chart using JSON data in ASP MVC

Viewing 11 posts - 1 through 11 (of 11 total)
  • #6439

    hi, i am trying to display a chart using Canvasjs in mvc but the chart does not display on the webpage. i want to use that from MS SQL using linq here is my code:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.Entity;
    using System.Linq;
    using System.Net;
    using System.Web;
    using System.Web.Mvc;
    using ContsoSite.Models;
    using Newtonsoft.Json;
    
    namespace ContsoSite.Controllers
    {
        public class DashboardController : Controller
        {
            //
            // GET: /Dashboard/
            public ActionResult Index()
            {
                return View();
            }
            public JsonResult GetData()
            {
                using (var db = new ContosoUniversityEntities ())
                {
                    var result = (from tags in db.Courses
                                  orderby tags.Title ascending
                                  select new { tags.Title, tags.Credits }).ToList();
                    return Json(JsonConvert.SerializeObject(result), JsonRequestBehavior.AllowGet);
                    //return Content(JsonConvert.SerializeObject(_dataPoints), "application/json");
                }
            }
    }
    
    here is my script
    
    @model IEnumerable<ContsoSite.Models.ContosoUniversityEntities>
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    <script src="~/Scripts/jquery-2.1.1.min.js"></script>
    <script src="~/Scripts/jquery-2.1.1.js"></script>
    <script src="~/Scripts/canvasjs.min.js"></script>
    @*<script src="~/Scripts/canvasjs.js"></script>*@
    @*<script src="~/Scripts/excanvas.js"></script>*@
    
    <script type="text/javascript">
        $(document).ready(function () {
    
            $.getJSON("/Dashboard/GetData/", function (data) {
                var chart = new CanvasJS.Chart("chartContainer", {
                    theme: "theme2",//theme1
                    title: {
                        text: "CanvasJS Charts in ASP.Net MVC using AJAX & JSON"
                    },
                    data: [
                    {
                        // Change type to "bar", "splineArea", "area", "spline", "pie",etc.
                        type: "column",
                        dataPoints: data
                    }
                    ]
                });
    
                chart.render();
            });
    
        });
    </script>
    
        <body>
            <div id="chartContainer" style="height: 300px; width: 100%;"></div>
            
    
        </body>
    
    #6454

    [Update]

    Now we have a Tutorial on Creating Charts from JSON Data in ASP.NET MVC.

    Can you please post the JSON Response, so that we can figure out where exactly is the problem.

    #6455

    this is the error i get from the console:

    Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3698/__browserLink/requestData/abb9896d4acf454387c218fde6e0fdab
    Uncaught TypeError: Cannot read property ‘getTime’ of undefined canvasjs.min.js:76

    #6456

    this is the json result when i query the page: http://localhost:3698/Dashboard/GetData- i get the data like so:

    “[{\”Title\”:\”Chemistry\”,\”Credits\”:4},{\”Title\”:\”Economics\”,\”Credits\”:3},{\”Title\”:\”Literature\”,\”Credits\”:3}]”

    #6459

    @lonwabogiqwa,

    You basically need to loop through the JSON data and parse it to the format accepted by CanvasJS before passing it to the chart options. Please check the below code snippet –

    var dataPoints =[];	
    $.getJSON("/Dashboard/GetData/",function(data) {
      for(var i=0; i<=data.length-1; i++) {
        dataPoints.push({label:data[i].Title,y:parseInt(data[i].Credits)});
      }
      var chart = new CanvasJS.Chart("chartContainer", {
        theme: "theme2",
        title: {
          text: "CanvasJS Charts in ASP.Net MVC using AJAX & JSON"
        },
        data: [
          {
            type: "column",
            dataPoints: dataPoints
          }
        ]
      });
      chart.render();
    });

    CanvasJS Charts in ASP.Net MVC using JSON and AJAX

    #6460

    Yes it’s working. Thank you so much!

    #6486

    Hi, sorry i am a beginner with this. i now want to display project data in a line graph like a multiline series or single line using the same script you show above but i seem to have a problem with date and the graph is not displaying. i want to display a chart that can show project status versus completion date. my controller looks like this:

    namespace ChartDemo.Controllers
    {
    public class DashboardController : Controller
    {
    //
    // GET: /Dashboard/
    public ActionResult Index()
    {
    return View();
    }
    public ContentResult GetData()
    {
    using (var db = new QualityMatricsEntities1())
    {
    var result = (from tags in db.Projects
    orderby tags.CompletionDate ascending
    select new { tags.CompletionDate, tags.ProjectStatus,tags.ProjectName }).ToList();
    //return Json(JsonConvert.SerializeObject(result), JsonRequestBehavior.AllowGet);
    return Content(JsonConvert.SerializeObject(result), “application/json”);

    }
    }

    }
    }

    #6491

    Hi,
    Can you please post the JSON Response. So that I can help you more efficiently.

    #6494

    here is my JSON response:

    [{“CompletionDate”:”2014-09-30T00:00:00″,”ProjectStatus”:”behind schedule”,”ProjectName”:”Loans”},{“CompletionDate”:”2014-11-30T00:00:00″,”ProjectStatus”:”On Track”,”ProjectName”:”AppSuite”},{“CompletionDate”:”2014-12-30T00:00:00″,”ProjectStatus”:”Ahead of Schedule”,”ProjectName”:”Dashboard”}]

    #6499

    [Update]

    Now we have a Tutorial on Creating Charts from JSON Data in ASP.NET MVC.

    Can you please give us a mockup or a link that depicts the chart that you want to create?


    Sunil Urs

    #6502

    something like the chart shown here http://techbrij.com/chart-jquery-flot-asp-net-web-api-mvc but ofcourse using the same code above and pushing JSON. if you look at my JSON Response, for example displaying project status vs completion date or number of bugs in a life time of a project.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.