retrieve data for chart from an AJAX request

I am looking to create a chart using amCharts and I have received some values from the server through an ajax call. Now, I need help in utilizing this data for my chart. Can anyone guide me on how to achieve this?

var chart = am4core.create("chartdiv", am4charts.XYChart);

  // Add data
  chart.data= (avoiding manual addition of data)
  // Add and configure Series
  var pieSeries = chart.series.push(new am4charts.PieSeries());
  pieSeries.dataFields.value = "SalePrd";
  pieSeries.dataFields.category = "SaleYear";

Sample code for making data call

var Ajax_URL= url;
  var Year_Val = GetSelectValue("YearSelect");
  var Prd_Val = GetSelectValue("PrdSelect");

  app.request.get(Ajax_URL, { "Token": Token_Data, "SaleYear":Year_Val, "SalePrd":Prd_Val }, function (data)
  {
    var data_Str=''+data;
    var data_Output = JSON.parse(data_Str);
    return data_Output;

  });
}

Answer №1

perform an asynchronous call using Ajax,
and then proceed to generate the chart once the data has been received...

var Api_Url = apiUrl;
var Month_Val = GetSelectValue("MonthSelect");
var Product_Val = GetSelectValue("ProductSelect");

app.request.get(Api_Url, { "Token": Token_Data, "SaleMonth":Month_Val, "SaleProduct":Product_Val }, function (data)
{
  var dataString = ''+data;
  var jsonData = JSON.parse(dataString);
  
  var chart = am4core.create("graphContainer", am4charts.XYChart);

  // Populate with retrieved data
  chart.data = jsonData;

  // Configure Series
  var lineSeries = chart.series.push(new am4charts.LineSeries());
  lineSeries.dataFields.valueY = "SaleProduct";
  lineSeries.dataFields.categoryX = "SaleMonth";
});

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

Error: [$controller:ctrlreg] - The controller registration has failed

I am currently exploring the world of AngularJs and attempting to display options from a json file. However, I keep encountering the following error message: "Error: [$controller:ctrlreg]" Below is the code snippet I am working with: var sj = angular. ...

What is the best way to access and modify a nested object within a complex object containing an array of objects?

I've got the course structure all sorted out, but I'm struggling to understand how to retrieve a lesson object by its ID and also update a lesson object with new property values. If anyone could provide some guidance on the right approach, it wo ...

The property of userNm is undefined and cannot be set

When attempting to retrieve a value from the database and store it in a variable, an error is encountered: core.js:6014 ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'userNm' of undefined TypeError: Cannot set property &apos ...

Substitute for SendKeys() in Angular JS web pages using Selenium

Currently, I am utilizing selenium automation to streamline the processes of a third-party website. To input data into form fields, I have been employing the SendKeys() method. While this method is functional, it's time-consuming as there are numerous ...

personalized link when uploading images in Jodit Editor

I recently integrated the Jodit Editor (react) with the Insert Image option, allowing users to upload images that are saved in the default location set by the Editor. Now I am curious about how to use a custom URL to insert an image in the editor. Here i ...

Activating the Play button to start streaming a link

Recently delved into the world of Ionic 4 and Angular, so definitely a beginner :) Purchased a UI Template from code canyon but didn't realize I needed to code the music player part. Been trying to get a music stream playing but no luck. Came across ...

Show divs in identical position when clicking

There are 4 section divs that need to be displayed in the center of the page when clicked, but the last one appears further down. This is likely due to the flex box nature. What is the best way to ensure all sections appear at the exact same location? Ano ...

when the submit button is clicked, verify whether the input field is empty

I have exhausted all my options and nothing seems to work. All I want is for the following functionality to be implemented: When a submit button is clicked -> check if a text field is empty -> if it is, display an error alert and prevent advancing t ...

The hook call you made in next.js/react is invalid and cannot be

I recently followed a tutorial on creating a hamburger menu in react/next.js. You can check out the tutorial here. import { useState } from "react"; import user from '../styles/userview.module.css' export function PageHeader() { con ...

Improving the performance of Knockout.js postback by reducing data duplication in Request.Form and client ViewModel

For my extensive data collection HTML form with around 70 fields, I'm looking to utilize knockoutjs along with the KO mapping plugin. Ultimately, I plan to deserialize the JSON representation of the KO viewmodel into a C# class. My concern is the dup ...

I need help using i18N to translate the SELECT option in my VUE3 project. Can someone guide me

<n-select v-model:value="value" :options="options" /> options: [ { label: "Every Person", value: 'file', }, { label: 'Drive My Vehicle', ...

Filling out the form will automatically direct you to the text input section

I'm trying to figure out if I can create an input box in HTML that directs the user to a specific HTML file based on the word they enter. For example, if they type "Doctor", it would redirect them to the page doctor.html. This is for a school project ...

Tips for preventing the occurrence of undefined when retrieving data?

After fetching data from mongo, I encountered an issue where my useState([]) is initially defined as undefined. Can someone please offer a solution to this problem? const router = useRouter() const {id} = router.query console.log(id) // f ...

Is it possible to execute the .push() method on an array a specific number of times without using a for loop?

Currently, I am tackling the "Move Zeroes" Leetcode challenge. The task requires moving all zeroes to the end of the array without altering the sequence of non-zero elements. My strategy involves iterating through the array, splicing out each zero encounte ...

Unable to invoke server-side function via Ajax

I have implemented 3-tier architecture in my demo application. Currently, I am facing an issue while trying to invoke a method from the business logic layer using Ajax in the presentation layer. It seems like there is an error related to passing the URL. ...

Looking for a method to incorporate an onclick function into a column for renderCell within the MUI Datagrid. Any suggestions?

I'm currently developing a react application and utilizing the MUI Datagrid to present some data. I have incorporated a rendercell to insert an edit icon which should trigger a pop-up modal when clicked. Below is the column setup. export const specifi ...

When selecting filter options, the posts/images now overlap before transitioning into a masonry view upon resizing the window

I have implemented a filter on my posts to arrange them based on popularity, style, and country. Screenshots: Screenshot 1: Everything looks good when the page loads, displaying all posts/images properly in masonry layout. Screenshot 2: Issue occurs whe ...

Tips for exchanging JavaScript variables with PHP using AJAX

Hey there, I'm new to JavaScript and I've hit a roadblock with passing variables to PHP using Ajax. <script> $date = "123"; $.ajax({ url: './record.php', type: "POST", ...

Having trouble with Vee-validate Basic example - undefined errors issue

I've been struggling to get a basic form validation page working with vee-validate. Something seems to be going wrong, but I can't pinpoint the exact issue. Why am I seeing the error: errors not defined. <!DOCTYPE html> <html> < ...

I am encountering issues with my initWithDictionary method due to NSNull

Currently, I am in the process of parsing a JSON file. Once I have obtained the NSDictionary, my next step is to parse the objects within the dictionary and convert them into an array of objects. However, there seems to be an issue with certain JSON files ...