mercredi 29 juin 2016

Getting the same element from database to AmCharts using Primefaces and Javascript

Good day.

Task:

Output diagram using data from DB via AmCharts. Backend: Primefaces + MySQL

I transfer data to AmCharts using this code:

<script type="text/javascript">
    var chart;

    var data = [];

    for (var i = 0; i &lt; '${countryMB.list.size()}'; i++) {
        data.push(
                {
                    country: '${countryMB.list.get(i).getName()}',
                    gdp: '${countryMB.list.get(i).getGdp()}'
                }
        );
    }

    var chartData = data;

    AmCharts.ready(function () {
        // SERIAL CHART
        chart = new AmCharts.AmSerialChart();
        chart.dataProvider = chartData;
        chart.categoryField = "country";
        chart.startDuration = 1;

        // AXES
        // category
        var categoryAxis = chart.categoryAxis;
        categoryAxis.labelRotation = 90;
        categoryAxis.gridPosition = "start";

        // GRAPH
        var graph = new AmCharts.AmGraph();
        graph.valueField = "gdp";
        graph.balloonText = "[[category]]: [[value]]";
        graph.type = "column";
        graph.lineAlpha = 0;
        graph.fillAlphas = 0.8;
        chart.addGraph(graph);

        chart.write("chartdiv");
    });
</script>

countryMB - primefaces component and list - method that gets all elements from database.

And as a result I have data only for one element, that repeats many times. Like this:

enter image description here

I don't understand the reason. Thanks for Your help.

Aucun commentaire:

Enregistrer un commentaire