Showing JSON data in a ChartJS data point

I need help with inserting data from my ChartJS Controller in an MVC 5 project with AngularJS.

.CS Controller 

 public JsonResult GetTodaySoFar()
    {
        TodaySoFarModel todaysofarModel = new TodaySoFarModel();

        todaysofarModel.TodaySoFar.Add(new TodaySoFarItemModel { TodaySoFarData = "[22,44,55]" });

        return Json(todaysofarModel, JsonRequestBehavior.AllowGet);
    }

This is the Controller where I am fetching the data.

    $http.get('/revenue/gettodaysofar').success(function (data) {
    //debugger;
    $scope.todaysofar = data.TodaySoFar;
    console.log($scope.todaysofar);
    $scope.loading = false;
})


$scope.revenueToday = {
    labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00'],
    datasets: [
      {
          label: 'My Second dataset',
          fillColor: 'rgba(35,183,229,0.2)',
          strokeColor: 'rgba(35,183,229,1)',
          pointColor: 'rgba(35,183,229,1)',
          pointStrokeColor: '#fff',
          pointHighlightFill: '#fff',
          pointHighlightStroke: 'rgba(35,183,229,1)',
          data: [] //I want to populate this array with the values [22, 44, 55] fetched from the JsonResult 

      }
    ]
};

Can someone guide me on how to properly insert the Json result into the 'data' section?

javascriptangularjsmodel-view-controllerjsonresult

Answer №1

To retrieve the desired outcome from the array of information, follow these steps:

$scope.currentDayData = [];
$http.get('/revenue/getcurrentdaydata').success(function (data) {
    //debugger;
    $scope.currentDayData.push(data.CurrentDay);
    console.log($scope.currentDayData);
    $scope.loading = false;
})

...
information: [$scope.currentDayData]
...

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

Having trouble retrieving a specific value from a json object

Below is the JSON data that I am dealing with: var data = {200x200: "url1", 400x400: "url2", 800x800: "url3"}; After stringifying the object and attempting to access "200x200," I encountered an issue: undefined data = JSON.stringify(data); //data = ...

javascriptjqueryjsonobjectkey-value

managing hashbang URLs using ng-route

