what's wrong with this automatic creation of charts for time spent on webpages?

Question

!SOLVED!

I want to automatically create charts with users and their time spent on pages of a website.

I have a file - "log.xml" where I keep information with users (customers), visited pages, dates and their time spent; and after I "get" this Xml file with Ajax, I want to parse it and create with values "extracted" charts with JqPlot.

My problem is that I can't loop through more than just one customer and it don't build chart for the single customer.

If I remove the code block with initialization of variable plot I can loop through all my customers from Xml.

Please, if someone can tell me what is wrong, and how to create charts for all customers...

Here is the code of the file "log.xml":

<?xml version="1.0"?>
<log>
  <customer id="14" name="Florin Virdol">
    <page name="/mobilestore/index.php">
      <date_ts on="2011-12-02" timeSpent="205"/>
    </page>
    <page name="/mobilestore/products_all.php">
      <date_ts on="2011-12-02" timeSpent="15"/>
    </page>
  </customer>
  <customer id="0" name="guest">
   <page name="/mobilestore/services.php">
      <date_ts on="2011-12-02" timeSpent="50"/>
    </page>
  </customer>
</log>

Here is the javascript code of the "operations":

$(document).ready(function()
{
    //read from xml
    $.ajax({
        type: "GET",
        url: "log.xml",
        dataType: "xml",
        success: parseXml
    });
});//ready          

//parse xml          
function parseXml(xml) {
    var i = 0;
    $(xml).find("customer").each(function() {
        $('<div class = "jqplot graph" id = "chart' + i + '"></div>').appendTo('#content');
        var customerName = $(this).attr("name");                                     
        var line_inside = [];  // declare as array               
        $(this).find("page").each(function() {
          var pageName = $(this).attr("name"); 
          $(this).find("date_ts").each(function() {
            var timeSpent_ = $(this).attr("timeSpent");//if mai multe timespent, sa faca totalul, else singuru; timespent
            line_inside.push([pageName,timeSpent_]); //do not string cat, push onto array
          });                        
        });                    
        var line = '[' + line_inside + ']';
        //--------jqplot----!!! if i remove this block, will loop through customers------------
        var plot = $.jqplot('chart' + i, [line_inside], 
        {                            
            title: customerName,
            series:[{renderer:$.jqplot.BarRenderer}],
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    label: 'Web Page',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    tickOptions: { labelPosition:'middle',  angle: -30 }  
                },
                yaxis: {
                    autoscale:true,
                    label: 'Total Time Spent',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    tickOptions: { labelPosition:'middle', angle: -30 }
                }
            }
        });
        //-------jqplot----!!! if i remove this block, will loop through customers------------                                
        i++;
    });//find customer            
}//parse xml    

SOLUTION: made modifications that Mark suggested, and it works. (now, above code works!)

Answer 1

You are passing strings that look like arrays and not actual arrays to jqplot.

Try:

var line_inside = [];  // declare as array               
$(this).find("page").each(function() {
  var pageName = $(this).attr("name"); 
  $(this).find("date_ts").each(function() {
    var timeSpent_ = $(this).attr("timeSpent");//if mai multe timespent, sa faca totalul, else singuru; timespent
    line_inside.push([pageName,timeSpent_]); //do not string cat, push onto array
  });                        
});
alert(line_inside); // this is an array of arrays                                   
var plot = $.jqplot('chart' + i, [line_inside], 

Answer 2

Since you want a different plot for each customer, you need to make plot a local var to your inline function: "var plot" not just "plot" -- same goes for "line". You are assigning a global scope variable and overwriting it each time, currently.