Trying To Access Controller In Javascript

My ultimate goal is to use information from my database to create a line graph using my MVC application. So far I have managed to gather this data using a view model and LINQ queri

Solution 1:

you can use this :

1 - In your controller :

*
*
ViewBag.Dico = model.dictionary;
return View("chartPage");

2 - in your chartPage.cshtml (or declare your variable globally 'Layout.cshtml'):

<script>var myPoints= @Html.Raw(Json.Encode(ViewBag.Dico));
</script>

3 - in ChartJs:

jQuery(document).ready(function() {
        var chart=newCanvasJS.Chart("moodgraph",{
        *
        *
        *
        },
        data: [{
            type: "line",
            indexLabelFontSize: 16,
            dataPoints: (typeof(myPoints) != "undefined" ? myPoints: [])
        }]
    });
    chart.render();

});

Solution 2:

using Chart.JS library you can make dynamic charts from the database data by following the next steps

Model: suppose you have model for graph data as following:

publicclassJsResultChart
    {
        publicstring Name { get; set; }
        publicdouble Value { get; set; } 
    }

---

Controller:

return your data from the controller (using model, viewbag..etc) as list

var JsResultChart= new List<JsResultChart> 
{
new JsResultChart{ Name ="first", Value = 100 }, //data will be fetched from dbnew JsResultChart{ Name ="second", Value = 200 },
};
Model.JsResultChart = JsResultChart;

---

View: add something like this:

<div class="row">
    <div class="col-md-12">
        <input type="hidden"id="Lables" name="Lables" value="@Json.Encode(Model.ChartData.Select(x => x.Name).ToList())" />
        <input type="hidden"id="Values" name="Values" value="@Json.Encode(Model.ChartData.Select(x => x.Value).ToList())">
        <canvas id="myChart" style="margin: 0 auto;" class="NotPrintable"></canvas>
        <div id="ResultsDiv"></div>
    </div>
</div>

---

javascript:

varNames = $("#Lavels").val();
varNumbers = $("#Values").val();
Names = JSON.parse(Names);
Numbers = JSON.parse(Numbers);
       
var data = {
    labels: Names,
    datasets: [{
        fill: false,
        data: Numbers,
        label: "Value"//you can write(label: Names) rather than (label: "Value")
    }]
};

var ctx = $("#myChart");
var barChart = newChart(ctx, {
    type: 'line',
    data: data,
    options: options //add your options
});