title: Line from Chart.js in C# asp.net mvc does not work
body: <p>I'm having a problem with C# asp.net mvc. The line in my chart is not getting displayed. I tried many different charts but it's not working. The objective is using my database values to draw the line.</p>
  <blockquote>
  <p>My View: Estatisticas.cshtml</p>
  </blockquote>
  <pre><code>  @model Estágio_TP.Models.Alerta
  
  @{
      ViewBag.Title = &quot;Estatisticas&quot;;
  }
  
  &lt;h2&gt;Estatisticas  de @Html.DisplayFor(model =&gt; model.nomeAlerta)&lt;/h2&gt;
  
  
  
  
  &lt;!DOCTYPE html&gt;
   
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; /&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;https://canvasjs.com/assets/script/jquery-1.11.1.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;https://canvasjs.com/assets/script/canvasjs.min.js&quot;&gt;&lt;/script&gt;
      &lt;title&gt;Doughnut Chart&lt;/title&gt;
  
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; /&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;https://canvasjs.com/assets/script/jquery-1.11.1.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;https://canvasjs.com/assets/script/canvasjs.min.js&quot;&gt;&lt;/script&gt;
      &lt;title&gt;Gráfico Chart&lt;/title&gt;
  
      &lt;script src=&quot;~/Content/js/Chart_est.js&quot;&gt;&lt;/script&gt;
  
      
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;chartContainer1&quot; style=&quot;width: 100%; height: 500px;display: inline-block;&quot;&gt;&lt;/div&gt;
      &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;div id=&quot;chartContainer2&quot; style=&quot;width: 100%; height: 500px;display: inline-block;&quot;&gt;&lt;/div&gt;
      &lt;!--&lt;div class=&quot;card-body&quot;&gt;
          &lt;div class=&quot;chart-area&quot;&gt;
               &lt;canvas id=&quot;teste_est&quot;style=&quot;width: 100%; height: 500px;display: inline-block;&quot;&gt;&lt;/canvas&gt;
          &lt;/div&gt;
      &lt;/div&gt;--&gt;
      
  
      &lt;script type=&quot;text/javascript&quot;&gt;
  
          function chart1(){
              var chart1 = new CanvasJS.Chart(&quot;chartContainer1&quot;, {
                  title: {
                      text: &quot; @Html.DisplayFor(model =&gt; model.nomeTrigger)&quot;
                  },
                  animationEnabled: true,
                  legend: {
                      fontSize: 20,
                      fontFamily: &quot;Helvetica&quot;
                  },
                  theme: &quot;light2&quot;,
                  data: [
                      {
                          type: &quot;doughnut&quot;,
                          indexLabelFontFamily: &quot;Garamond&quot;,
                          indexLabelFontSize: 20,
                          indexLabel: &quot;{label} {y}%&quot;,
                          startAngle: -20,
                          showInLegend: true,
                          toolTipContent: &quot;{legendText} {y}%&quot;,
                          dataPoints: [
                              { y: @ViewData[&quot;valor&quot;], legendText: &quot;Em Uso&quot;, label: &quot;Em Uso&quot;
          },
          { y: 100 - @ViewData[&quot;valor&quot;], legendText: &quot;Livre&quot;, label: &quot;Livre&quot; },
                      ],
  
                      //dataPoints: @Html.Raw(ViewBag.DataPoints),
                  }
                  ]
              });
          chart1.render();
          }
  
  
          $(document).ready(function () {
              showChart3();
          });
        function showChart3() {
  
  
            $.get(&quot;/alertas/json/&quot;, function (data) {
  
                var tempo = [];
                var valor = [];
                for (var i in data) {
                    tempo.push(data[i].tempo);
                    valor.push(data[i].valor);
                }
                
  
                var chart = new CanvasJS.Chart(&quot;chartContainer2&quot;, {
                    animationEnabled: true,
                    theme: &quot;light2&quot;,//light1
                    title: {
                        text: &quot;Gráfico ao Longo do Dia&quot;
                    },
                    data: [
                        {
                            // Change type to &quot;bar&quot;, &quot;splineArea&quot;, &quot;area&quot;, &quot;spline&quot;, &quot;pie&quot;,etc.
                            type: &quot;line&quot;,
                            dataPoints: data
                        }
                    ]
                });
  
                chart.render();
            });
             
          }
  
  
  
          function start() {
              chart1();
              showChart3();           
          }
  
          window.onload = start();
          
  
   
      &lt;/script&gt;
  
     &lt;!-- &lt;script src=&quot;~/Content/js/teste_estatistica.js&quot;&gt;&lt;/script&gt;--&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;     
  </code></pre>
  <blockquote>
  <p>Controller:</p>
  </blockquote>
  <pre><code>        public ContentResult JSON(string id)
      {
          var teste_xx = db.Conteudos.Where(a =&gt; a.nomeAl == id)
           .Where(a =&gt; a.Data_cont.Day == DateTime.Now.Day)
           .OrderBy(a =&gt; a.Data_cont)
           .Select(a =&gt; new
           {
               valor = a.max_valor,
               tempo = a.Data_cont //.ToString(&quot;hh:mm&quot;)
            });
  
          List&lt;DataPoint&gt; dataPoints;
          dataPoints = new List&lt;DataPoint&gt;();
  
          foreach (var result in teste_xx)
          {
              //list2.Add(result.tempo.ToString());
              //list2.Add(result.valor.ToString());
              var tempo = result.tempo;
              var valor = result.valor;
              dataPoints.Add(new DataPoint(tempo, valor));
          }
  
          JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };
  
          return Content(JsonConvert.SerializeObject(dataPoints, _jsonSetting), &quot;application/json&quot;);
      }
  
  }
  </code></pre>
  <blockquote>
  <p>DB: Only need the DateTime(&quot;hh:mm:ss&quot;) and the max_value</p>
  </blockquote>
  <p>Database
  <a href="https://i.stack.imgur.com/jeSEy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jeSEy.png" alt="Database" /></a></p>