Question

i am trying to render jqplot graph by fetching data by Ajax xml.

  $.ajax({
        type: "POST",
        url: "/ajaxXML.jsp",
        data: ({cmd: "report"}),
        dataType: "xml",
        success: function(xml) {
                var data= new Array();
                $(xml).find('graph').each(function(){
                var points = new Array()
                var x = $(this).attr('x');
                var y = $(this).attr('y');
                points.push(x);
                points.push(y);
                data.push(points);
            });

            plotGraph(data);

        }
    });             


function plotGraph( data){
     var line1=[['11-01-11',2052], ['11-02-11',2205], ['11-03-11',1910], ['11-04-11',2085], ['11-05-11',2261],  ['11-06-11',1714],  ['11-07-11',3123], ['11-08-11',3369], ['11-09-11',3515], ['11-10-11',3380], ['11-11-11',3476], ['11-12-11',3954], ['11-13-11',2799], ['11-14-11',3166], ['11-15-11',2932] ,['11-16-11',3289]];
     alert(data);
     alert(line1);
  $.jqplot('chart1', [data], {
        title:'Margin vs Date',
        axes:{
            xaxis:{
                renderer:$.jqplot.DateAxisRenderer
            },
            yaxis:{autoscale:true}
        },
        series:[{lineWidth:4}]

      });
}

the xml looks like

     <graphs>
       <graph x="11-28-2011" y="48973"></graph>
       <graph x="11-29-2011" y="41981"></graph>
        <graph x="11-30-2011" y="45562"></graph>
       <graph x="12-01-2011" y="82437"></graph>
         <graph x="12-02-2011" y="83979"></graph>
       <graph x="12-03-2011" y="64444"></graph>
   </graphs>

but some how this strategy is not working only the x axis is populated with no data points or y axis on graph.

however when i try to see the sample data i.e line1 it works even though the data fetchced by ajax call is almost similar

Answer 1

When you parse the xml your y values are pushed into the array as strings not integers. Try:

$(xml).find('graph').each(function(){
  var points = new Array()
  var x = $(this).attr('x');
  var y = $(this).attr('y');
   points.push(x);
   points.push(parseInt(y)); //modified line!
   data.push(points);
});