简体   繁体   中英

Displaying data into a graph in web service ASP.NET MVC Framework

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:

namespace HelloWorld.Controllers
{
    public class SecondlyReadingDatasController : ApiController
    {

        private cloudsqlEntities db = new cloudsqlEntities();

        // GET: api/SecondlyReadingDatas
        public IQueryable<SecondlyReading> GetSecondlyReadings()
        {
            SecondlyReading sec = db.SecondlyReadings.First();
            return db.SecondlyReadings;
        }

Below is an image of the data that I am trying to retrieve: 在此处输入图片说明

I have read up online that using Ajax and Highcharts can be used to display data, however, I am really confused.

My main questions are:

  • Where do I implement the code for the Ajax feature? In the Index.cshtml or_Layout.cshtml?
  • Do I need to add anything in my model or controller?
  • Do I need to install any packages or libraries? I have installed DotNet.HighCharts already

I have tried placing the following code in the _Layout.cshtml, however, I am not getting anything:

<script type="text/javascript">
$.ajax({
  url: 'http://localhost/TestWebsite/api/SecondlyReadingDatas',
  success: function(singleSeries) {
    Highcharts.chart('container', {
      series: [singleSeries]
    });
  }
});
</script>

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

Referenced links:

http://www.c-sharpcorner.com/UploadFile/1f3f2a/charting-in-mvc/

https://docs.microsoft.com/en-us/aspnet/web-pages/overview/data/7-displaying-data-in-a-chart

https://www.codeproject.com/Articles/820349/Highcharts-in-asp-net-using-jquery-ajax Load data into Highcharts with Ajax

https://csharptrenches.wordpress.com/2013/08/21/how-to-use-highcharts-js-with-asp-net-mvc-4/

creating highchart with ajax json data

HighCharts load data via ajax

In your script you have to replace 'container' with the id of an element (the contianer) which will contain the chart...

Highcharts.chart('container', {

So if you had a

<div id='chartContainer'></div>

Then you can change it to;

Highcharts.chart('chartContainer', {

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM