How to display AmCharts Pie Chart with dynamic csv-data?

Question

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.

Can anyone help?

index.html (relevant part where I want to insert the pie chart in the div "chartserialdiv4")

<div data-role="page" id="page4" data-theme="d">
<div data-role="header">
    <h1>Kostenverteilung</h1>
</div>
<div data-role="content"><div id="chartserialdiv4" style="height: 500px;"></div></div> <!-- ****** DIV CONTAINER "CHARTSERIALDIV" ************ -->
</div>

javascript-file

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 < 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 = ">";
                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);

}

As only a blank page displays, I have the feeling that the contents from the dataProvider does not feed through to the div "chartserialdiv4"...

Can anyone help?

Thank you very much in advance! Lisa

Answer 1

This is quite an old question and maybe you have solved it now. I started using amcharts a couple of weeks ago and whenever I got a blank chart it was because the dataProvider was in the wrong format to generate a chart. It is quasi-json format that is required.