title: Displaying data into a graph in web service ASP.NET MVC Framework
body: <p>I am very new to web services and I have just recently started developing a service that receives data from a raspberry pi. All the data sent from the Raspberry Pi is stored inside the Microsoft SQL server, which I have established a connection with my web service. Right now, I am able to view the data when I click on a hyperlink, but comes out in a notepad in json format. The following is my code for the controller:</p>
  
  <pre><code>namespace HelloWorld.Controllers
  {
      public class SecondlyReadingDatasController : ApiController
      {
  
          private cloudsqlEntities db = new cloudsqlEntities();
  
          // GET: api/SecondlyReadingDatas
          public IQueryable&lt;SecondlyReading&gt; GetSecondlyReadings()
          {
              SecondlyReading sec = db.SecondlyReadings.First();
              return db.SecondlyReadings;
          }
  </code></pre>
  
  <p>Below is an image of the data that I am trying to retrieve:
  <a href="https://i.stack.imgur.com/SzNtH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SzNtH.jpg" alt="enter image description here"></a></p>
  
  <p>I have read up online that using Ajax and Highcharts can be used to display data, however, I am really confused. </p>
  
  <p>My main questions are:</p>
  
  <ul>
  <li>Where do I implement the code for the Ajax feature? In the
  Index.cshtml or_Layout.cshtml?</li>
  <li>Do I need to add anything in my model or controller?</li>
  <li>Do I need to install any packages or libraries? I have installed
  DotNet.HighCharts already</li>
  </ul>
  
  <p>I have tried placing the following code in the _Layout.cshtml, however, I am not getting anything:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $.ajax({
    url: 'http://localhost/TestWebsite/api/SecondlyReadingDatas',
    success: function(singleSeries) {
      Highcharts.chart('container', {
        series: [singleSeries]
      });
    }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I am not sure if this is the complete set of code that is required only. I have tried looking at the following links, but I am having a hard time understanding as this is my first time working on Ajax. Would appreciate any assistance</p>
  
  <p>Referenced links:</p>
  
  <p><a href="http://www.c-sharpcorner.com/UploadFile/1f3f2a/charting-in-mvc/" rel="nofollow noreferrer">http://www.c-sharpcorner.com/UploadFile/1f3f2a/charting-in-mvc/</a></p>
  
  <p><a href="https://docs.microsoft.com/en-us/aspnet/web-pages/overview/data/7-displaying-data-in-a-chart" rel="nofollow noreferrer">https://docs.microsoft.com/en-us/aspnet/web-pages/overview/data/7-displaying-data-in-a-chart</a></p>
  
  <p><a href="https://www.codeproject.com/Articles/820349/Highcharts-in-asp-net-using-jquery-ajax" rel="nofollow noreferrer">https://www.codeproject.com/Articles/820349/Highcharts-in-asp-net-using-jquery-ajax</a>
  <a href="https://stackoverflow.com/questions/12223972/load-data-into-highcharts-with-ajax">Load data into Highcharts with Ajax</a></p>
  
  <p><a href="https://csharptrenches.wordpress.com/2013/08/21/how-to-use-highcharts-js-with-asp-net-mvc-4/" rel="nofollow noreferrer">https://csharptrenches.wordpress.com/2013/08/21/how-to-use-highcharts-js-with-asp-net-mvc-4/</a></p>
  
  <p><a href="https://stackoverflow.com/questions/19236113/creating-highchart-with-ajax-json-data">creating highchart with ajax json data</a></p>
  
  <p><a href="https://stackoverflow.com/questions/13157693/highcharts-load-data-via-ajax">HighCharts load data via ajax</a></p>