title: How to display AmCharts Pie Chart with dynamic csv-data?
body: <p>I am using the JS library AmCharts for displaying charts in a jQuery mobile environment.
  The AmCharts examples always come with some static data written in the JS document. I have some csv table that I would like to display.
  I've managed to do this with the Serial and Bar Charts, but somehow, I don't manage to do it with the pie charts.</p>
  
  <p>Can anyone help?</p>
  
  <p>index.html (relevant part where I want to insert the pie chart in the div "chartserialdiv4")</p>
  
  <pre><code>&lt;div data-role="page" id="page4" data-theme="d"&gt;
  &lt;div data-role="header"&gt;
      &lt;h1&gt;Kostenverteilung&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div data-role="content"&gt;&lt;div id="chartserialdiv4" style="height: 500px;"&gt;&lt;/div&gt;&lt;/div&gt; &lt;!-- ****** DIV CONTAINER "CHARTSERIALDIV" ************ --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>javascript-file</p>
  
  <pre><code>window.onload = function() {
      $(document).delegate('#page4',  'pageshow', function () {
          createChartPie('chartserialdiv4');  
          loadCSVPie("daten/kostenverteilung.csv");  
          });
  }
  
  // method which loads external data
          function loadCSVPie(file) {
              if (window.XMLHttpRequest) {
                  // IE7+, Firefox, Chrome, Opera, Safari
                  var request = new XMLHttpRequest();
              }
              else {
                  // code for IE6, IE5
                  var request = new ActiveXObject('Microsoft.XMLHTTP');
              }
              // load
              request.open('GET', file, false);
              request.send();
              parseCSVPie(request.responseText);
          }
  
  // method which parses csv data
          function parseCSVPie(data){ alert("parseCSV pie gestartet");
              //replace UNIX new lines
              //data = data.replace (/\n/g, "\n");
              //replace MAC new lines
              //data = data.replace (/\n/g, "\n");
  
              //split into rows
              data = data.replace (/,/g,"."); // SUCHE NACH KOMMA UND ERSETZE DURCH PUNKT
  
              var rows = data.split("\r");    // SUCHE NACH ZEILENUMBRUCH UND SPALTE DORT ZEILE AB
              // create array which will hold our data:
              dataProvider = [];
  
  
  
              // loop through all rows
              for (var i = 1; i &lt; rows.length; i++){ // i=1 WEGEN DER ÜBERSCHRIFTEN
                  // this line helps to skip empty rows
  
                  if (rows[i]) {                    
                      // our columns are separated by semikolon
                   alert(i+". "+category+" "+value1);
                  var column = rows[i].split(";");  
  
                      // column is array now 
                      // first item is date
                      var category = column[0];
                      // second item is value of the second column
                      var value1 = column[1];
                      // third item is value of the third column 
                      //var value2 = column[2];
                      //var value3 = column[3];
  
                      // create object which contains all these items:
                      var dataObject = {category:category, value1:value1};
  
                      // add object to dataProvider array
                      dataProvider.push(dataObject);
                  }
              }
              // set data provider to the chart
              chart.dataProvider = dataProvider;
              // this will force chart to rebuild using new data
              chart.validateData();
          }
  
  
  function createChartPie(container){
  
                  // PIE CHART
  chart = new AmCharts.AmPieChart();
                  chart.titleField = "category";
                  chart.valueField = "value1";
                  chart.outlineColor = "#FFFFFF";
                  chart.outlineAlpha = 0.8;
                  chart.outlineThickness = 2;
          //chart.addTitle('Chart',12, '#000000', 1, true);
  
                  // this makes the chart 3D
                  chart.depth3D = 15;
                  chart.angle = 30;
                  //chart.labelsEnabled = false;
                  chart.visibleInLegendField = true;
                  chart.startEffect = "&gt;";
                  chart.labelRadius = -30;
                  chart.labelText = "[[percents]]";
  
          legend = new AmCharts.AmLegend();
                                  legend.borderAlpha = 0.3;
                                  legend.horizontalGap = 10;
                                  legend.switchType = "v";
                                  legend.position = "bottom";
                                  legend.align = "left";
                                  legend.labelText = "[[title]]";
                                  legend.valueText = "";
                                  chart.addLegend(legend);
  
                  // WRITE
                  chart.write(container);
  
  }
  </code></pre>
  
  <p>As only a blank page displays, I have the feeling that the contents from the dataProvider does not feed through to the div "chartserialdiv4"...</p>
  
  <p>Can anyone help?</p>
  
  <p>Thank you very much in advance!
  Lisa</p>