Rejuvenate your Kendo Chart by utilizing a promise to update the DataSource

I am currently facing a challenge in my Angular application where I need to update the data source for multiple charts and then redraw them. The data source is updated through an Angular service that returns a promise. While I am able to successfully update the data, I am having difficulty redrawing the graphs once this process is complete. Can you offer some guidance or assistance with this issue? Below is the relevant datasource information for one of the charts:

chartDataEl.dataSource = new kendo.data.DataSource({
    transport: {
        type: 'json',
        read: function(options) {
            var request = vm.shipmentManagementRequest;
            request.RequestType = myChart.chartData.htmlID;
            shipmentService.getBasicChartData(request)
                .then(function(result) {
                    options.success(result.data);
                }).catch(function(error) {
                    options.error(error);
                });
        }
    },
    sort: {
        field: "date",
        dir: "asc"
    },
    schema: {
        model: {
            fields: {
                date: {
                    type: "date"
                }
            }
        }
    }
});

Answer №1

After passing the chart data into the read function with options, I made sure to trigger a refresh once the promise was resolved.

chartDataEl.dataSource = new kendo.data.DataSource({
    transport: {
        type: 'json',
        read: function(options) {
            shipmentService.getBasicChartData()
                .then(function(result) {
                    options.success(result.data);
                    var updatedChart = options.data.chart;
                    updatedChart.refresh();
                }).catch(function(error) {
                    options.error(error);
                });
        }
    },
    sort: {
        field: "date",
        dir: "asc"
    },
    schema: {
        model: {
            fields: {
                date: {
                    type: "date"
                }
            }
        }
    }
});

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

React.js: The art of nesting components within each other

One common feature in many template languages is the use of "slots" or "yield" statements, which allow for a form of inversion of control by wrapping one template inside another. Angular offers the "transclude" option for this purpose. Ruby/Rails utilize ...

Tips for removing the Y-Axis entirely from a CanavasJS chart

I'm working with a canvasJS chart and my goal is to completely hide the Y-Axis. I've managed to remove the Y-Axis line and title in this JSFiddle example. I came across these properties to hide the Y-Axis title and line, but I'm struggling t ...

Issues with JavaScript Content Loading in epub.js on a Website

Hey there, I'm currently experimenting with the epub.js library and trying to set up the basics. However, I'm encountering an issue where the ebook is not showing up in my browser: <!DOCTYPE html> <html lang="en"> <head&g ...

Having trouble getting my list items to display on individual lines within the foreach loop. It just doesn't seem to be working as expected

In the event listener, I need to ensure that my list items within the forEach loop are not displaying on separate lines. This issue is causing a problem in a lengthy section of code. The goal is to update questions when an answer is clicked from a list. B ...

Alter the background color of the text input when it is selected for exit

How can I adjust the input field color when text is selected? I'm looking to get rid of the dark grey box highlighting. (Check out the image below) https://i.sstatic.net/OgWaz.gif <div id="ember1102" class="ember-view"> <i class="fa fa ...

Unchanging Arrays within JavaScript

Is there a way to maintain a set of unchanging values in JavaScript effortlessly? Furthermore, how can I ensure that comparisons between these constants yield accurate results? For example: const data = [5, 10, 15]; data[1] = 20; // Modifying an element ...

Pass data from JavaScript to PHP using AJAX

Using Leaflet to display a map, I have incorporated ajax into my onEachFeature function in order to retrieve variables to pass to PHP. Here is the code snippet: function onEachFeature(feature, layer) { layer.bindPopup(feature.properties.IDLo); layer. ...

Discover the file system using AngularJS or jQuery

Currently, in my project I am utilizing angularjs in conjunction with the spring framework to dynamically generate jasper reports and store them in the file system using the following code snippet: File newFile = new File("/home/person/report"); This al ...

Replicating the performance graph of Windows Task Manager

Looking for a JavaScript library that can replicate the dynamic chart seen on the CPU Usage History section of the Windows Task Manager's Performance tab. Any recommendations would be highly appreciated. ...

Troubleshooting: Unusual Page Loaded on Webpack Dev Server

While working with web pack, I encountered an issue when trying to run the npm run build:dev script. Instead of seeing the actual website, I was presented with a strange page displaying my workspace folders: https://i.sstatic.net/mBNKg.png In case it&apos ...

Issue with Angular 7: In a ReactiveForm, mat-select does not allow setting a default option without using ngModel

I have a Angular 7 app where I am implementing some reactive forms. The initialization of my reactive form looks like this: private initFormConfig() { return this.formBuilder.group({ modeTransfert: [''], modeChiffrement: [' ...

When you click away from the div in AngularJS, it will automatically disappear

Whenever we click outside the div or in a window, the xyz should be hidden. const app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.showDropdown = false; $scope.helloClick = funct ...

Learning the ropes: Building a model with nodejs using tensorflow.js

I am interested in creating an image classifier, but I lack knowledge of python. Since I am familiar with javascript, I have been considering using Tensorflow.js. Can models be trained with Tensorflow.js, and if so, what are the steps involved in the proce ...

Utilizing a click event in Vue.js to dynamically populate form inputs within a modal

I am currently working on an HTML modal form that allows me to update the selected post. I have set up a click event that retrieves the data for the chosen post, and then passes it to the form to populate the fields. However, I encountered an issue when tr ...

The issue of empty req.body in POST middleware with Medusa.JS

Feeling completely frustrated with this issue. Grateful in advance to anyone who can lend a hand. Any insights on why req.body is showing up empty? Medusa.JS should be utilizing bodyParser by default, correct? It was functioning fine earlier today but now ...

I would like to inquire about the process of accessing profile information on a website through the LinkedIn API

Do you know how I can use the latest LinkedIn JavaScript API with OAuth 2.0 to retrieve my own profile details for a website? The goal is to automatically update the website using my linked profile information. I have attempted the following: api_key: ...

Is there a way to create a Twitter-inspired homepage using Django?

I am currently exploring the Django web framework and aim to create a homepage similar to Twitter or Facebook. Users should be able to post updates and view others' posts, but I am encountering an issue where logged-in users cannot see their own posts ...

Encountering an unexpected identifier error in Sails JS

As a newcomer to Sails JS, I am attempting to perform CRUD operations with it. However, I am encountering an unexpected error in my index function. I am struggling to identify where the mistake lies. // Usercontroller.js file module.exports = { creat ...

Encountering the error "currentTime" property is not defined while executing JavaScript in Selenium with Python

Is there a way to navigate to a specific time while watching a video online? Although I have successfully achieved a similar goal on YouTube (check out the post here), I have encountered issues with the same method on a different website. Unfortunately, I ...

Error message shows that the function "updateItem" within KeystoneJS is not a valid function and cannot be used

Does Keystone JS have an updateItems function similar to createItems? I attempted the following update code but received an error stating keystone.updateItem is not a function (TypeError: keystone.updateItem is not a function). createItems - successful ...