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)

Tagged: , ,

  • July 9, 2014 at 3:47 pm #6439

    lonwabogiqwa

    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>
    July 11, 2014 at 11:11 am #6454

    Anjali

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

    July 11, 2014 at 12:20 pm #6455

    lonwabogiqwa

    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

    July 11, 2014 at 12:22 pm #6456

    lonwabogiqwa

    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}]”

    July 13, 2014 at 3:43 pm #6459

    Anjali

    @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

    July 14, 2014 at 11:20 am #6460

    lonwabogiqwa

    Yes it’s working. Thank you so much!

    July 16, 2014 at 7:41 pm #6486

    lonwabogiqwa

    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”);

    }
    }

    }
    }

    July 17, 2014 at 11:41 am #6491

    Anjali

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

    July 17, 2014 at 11:52 am #6494

    lonwabogiqwa

    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”}]

    July 19, 2014 at 1:55 pm #6499

    Sunil Urs

    [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

    July 22, 2014 at 5:43 pm #6502

    lonwabogiqwa

    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)

Tagged: , ,

You must be logged in to reply to this topic.