jqplot - Using values from php array

Question

How can I use php values(sent by ajax) in a jqplot chart?

The code pasted below does not create a graph. When I manually type an array of values the graph will chart. I have the chart sent to a div with the id "chart1".

--- PHP ---

    $array = array(
    array("Books", 12),
    array("Movies", 9)
       );
 $json = json_encode($array);
 var_dump($json); 

---- JAVASCRIPT ----

$(document).ready(function(){
  var charts;
  $.ajax({     
  type: "POST",  
  async: false, 
  dataType: "json", 
  url: "submitform.php",    
  data: 'action=chart',  
  success: function(data){       
  charts = data;
       }    
        });   


   var plot1 = jQuery.jqplot ('chart1', [charts],
     { 
  seriesDefaults: {
      shadow: false,
    renderer: jQuery.jqplot.PieRenderer, 
    rendererOptions: {
      highlightMouseOver: false,
      showDataLabels: true
    }
  }, 
  seriesColors: [ "#CCF", "#FCC", "#6CF", "#6C6", "#FF9"],
      legend: { show:true, location: 'e' }
     }
  );
 });

If I alert(charts) I get this:

[["Books",12],["Movies",9]]

So I think my format is fine.

whew, sorry if that was long. (sorry for the poor formatting)

Answer 1

try it

$(document).ready(function(){
    $(".success").fadeIn("fast");
    var charts = null;
    $.ajax({     
        type: "POST",  
        async: false,  
        url: "submitform.php",    
        data: 'action=chart',  
        dataType: "json", 
        success: function(data){     
            charts = data;
            $(".success").html(charts + "charts "); 
        }    
    });   


    var chartData = [["Books",12], ["Movies",9]];
    alert(charts);
    var plot1 = jQuery.jqplot ('chart1', [charts], { 
        seriesDefaults: {
            shadow: false,
            renderer: jQuery.jqplot.PieRenderer, 
            rendererOptions: {
                highlightMouseOver: false,
                showDataLabels: true
            }
        }, 
        seriesColors: [ "#CCF", "#FCC", "#6CF", "#6C6", "#FF9"],
        legend: { show:true, location: 'e' }
    });
});