When navigating using location.path, I use the following code: $location.path('#/foo'); Within my app, I implement route provider as shown below: var app = angular.module("myApp", ['ngRoute']) .config(function($routeProvider){ ...

angularjsangularjs-ng-route

How does the system automatically update the ordered list (1, 2, 3) when some list items are removed in between the numbers?

After removing an item, the order of list numbers is automatically updated but the item numbers are not synchronized with those numbers. I want the item numbers to be synced with the li numbers. "use strict"; var demo = angular.module("demo", []); fun ...

angularjs

Featherlight is experiencing issues with running Ajax requests

I'm currently working on integrating an ajax photo uploading script into a Featherlight lightbox, but I'm running into issues! If anyone could help me figure out what's going wrong, that would be greatly appreciated. I've already includ ...

javascriptjqueryajaxfeatherlight.js

Unable to display the popup modal dialog on my Rails application

I currently have two models, Post and Comment. A Post has many Comments and a Comment belongs to a Post. Everything is functioning properly with the creation of posts and comments for those posts. Now, I have a new requirement where when clicking on "crea ...

javascriptjqueryruby-on-railsmodal-dialog

Is there a method to delay HTTP requests until the number of pending requests drops below a certain threshold (N)?

I'm in the midst of a project that involves allowing users to upload multiple files simultaneously. However, sending out numerous requests all at once can overwhelm the server and trigger a 429 (Too Many Requests) error for those requests. Is there a ...

javascriptangularjsajax

Converting an image to a byte array in JavaScript

Does anyone know how to manipulate binary files in Javascript similar to C? I'm currently facing a critical scenario where I need to create a flipped image. Unfortunately, I don't have access to CSS, canvas, HTML, or the DOM - so I need to accomp ...

javascriptimagefile-ioyahoo-widgets

Modify the name of the selected option value

I am working on an html code where I need to replace the values 0, 1, and 2 with USA, Australia, and Canada respectively. I also need to know the name of these values in my MySQL database. Thanks! HTML <form method="post" id="countriesForm" name="cou ...

javascripthtmlmysql

The function Promise.all typically yields an array with nested arrays

Inside my node Router, the following code snippet is implemented: router.get("/single-base/:id", (req, res) => { Base.find({ _id: req.params.id }) .then(bases => { let basefetches = []; for (let base of bases) { ...

javascriptnode.jsreactjsexpress

Periodically transmit information to a Google Script web application

I am currently working on a Google Script web app to automatically update data from a Google Sheet every 30 minutes. I initially attempted using the page refresh method, but encountered an issue where the web app would display a blank page upon refreshin ...

javascriptjqueryajaxgoogle-apps-scriptweb-applications

Ensuring the presence of an attribute within an AngularJS Directive

Is it possible to determine if a specific attribute exists in a directive, ideally using isolate scope or the attributes object as a last resort? If we have a directive like this <project status></project>, I would like to display a status ico ...

javascriptangularjsangularjs-directiveangularjs-scope

Using Vue3 to Enable or Disable the Submit Button Based on Changes in Editable Form Content

Here is a practical example, demonstrating how to create an editable address form. The save button should remain disabled if the form remains unchanged, as there is no need to submit it. However, when a value changes, the save button should become enabled ...

javascriptvue.js

Making an HTTP request within a forEach function in Angular2

Encountering an issue while using the forEach function with HTTP requests. The _watchlistElements variable contains the following data: [{"xid":"DP_049908","name":"t10"},{"xid":"DP_928829","name":"t13"},{"xid":"DP_588690","name":"t14"},{"xid":"DP_891890" ...

javascriptangularasynchronousxmlhttprequest

Using MongoDB to restrict fields and slice the projection simultaneously

I have a User object with the following details: { "_id" : ObjectId("someId"), "name" : "Bob", "password" : "fakePassword", "follower" : [...], "following" : [..] } My goal is to paginate over the follower list using the slice projection operat ...

javascriptnode.jsmongodbmongoosemongodb-query

What are the steps for establishing a connection to Heroku using node-mongodb-native?

I'm feeling lost when it comes to connecting to MongoLab on Heroku. I came across an example that was supposed to help, but it just left me more confused. You can check it out here. After looking at both the web.js and deep.js files, I noticed they b ...

javascriptnode.jsmongodbheroku

having difficulty sorting items by tag groups in mongodb using $and and $in operators

I'm currently trying to execute this find() function: Item.find({'tags.id': { $and: [ { $in: [ '530f728706fa296e0a00000a', '5351d9df3412a38110000013' ] }, { $in: [ ...

javascriptnode.jsmongodb

Unable to use OrbitControls with Node 12's ES6 import functionality

Currently, I am working with Node 12 (experimental-modules) and using npm for three.js. However, I'm facing issues with Imports when trying to include OrbitControls.js in my project. My index.js file is set as "script: module". Unfortunately, none of ...

javascriptnode.jsecmascript-6three.jses6-module-loader

Retrieve the innerHTML contents from all span elements

I'm having trouble getting the content of all span tags that are child elements of div#parent. So far, I've only been able to retrieve the content of the first one. Can someone please assist me with this? $( document ).ready(function() { ...

javascriptjqueryhtml

The fetch request in a React application is not returning a response body, whereas the same request functions properly when made using Postman

My React app is successfully running locally with backend REST APIs also running locally. However, when I attempt to make a POST call to the REST API, the call goes through but the body appears to be empty. Below is a snippet of the sample code: const bod ...

javascriptreactjsfetch-api

Storing and Retrieving Cookies for User Authentication in a Flutter Application

I am currently working on developing a platform where, upon logging in, a token is created and stored in the cookie. While I have successfully implemented a route that stores the cookie using Node.js (verified in Postman), I encounter issues when attemptin ...

javascriptnode.jsflutterexpress