asp.net mvc - How to attach sql database to a javascript graph -

I am creating a website using asp mvc5 and I need to show some data on a view using the graph I have implemented a graph using javascript.

  & lt; Head & gt; & Lt; Script src = "../../ js / jquery-1.11.1.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "../../JS/chart.cript.js" & gt; & Lt; / Script & gt; @ * & Lt; Link rel = "stylesheet" href = "../../ css / last stylesheet css" & gt; * @ & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "col-md-12" & gt; & Lt; Div class = "panel-panel-default" & gt; & Lt; Div class = "panel-title" & gt; Daily booking & lt; / Div & gt; @ * & Lt; Div class = "panel-body" & gt; * @ @ * & Lt; Div class = "col-lg-2" & gt; & Lt; / Div & gt; & Lt; Div class = "col-lg-8" style = "background-color: # 4876FF;" & Gt; Show & lt; / Div & gt; & Lt; Div class = "colonel-lg-2" & gt; & Lt; / Div & gt; * @ & Lt; Br> & Lt; Br> & Lt; Div class = 'wrapper' & gt; & Lt; Canvas height = '150' id = 'canvas' width = '170' & gt; & Lt; / Canvas & gt; & Lt; / Div & gt; @ * & Lt; / Div & gt; * @ & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Script & gt; Var myData = {label: ["9:00", "12:00", "15:00", "18:00"], dataset: [{fillcolor: "rgba (072,118,225, .5)", stroke color : "RGBA (001001191)", point: color: "RGBA (0010011.11)", point sourcecode: "#FFF", data: [40, 25, 90, 40]}]} new chart (Document.getElementById ("canvas") .getContext ("2D"). Line (Myadata)    

My Has a database.

   name = "DefaultConnection" connectionString = "data source = acer-pc \ cad; initial catalog = IT integrated security = true;" provider name = " System.Data.SqlClient "/>  

In I want to get value from the customer_age table and show that in the graph. How should I do this?

< P> Without knowing the structure of your customer_age table, this should help you on your own path:

An MVC controller action (or more efficiently, a web API method) Use an AJAX call to fetch data from Then, when the data comes back, create your chart It seems that your chart needs two data arrays: instead of providing two different AJAX endpoint to return to two series for one label and for other values We will return an array of objects, each of which has two properties: one label and one corresponding value.

Example:

  $. Ajax ("url.Action", "YourAction", "YourController"), // data: {} // contains if you have to pass the parameter to type your query: 'get', success: Work (results) {if (Result.success) warning (result message); other {var myData = {label: result.data.map (function (i) {return i.label;}), dataset: [{FillColor: "RGBA (072,118,225, .5)", stroke color: "RGBA (0010011.11)", Bindring: "RGBA (0010011.11)", Point SourceCollar: "#FFF", Data : Results data. Map (Task (i) {return i.value;})}] New chart (document.getElementByI D ("canvas"). GetContext ("2d"). Line (myData)}}}});  

The controller action may look something like this:

  [HttpGet] Public action GetChartData () {try to get data from {// repository var data} Do = CustomerRepository.GetChartData (); // Convert the format required by Javascript - the repository method returns to Jason (new {success = true, data = (data from d to new {label = d.Label, value = d.Value}). ToArray )}, JsonRequestBehavior.AllowGet; } Hold (exception e) {Jason's back (new {success = false, message = message}, JsonRequestBehavior.AllowGet); }}