Conversion ajax to javascript object - this.responseText

Version imprimable

Bonjour à tous

J’ai des données que j’utilise pour obtenir des totaux et ainsi alimenter un chart.js .

Ça marche très bien avec : (voir data: TotalTicketsPerDay)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function BuildBarChart() {
 
var ctx = document.getElementById('myChart').getContext('2d');
DaysInTheMonthString = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
 
const TotalTicketsPerDay = [0,0,0,0,0,0,0,0,5,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
 
//…
 
  var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',
 
        // The data for our dataset
        data: {
            labels: DaysInTheMonthString,
            datasets: [{
                label: 'Total tickets open this month',
                backgroundColor: 'rgb(2, 117, 216)',
                borderColor: 'rgb(2, 117, 216)',                
                data: TotalTicketsPerDay
            }]
        },

Malheureusement j’ai besoin d’utiliser une variable a la place car les résultats vont changer tous les jours.
Le résultat se trouve dans une variable et se représente comme ceci :
[0,0,0,0,0,0,0,0,5,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

Si j’utilise une variable pour représenter ce string de résultats ça ne marche pas.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function BuildBarChart(result) {
 
    var ctx = document.getElementById('myChart').getContext('2d');
    DaysInTheMonthString = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
 
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',
 
        // The data for our dataset
        data: {
            labels: DaysInTheMonthString,
            datasets: [{
                label: 'Total tickets open this month',
                backgroundColor: 'rgb(2, 117, 216)',
                borderColor: 'rgb(2, 117, 216)',                
                data: result
            }]
        },

Et si je fais

Code:

const TotalTicketsPerDay = result ;

Ça ne marche pas non plus.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function BuildBarChart(result) {
 
    var ctx = document.getElementById('myChart').getContext('2d');    
    DaysInTheMonthString = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
 
 
    const TotalTicketsPerDay = result ;
 
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',
 
        // The data for our dataset
        data: {
            labels: DaysInTheMonthString,
            datasets: [{
                label: 'Total tickets open this month',
                backgroundColor: 'rgb(2, 117, 216)',
                borderColor: 'rgb(2, 117, 216)',                
                data: TotalTicketsPerDay
            }]
        },

Quelqu’un a une idée pour résoudre ce problème ?

Merci

14/12/2019, 17h55
javatwister

Salut,

je n'ai pas le problème en testant;
D'où vient result et comment appelles-tu BuildBarChart() ?
14/12/2019, 18h32
javatwister

tu dis 2 fois ça ne marche pas mais tu ne parles pas de message dans la console;
14/12/2019, 19h51
danielhagnoul

:salut:

[0,0,0,0,0,0,0,0,5,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] est un Array qui doit être déclaré par un let ou un const soit dans la fonction soit en dehors.

Reste à savoir si sa forme et son contenu sont compris par la propriété data de Chart
15/12/2019, 06h31
NoSmoking

Bonjour,
ton retour serveur, this.responseText, est une chaîne de caractères alors que Chart.js requière un Array, il te faut donc transformer l'une en l'autre et pour cela il existe JSON.parse().

Code:

const dataRetour = JSON.parse(this.responseText);

Citation:

Envoyé par NoSmoking

Bonjour,
ton retour serveur, this.responseText, est une chaîne de caractères alors que Chart.js requière un Array, il te faut donc transformer l'une en l'autre et pour cela il existe JSON.parse().

Code:

const dataRetour = JSON.parse(this.responseText);

C'est bien pansé mais je l'avais déjà mis.
Même problème.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
window.onload = function getStatData() {
 
    if (window.location.pathname.startsWith('/index')) {
        // console.log("Javascript Function getStatsData");
        var oReq = new XMLHttpRequest(); // New request object
        oReq.onload = function () {          
            // The actual data is found on this.responseText          
            console.log(this.responseText);
            // STOP ????????????? WTF
            //"[0,0,0,0,0,0,0,0,5,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"STOP
            // REMOVE STOP
            obj = JSON.parse(this.responseText.substring(0, jSonLenght - 4));         
            BuildBarChart(obj);
        };
        oReq.open("get", "index.php?action=statscontroller", true);      
        oReq.send();
    } else {
 
    }    
}
 
getStatData();

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
function BuildBarChart(result) {
 
    var ctx = document.getElementById('myChart').getContext('2d');
 
    DaysInTheMonthString = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
 
    // const TotalTicketsPerDay = [0,0,0,0,0,0,0,0,5,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
 
    const TotalTicketsPerDay = JSON.parse(result);
 
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',
 
        // The data for our dataset
        data: {
            labels: DaysInTheMonthString,
            datasets: [{
                label: 'Total tickets this month',
                backgroundColor: 'rgb(2, 117, 216)',
                borderColor: 'rgb(2, 117, 216)',
                data: TotalTicketsPerDay
            }]
        },
 
        // Configuration options go here
        options: {
            maintainAspectRatio: false,
            layout: {
                padding: {
                    left: 0,
                    right: 15,
                    top: 25,
                    bottom: 0
                }
            },
            scales: {
                xAxes: [{
                    time: {
                        unit: ''
                    },
                    gridLines: {
                        display: true,
                        drawBorder: false
                    },
                    ticks: {
                        maxTicksLimit: 31
                    },
                    maxBarThickness: 5,
                }],
                yAxes: [{
                    ticks: {
                        min: 0,
                        max: 5,
                        maxTicksLimit: 5,
                        padding: 1,
                        // Include a dollar sign in the ticks
                        callback: function (value, index, values) {
                            return number_format(value);
                        }
                    },
                    gridLines: {
                        color: "rgb(234, 236, 244)",
                        zeroLineColor: "rgb(234, 236, 244)",
                        drawBorder: false,
                        borderDash: [2],
                        zeroLineBorderDash: [2]
                    }
                }],
            },
            legend: {
                display: true
            },
            tooltips: {
                titleMarginBottom: 10,
                titleFontColor: '#6e707e',
                titleFontSize: 14,
                backgroundColor: "rgb(255,255,255)",
                bodyFontColor: "#858796",
                borderColor: '#dddfeb',
                borderWidth: 1,
                xPadding: 15,
                yPadding: 15,
                displayColors: false,
                caretPadding: 10,
                callbacks: {
                    label: function (tooltipItem, chart) {
                        var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                        return datasetLabel + ": " + number_format(tooltipItem.yLabel);
                    }
                }
            },
        }
    });
}

15/12/2019, 11h05
javatwister

Tu fais appel à JSON.parse 2 fois pour la même donnée?
16/12/2019, 11h39
BlitzMX

J'ai peutêtre du mal a vous expliquer mon problème et je vous en demande pardon.
Je vais réecrir mon message principal afin de mieu expliquer le problème ou de mieu le décrir.

Merci a tous

1 pièce(s) jointe(s)

J'ai résolu le problème avec la logic suivante:

- J'obtien les résultats de la base de données.

- Je me construit la string avec du php comme je peux:

Code:

[0,0,0,0,0,0,0,0,5,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

- Je reenvoi le résultat dans mon javascript.

Code:

[0,0,0,0,0,0,0,0,5,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]STOP

- Je retire le STOP a la fin avec:
Code:

1 2 jSonLenght = this.responseText.length; result = this.responseText.substring(0, jSonLenght - 4);
- Je converti le résultat déja écrit comme il le faut en array avec:

Code:

array = JSON.parse(result);

- Finalement, j'appele ma fonction chart: et j'envoi mon array pret a être utilisé:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function BuildBarChart(TotalTicketsPerDay) { var ctx = document.getElementById('myChart').getContext('2d'); DaysInTheMonthString = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]; var chart = new Chart(ctx, { // The type of chart we want to create type: 'bar', // The data for our dataset data: { labels: DaysInTheMonthString, datasets: [{ label: 'Total tickets this month', backgroundColor: 'rgb(2, 117, 216)', borderColor: 'rgb(2, 117, 216)', data: TotalTicketsPerDay }] },
Et j'obtien un beau résultat: (voir pièce jointe).

Merci a tous pour votre pacience.