Load Graph using Chart.js with Dynamic Data ASP.net MVC-Core

Question

I am new to ASP.net MVC using Bootstrap to load a graph with dynamic data coming from the database. I use this link as guide and tutorial in starting. https://canvasjs.com/docs/charts/integration/asp-net-mvc-charts/

I was able to load the graph with static data, right now, I want to fill the graph with data dynamically that comes from the database.

Here's the codes started

patientService.cs - this will give a result set of patient's vital sign (height, weight and date recorded). One patient may have a multiple recorded vital sign per date. This will be the label and the data of the graph (height and date)

   public IEnumerable<VisitVitalSignVM> GetVisitVitalSignHeight(int patientId)
        {

            var patientList = _patient.GetAllPatient().Where(a => a.patientId.Equals(patientId));
            var registrationList = _registration.Get().Where(a => a.patientId.Equals(patientId));
            var visitVitalSignList = _visitVitaSign.Get();
            var dataCreatedDate = (from a in visitVitalSignList
                                   join b in registrationList on a.registrationId equals b.registrationId
                                   where a.registrationId == b.registrationId
                                   //select a).ToList();
                                   select new VisitVitalSignVM()
                                   {

                                       height = a.height,
                                       weight = a.weight,
                                       lastUpdatedDate = a.lastUpdatedDate
                                   }
                                   ).DefaultIfEmpty();
            return dataCreatedDate;
        }

Note that lastUpdatedDate represents the data for the x-axis and height represents the data for the y axis.

patient.cs - the will pull data from the service layer and forward result in viewModel through partial view.

 [HttpGet]
   public IActionResult GetVisitVitalSignDetails(int patientId, string type, string graph)
  {
      var visitSign = _patient.GetVisitVitalSignHeight(patientId);
      return PartialView("_ViewVisitVitalSignGraphDetails", visitSign);
  }

_partialViewPatient.cshtml - this will then receive the data needed to plot the graph. Currently, the code in the javascript are the static one. I am now lost, on how to plot the data from the VisitVitalSignVM Model to the datasets.

**@using UMP.ClinicalSystem.Models.Models;
@using UMP.ClinicalSystem.Models.Dto;

@model IEnumerable<VisitVitalSignVM>

@{
    Layout = null;
}

   <div id="chartContainer"> </div>



<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">


    var chart = new CanvasJS.Chart("chartContainer", {
            theme: "theme2",
            animationEnabled: true,
            title: {
                text: "Simple Column Chart in ASP.NET MVC"
            },
            subtitles: [
                { text: "Try Resizing the Browser" }
            ],
            data: [
            {
                type: "line", //change type to bar, line, area, pie, etc
                dataPoints: [
                { x: 10, y: 71 },
                { x: 20, y: 55 },
                { x: 30, y: 50 },
                { x: 40, y: 65 },
                { x: 50, y: 95 },
                { x: 60, y: 68 },
                { x: 70, y: 28 },
                { x: 80, y: 34 },
                { x: 90, y: 14 }
                ]
            }
            ]
        });
        chart.render();
</script>**

Do you mean you want the dataPoints values to come from the database? — user3559349
– user3559349, Commented Jul 24, 2017 at 6:16
the data are already available through the @model IEnumerable<VisitVitalSignVM> — rickyProgrammer
– rickyProgrammer, Commented Jul 24, 2017 at 6:19
You model would need to include a property which is (say) IEnumerable<DataPoints> Points where DataPoints contains properties double x and double y (or int). Then in the script you could use dataPoints: @Html.Raw(Json.Encode(Model.Points)) — user3559349
– user3559349, Commented Jul 24, 2017 at 6:19
Can you explain further, sorry I was totally new in here. thanks! — rickyProgrammer
– rickyProgrammer, Commented Jul 24, 2017 at 6:23

user3559349 · Accepted Answer · 2017-07-24 10:42:00Z

Your plugin requires that the data be an array of objects containing properties x and y

You need to first convert your view model collection to a javascript array, then build a new array of objects to pass to the dataPoints option.

In the view include @inject IJsonHelper Json; so you can serialize the model and then in the script

// convert your model to a javascript array
var model = @Html.Raw(Json.Serialize(Model));
// initialise a new array
var datapoints = [];
// build an array of objects
$.each(model, function(index, item) { 
    datapoints.push({ x: new Date(item.lastUpdatedDate), y: item.height }); 
});

and then modify the plug code to use the array

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "theme2",
    ....
    data: [{
        type: "line",
        dataPoints: datapoints // modify this
    }]
});
chart.render();

Collectives™ on Stack Overflow

Load Graph using Chart.js with Dynamic Data ASP.net MVC-Core

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related