Chartjs e mysql

[fermat]

salve!
sto iniziando a usare Chartjs per creare grafici.
questo un esempio di base funzionante:

<canvas id="chart_entrate" width="400" height="400"></canvas>
<script>
    var pieData = [
        {
            value: 30,
            color: "#F38630"
        },
        {
            value: 50,
            color: "#E0E4CC"
        },
        {
            value: 100,
            color: "#69D2E7"
        }

    ];
    var myPie = new Chart(document.getElementById("chart_entrate").getContext("2d")).Pie(pieData);
</script>

mi chiedevo se fosse possibile prendere i dati direttamene da un database in modo da renderli dinamici e non statici.

[fermat]

ok.
per i valori mi pare di capire che gli passo in formato json.
poi ci starebbe il "problema" del colore, e cioè come darglielo sempre diverso.
da un primo tentativo banale sono riuscito ma sempre con lo stesso colore.
il che non è una granchè come cosa.

[cavicchiandrea]

Non conosco nello specifico lo script, ma se i dati li carichi con ajax in formato json puoi caricare sia il value che il color

[fermat]

mi sa che c'è qualcosa che sbaglio.
allora questo un esempio della doc ufficiale:

    var pieData2 = [
        {
            value: 30,
            color: "#F38630"
        },
        {
            value: 50,
            color: "#E0E4CC"
        },
        {
            value: 100,
            color: "#69D2E7"
        }

    ];

tramite ajax io ottengo questo:

[{"value":5440.96,"color":"#69D2E7"},{"value":1000,"color":"#69D2E7"},{"value":658,"color":"#69D2E7"},{"value":600,"color":"#69D2E7"},{"value":500,"color":"#69D2E7"},{"value":500,"color":"#69D2E7"},{"value":500,"color":"#69D2E7"},{"value":400,"color":"#69D2E7"},{"value":391,"color":"#69D2E7"}]

mi sembra giusto.
questa la funzione:

var pieData;

    $(document).ready(function() {
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            success: function(response) {
                pieData = response;
            }
        });
    });

eppure quando uso questa come sturttura dati non funziona.
voi trovate differenze o secondo voi sto sbagliando nel modo di prendere i dati?

[fermat]

mi pare di aver capito che il problema sia che valorizzo la variabile dantro a document.ready.
ho provato così ma non ha funzionato lo stesso:

    var NS = {};
    //var pieData = '';
    $(document).ready(function() {
        $.ajax({
            url:url,
            type: 'POST',
            dataType: 'json',
            success: function(response) {
                NS.pieData = response;
            }
        });
    });
    
    console.log('DATA: ' + NS.pieData)

[cavicchiandrea]

dati orginali
{
value: 30,
color: "#F38630"
},
dati ajax
{"value":5440.96,"color":"#69D2E7"}
domanda le virgolette che hai in ajax possono influire?
Prova a formattare i dati da php esattamente come sono in originale creadoti una stringa simil json ("[{value:5440.96,color:'#69D2E7'},{etc...}]")

[fermat]

no no le virgolette andrebbero bene, ho provato a mano.

ma il problema non è quello, è che fuori dal document.ready la viaribile non risulta valorizzata, mentre all'interno si.

mi pare di aver capito che sia un problema di tempistica.
cioà la chiamata ajax viene fatta solo dopo che la pagina è caricata, e quindi pieData risulta cmq vuota.

[fermat]

in parte avrei risolto così:

$(document).ready(function() {
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            success: function(response) {
                var pieData = response;
                console.log(response)
                chart(pieData);
            }
        });
    });

    function chart(d) {
        console.log(d)
        var pieOptions = {
            //Boolean - Whether we should show a stroke on each segment
            segmentShowStroke: true,
            //String - The colour of each segment stroke
            segmentStrokeColor: "red",
            //Number - The width of each segment stroke
            segmentStrokeWidth: 2,
            //Boolean - Whether we should animate the chart	
            animation: true,
            //Number - Amount of animation steps
            animationSteps: 100,
            //String - Animation easing effect
            animationEasing: "easeOutBounce",
            //Boolean - Whether we animate the rotation of the Pie
            animateRotate: true,
            //Boolean - Whether we animate scaling the Pie from the centre
            animateScale: false,
            //Function - Will fire on animation completion.
            onAnimationComplete: null
        }
        var myPie = new Chart(document.getElementById("chart_entrate").getContext("2d")).Pie(d, pieOptions);
    }

solo che adesso il risultato che mi viene dato è questo:

[Object { value=

"5440.96"

,  color=

"#69D2E7"

}, Object { value=

"1000.00"

,  color=

"#69D2E7"

}, .............

insomma con queli Object che danno fastidio.
avete idea del perchè?