Home forums Using CanvasJS Display Chart using JSON data in ASP MVC

Tagged: , ,

This topic contains 10 replies, has 3 voices, and was last updated by  lonwabogiqwa 2 years, 4 months ago.

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

    lonwabogiqwa
    Participant

    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

    Anjali
    Participant

    [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

    lonwabogiqwa
    Participant

    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

    lonwabogiqwa
    Participant

    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

    Anjali
    Participant

    Hi,
    You basically need to transform your JSON data into a format supported by CanvasJS.

    Here is an example :

    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();
    });

    #6460

    lonwabogiqwa
    Participant

    Yes it’s working. Thank you so much!

    #6486

    lonwabogiqwa
    Participant

    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

    Anjali
    Participant

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

    #6494

    lonwabogiqwa
    Participant

    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

    Sunil Urs
    Keymaster

    [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

    lonwabogiqwa
    Participant

    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.