How to get chartdata from ajax call into javascript

Question

I am working with amcharts and i have a file (data.php) that contains some php code used to produce the "var chartdata=[''];" for the chart. It also has the javascript for drawing the chart. It takes 3 variables, user-id, dateStart and dateEnd. I have also this second file (view.php) that has a form which submits its data to the file above via $_GET method. In this file i have a space to draw chart right below the form.

What i want to do is for the user to enter user-id, dateStart, dateEnd then submit,, and get the chart shown below the form (in the 'div') the chart should redraw every time user hits submit. For it i thought using jQuery $.ajax but i can't draw the chart. In the specified div, it brings only the "var chartdata=[' all chart data here '];"

here is the ajax code in view.php:

$.ajax({
    type: "GET", 
    url: "data.php",
    data: {user: $("#user").val(), dtStart: $("[name=dtStart]").val(), dtEnd: $("[name=dtEnd]").val()},
    dataType: "html",
    success: function(data) {

    $("#chartdiv").html(' '); 
    $("#chartdiv").html(data); 
      }
    });

and here is the code for drawing the graph:

var chart;
var average = 90.4;
AmCharts.ready(function() {

// SERIAL CHART    
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://www.amcharts.com/lib/images/";
chart.autoMarginOffset = 5;
chart.marginTop = 0;
chart.marginRight = 10;    
chart.zoomOutButton = {
    backgroundColor: '#000000',
    backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.categoryField = "date";

// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "mm"; // our data is daily, so we set minPeriod to DD
categoryAxis.dashLength = 1;
categoryAxis.gridAlpha = 0.15;
categoryAxis.axisColor = "#DADADA";
categoryAxis.equalSpacing = false;

// value                
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisColor = "#DADADA";
valueAxis.dashLength = 1;
valueAxis.logarithmic = true; // this line makes axis logarithmic
chart.addValueAxis(valueAxis);

// GUIDE for average
var guide = new AmCharts.Guide();
guide.value = average;
guide.lineColor = "#CC0000";
guide.dashLength = 4;
guide.label = "average";
guide.inside = true;
guide.lineAlpha = 1;
valueAxis.addGuide(guide);


// GRAPH
var graph = new AmCharts.AmGraph();
graph.type = "smoothedLine";
graph.bullet = "round";
graph.bulletColor = "#FFFFFF";
graph.bulletBorderColor = "#00BBCC";
graph.bulletBorderThickness = 1;
graph.bulletSize = 1;
graph.title = "Price";
graph.valueField = "price";
graph.lineThickness = 2;
graph.lineColor = "#00BBCC";
chart.addGraph(graph);

// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chartCursor.categoryBalloonDateFormat = "DD MMM, JJ:NN:SS";
chart.addChartCursor(chartCursor);

// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);

// WRITE
chart.write("chartdiv");
}); 

</script>

can you give me some help please? I'm unfamiliar with jQuery and i'm trying my best to figure out how to solve this.. Thanks Regards

<?php $javascript =""; //connect to db //Connection details $dbhost='nsetf.com'; $dbuser='it'; $dbpass="it"; $conn=mysql_connect($dbhost, $dbuser, $dbpass) or die('error connecting to MySQL'); $dbname='it'; mysql_select_db($dbname); $dtstart = $_GET["dtStart"]." 00:00:00"; $dtend = $_GET["dtEnd"]." 21:59:00"; //".$_GET['user']." //$dtstart = "2013-06-01 00:00:00"; //$dtend = "2013-06-01 23:59:00"; — Mirela
– Mirela, Commented Jun 7, 2013 at 15:05
//$sql = mysql_query("SELECT vehicle_plate, fuel_level, data_ora FROM chart_data WHERE vehicle_plate = 434 AND data_ora > '2013-06-01 00:00:00' AND data_ora < '2013-06-01 23:30:00'"); $sql = mysql_query("SELECT vehicle_plate, fuel_level, data_ora FROM chart_data WHERE vehicle_plate = ".$_GET['user']." AND data_ora > '".$dtstart."' AND data_ora < '".$dtend."'"); while($rez = mysql_fetch_array($sql)){ $timestamp = trtotime($rez['data_ora']); $data_ora = date("Y,m,d,H,i", $timestamp); $fuel_level = $rez['fuel_level']; — Mirela
– Mirela, Commented Jun 7, 2013 at 15:06
if(!empty($javascript)) $javascript=$javascript.","; $javascript=$javascript."{ date: new Date(".$data_ora."), price: ".$fuel_level."}"; } $javascript = "var chartData = [".$javascript."];"; // echo $javascript; ?> — Mirela
– Mirela, Commented Jun 7, 2013 at 15:06

boddhisattva · Accepted Answer · 2013-09-06 11:07:43Z

1

Try this, comment the line:- AmCharts.ready(function() { and }); . This worked for me. Qutoing from this link:-

"AmCharts.ready event makes sense only when charts are initialized on the page itself to make sure that the page is loaded before trying to create the charts."

answered Sep 6, 2013 at 11:07

boddhisattva

7,45011 gold badges52 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get chartdata from ajax call into javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related