Refresh the JavaScript graph with new data from the AJAX request

Seeking assistance in updating my javascript chart data using ajax data retrieved from a database. The specific chart being referenced is an apex chart. After submitting a form via ajax, the returned result is as follows:

type: "POST",crossDomain: true, cache: false,
data: loginStringnew,
success: function(data2){
$("#appyrpen").html(data2);

Instead of displaying the result with $("#appyrpen").html(data2);

I aim to update a javascript chart code that resembles the following :

 if($('#sales_chart').length>0){var
columnCtx=document.getElementById("sales_chart"),columnConfig={colors
['#0CE0FF','#1B5A90','#DFE5FC'],series:[{name:"Completed",type:"column",data:[4,2.8,5,2,3.2,1.2,2,3,2,3.5,5,2]}

The data element of the chart reads as: data:[4,2.8,5,2,3.2,1.2,2,3,2,3.5,5,2]} and my goal is to populate it with the success result obtained through ajax.

Your support is greatly appreciated.

javascriptajaxforms

Answer №1

While this solution doesn't involve AJAX, Instead of dynamically populating JavaScript based on an AJAX response, you can use PHP. Place your PHP code and JavaScript on the same page, then populate the dataset with data:[4,2.8,5,2,3.2,1.2,2,3,2,3.5,5,2] using 

data:[<?php echo $phpresult ?>]

So, whatever response you were receiving in AJAX before, you can retrieve it in a PHP query, assign it to $phpresult, and then output that variable within the data placeholder. I hope that explanation is clear.

success: function(data2){
$("#appyrpen").html(data2);

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

When a form is submitted, the PHP file is opened in a new page instead of running the script

I have developed a contact form that needs to be validated through ajax PHP before being sent via PHP email. However, upon clicking submit, the page refreshes and redirects to a new page: mypage.com/form_process.php Additionally, the stylesheet is not l ...

phpjqueryajaxwordpress

"AngularJS directive mandating the use of the required attribute for internal control

I've encountered a challenge with this specific issue. We are using a directive called deeplink, which contains the following code: restrict: 'E', require: 'ngModel', scope: { smDropdown: '=smDeeplinkDropdown', s ...

javascripthtmlangularjsangularjs-directive

Tips for transforming a string into an object using AngularJS

Here is a string I'm working with: $scope.text = '"{\"firstName\":\"John\",\"age\":454 }"'; I am trying to convert it into a JavaScript object: $scope.tmp = {"firstName":"John","age":454 }; Please note: J ...

javascriptangularjsjsonobjectconverters

The content contained within the .each loop within the click event is only executed a single time

While working on coding a menu opening animation, I encountered an issue today. Upon clicking the menu button, the menu opens and the elements inside receive an added class (resulting in a fade-in effect). Clicking the menu button again should close the ...

javascriptjquerycss

What could be causing the React state to not function properly when using data from an external class?

Recently diving into the world of Javascript and React, I decided to challenge myself by creating a basic calculator. My strategy was to separate the calculator logic into its own class. As I am currently testing it out, I encountered a peculiar issue. It ...

javascriptreactjs

Utilizing AMAZON_COGNITO_USER_POOLS in conjunction with apollo-client: A comprehensive guide

Struggling to populate my jwtToken with the latest @aws-amplify packages, facing some challenges. Encountering an error when attempting to run a Query: Uncaught (in promise) No current user It seems that when using auth type AMAZON_COGNITO_USER_POOLS, I ...

javascriptreactjsamazon-web-servicesnext.jsapollo-client

Generate interactive tables using data from an XML file

Hello, I'm in the process of generating tables from an XML file using Node.js with the Express framework. I am utilizing npm modules xmldom and xmldoc for this task. The objective is to present these data tables on an ejs page. Here is the structure ...

javascriptnode.jsxmlnpmhtml-table

Access the angular controller using the radio button option

I am looking to showcase data in an HTML table retrieved from an Angular controller. I have the controller set up but I am unsure about how to display the data when a radio button is selected. <div class="radio"> <label class="radio-inline" ...

javascriptangularjs

What's up with the Chrome Dev Tools Error Log?

I am having an issue with debugging JavaScript files using breakpoints in Chrome Dev Tools. Whenever an error occurs, a red error message flashes on the screen so quickly that I can't read what it says. Is there a way to change this setting or access ...

javascriptdebugginggoogle-chrome

How can I retrieve the word that comes after a specific word in discord.js

Currently, I'm attempting to create a bot similar to Dad bot, but I'm struggling with implementing the "Hi __ I'm, Dad" feature. Here's the code snippet that I've put together so far: var imWords = ["i'm", "I&a ...

javascriptarraysstringdiscorddiscord.js

VueJs: Finding the corresponding value of a data object

Is there a way to extract data from an object in Vue? This is the format of my data: datasets: [{ text:"Cars", value: "[1,2,3]" }, { text:"Trains", value: "[1,4,10] } ] When I receive information from route props like this: this.selectedText= this ...

javascriptvue.js

Having trouble combining different styles with Material-ui and Radium?

Trying to integrate Radium with Material-ui has presented a challenge. Attempting to apply multiple styles to a single Material-ui component results in no styling being applied. For instance, the following code fails to render any styling: <MenuItem st ...

javascriptreactjsmaterial-uiradium

An Ajax call nested within another Ajax call

I've implemented an AJAX request to load my "home" page and "about" page into a designated "container" when a menu link button is clicked on my index.php. Now, I have three links on my "home" page and I want each of these links to open within the same ...

javascriptphpjqueryajaxinclude

Trimming Picture on User's Device

Currently, I am utilizing the jQuery ImgAreaSelect 0.9.10 plugin to crop images that are uploaded by users. The data input format being used is "multipart/form-data". Upon cropping an image with the plugin, it provides me with coordinates in pixels. Howev ...

javascriptjqueryhtmlimage

Using jQuery to display the values of various keys in a nested array

Within my json data, there exists a nested array structured as such: var json.result= [ {"id":"0","category":"Camera","name":"600D Kit", "condition":"OK"}, {"id":"1","category":"Camera","name":"600D Kit", "condition":"missing cap"}, {"id":"2", ...

javascriptjqueryarraysjson

Unable to showcase Mysql search outcomes in a distinct div section

I have been working on a project to showcase MySQL results by utilizing three different sections/divisions. In Division 1, there are radio buttons that allow for selecting and viewing the results based on different criteria. Division 2 contains text indica ...

javascriptphphtmlmysql

Inquiring about building a comprehensive AJAX website: SEO, Google index, design templates

I'm currently developing a fully AJAX-based website. My focus right now is on implementing page navigation and content display without the need for page reloading. Here's my approach: <html> <head> <!--CSS--> .hidde ...

javascriptjqueryajaxtemplates

The issue of Rails time lagging by a day persists upon deployment on my server

When a user clicks on a day in my calendar, I pass a JavaScript time variable to my Rails controller using Ajax. Everything works perfectly when I test it locally, but once deployed on the server, the date appears to be one day behind the actual day click ...

javascriptruby-on-railsrubyajaxdate

What is the best way to integrate Angular 5 with various sources of JavaScript code?

I am fairly new to angular. I am looking to merge an external angular script file and on-page javascript code with angular 5. I understand that angular does not typically allow for the inclusion of javascript code in html components, but I believe there m ...

javascriptangular

What is the best way to present a unique page overlay specifically for iPhone users?

When browsing WebMD on a computer, you'll see one page. However, if you access it from an iPhone, not only will you be directed to their mobile page (which is easy enough), but they also display a special overlay with a "click to close" button prompti ...

phpjavascriptiphonehtml