Utilizing HighChart in ASP.NET MVC for Dynamic Data Visualization from a Database

I am completely new to ASP.NET MVC and I am trying to show data from a database in a Highchart using Visual Studio 2015. In my controller, I have the following code to retrieve data from the database:

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;
        }
    }
}

This is my model:

namespace HelloWorld.Models
{
    using System;
    using System.Collections.Generic;

    public partial class SecondlyReading
    {
        public int Id { get; set; }
        public int ChannelID { get; set; }
        public string TimeStamp { get; set; }
        public double RMSVoltage { get; set; }
        public double Frequency { get; set; }
        public double RMSCurrent { get; set; }
        public double RealPower { get; set; }
        public double ReactivePower { get; set; }
        public double ApparentPower { get; set; }
        public double PowerFactor { get; set; }
        public string DeviceId { get; set; }
    }
}

When I enter /api/SecondlyReadingDatas in my browser, I can retrieve data in JSON format. However, my goal is to display this data in a line chart using Highcharts. I am aware that I need to include code like the following to visualize the data:

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

I have also added DotNet.HighChart to my project:

https://i.sstatic.net/NKt4m.jpg

I have two main queries:

  • Is there any distinction between downloading the Highchart library from the website and referencing it in Visual Studio, and installing DotNet.HighChart in Visual Studio itself?
  • Where should I insert the
    <script type="text/javascript">
    code? In the model, controller, or _Layout.cshtml?

Answer №1

Query 1

DotNet.HighCharts comes with various JavaScript files that can be utilized based on the specific application requirements.

https://i.sstatic.net/A8QOV.jpg

Query 2

It is essential to include

<script type="text/javascript">
in the View for client-side operations, while Model and Controller are predominantly utilized for server-side functionalities.

Refer to this article to delve deeper into the implementation of Highcharts in ASP.NET MVC.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The reactivity of Vuex and Vue does not work as expected when a dictionary is used as a

What is the best approach to make a dictionary reactive as one of my store variables? Unlike an array, dictionaries are not reactive by default. Here's a minimal example I've created: Check out this example on CodeSandbox ...

Clearing Arrays in React Native Using useState

I'm struggling with the following code which aims to create an animated polyline for a map. I came across some examples online, but they were using outdated methods and didn't include useEffect or useState. I can't seem to clear the polylin ...

Rearrange object based on several criteria - JavaScript

var numbers = { "value": [{ "num1": 1, "num2": 10 }, { "num1": 15, "num2": 13 }, { "num1": 26, "num2": 24 }, { "num1": 6, "num2": 25 }, { "num1": 15, "num2": 20 ...

Once this code is executed, Javascript ceases to function

I have developed a code snippet to create a typing effect similar to a command console. While the code is functioning well on its own, any additional code I add after it seems to malfunction. I've spent quite some time troubleshooting this issue witho ...

An Exploration into the Error Situations of NPM Request Library

I'm encountering an issue with the callback in my request function. I'm trying to figure out the specific circumstances under which an error is passed to this callback. const req = require('request'); req('http://www.google.com&ap ...

Managing multiple URLs in a MEAN Stack application

Currently, I'm working on a MEAN stack project to implement a CRUD system for managing courses. One specific aspect that is giving me trouble is figuring out how to handle unique URLs for each course I create. As of now, I am using routeprovider for t ...

Is it possible to create my TypeORM entities in TypeScript even though my application is written in JavaScript?

While I find it easier to write typeorm entities in TypeScript format, my entire application is written in JavaScript. Even though both languages compile the same way, I'm wondering if this mixed approach could potentially lead to any issues. Thank yo ...

Inquiry Regarding Delivery of .Net Client DLL

Created a .Net DLL that implements a WCF client to communicate with a WCF service, enabling data transfer from the client to the server. This DLL is currently used in client programs at work and now there is a need to incorporate it into a web page for de ...

Using Typeof in an IF statement is successful, but attempting to use ELSE with the same

My goal is to create a JavaScript variable called str. In case the ID idofnet doesn't exist, I would like to prompt the user for a value to assign to str. However, if idofnet does exist, then I want to retrieve its value and assign it to str. This is ...

Where the package.json file resides

Is there a designated location for the package.json file in a project, like within the project directory? Where should the package.json file be located in a multi-component project? What is the significance of having version 0.0.0 in th ...

Transitioning to TypeScript has brought the promise of imports returning once again

I've been facing some challenges while migrating my extensive project to TypeScript, particularly with handling imports. Being relatively new to programming, I'm unsure if my previous approach was considered bad practice. Previously, I organized ...

Is it possible to consolidate React and React-DOM into a unified library instead of having them separate?

Is it possible to combine React.JS and React-DOM.JS into a single library? In all the web applications I've encountered, we always have to import both libraries separately. Have there been any cases where either of these libraries can be used on its ...

What is the proper way to specify a file destination in React?

After reading this article on downloading objects from GCP Cloud storage bucket, I'm curious about setting the file destination dynamically in React. Is there a way to achieve this? The article can be found at: https://cloud.google.com/storage/docs/do ...

Stopping the webdriver in Node.js gracefully without crashing it can be achieved through a

Can the selenium webdriver be halted without terminating node? I've encountered a problem attempting to create an API tool that conducts web automation upon receiving a get request. Essentially, I am executing the selenium webdriver on a get request ...

XSL is the key component in creating a unique Custom Slider that remains stationary

I am currently working on a jQuery slider project and I am encountering an issue with getting the images to slide properly. The arrows seem to be functioning as expected, indicating that the necessary classes have been added, but the actual sliding action ...

PHP function with JSON response encountered an error during the AJAX call

I am currently working on creating a News Ticker that utilizes PHP, Javascript, and AJAX. The first step involved creating a PHP function called getFeed(), which gathers data from various news websites into an Array. This data is then returned in JSON form ...

How can I adjust the gravity or positioning of a tipsy tooltip in jQuery?

Is there a way to adjust the position or gravity of Tipsy? The plugin offers various options for gravity that can be set through the script: nw | n | ne | w | e | sw | s | se Currently, I have set it to s position, as shown in this demo: http://jsfiddle. ...

Encountering the "Error: data.map is not a function" issue within Next.js

I'm having trouble understanding why this first fetch call works perfectly: async function getData() { const res = await fetch('https://jsonplaceholder.typicode.com/todos') return res.json() } export default async function Home() { co ...

Animating with JQuery utilizing a dynamic attribute

We are facing a challenge with animating multiple divs that share the same class name and have different attribute values: <div class="chart-bar" style="width:10%;" bar-width="100%"></div> <div class="chart-bar" style="width:10%;" bar-wid ...

Can ASP.NET MVC 1 be run on .NET 2.0.50727?

After completing a website using ASP.NET MVC 1, I attempted to deploy it to a server running .NET 2.0.50727. Unfortunately, the deployment was unsuccessful, which led me to believe that the server may not support MVC 1. Is my assumption correct? Can ASP.N ...