Update javascript chart based on ajax response-CodePudding

I am trying to populate my javascript chart data based on ajax data from database. The chart in question is called apex chart if that helps. I am submitting a form via ajax and getting a result as follows:

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

Now instead of displaying the result in $("#appyrpen").html(data2);

I would like to update a javascript chart code which looks like this :

 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 is this: data:[4,2.8,5,2,3.2,1.2,2,3,2,3.5,5,2]} and I am trying to populate it with the ajax success result.

Thanks for all the help.

CodePudding user response：

Although not an AJAX solution, Instead of trying to populate javascript based on ajax response, you can use php.Put your php code and javascript on the same page and then populate the dataset 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 getting in ajax below, you can get it in php query and assign it to $phpresult and then echo that result variable in data placeholder. Hope that makes sense.

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