Conversion ajax to javascript object - this.responseText

**BlitzMX** · 14/12/2019, 16h37

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

const TotalTicketsPerDay = result ;

Ça ne marche pas non plus.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**javatwister** · 14/12/2019, 17h55

Salut,

je n'ai pas le problème en testant;
D'où vient result et comment appelles-tu BuildBarChart() ?

**javatwister** · 14/12/2019, 18h32

tu dis 2 fois ça ne marche pas mais tu ne parles pas de message dans la console;

**danielhagnoul** · 14/12/2019, 19h51

[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

**NoSmoking** · 15/12/2019, 06h31

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**BlitzMX** · 15/12/2019, 10h58

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
                    }
                }
            },
        }
    });
}

**javatwister** · 15/12/2019, 11h05

Tu fais appel à JSON.parse 2 fois pour la même donnée?

**BlitzMX** · 16/12/2019, 11h39

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

Conversion ajax to javascript object - this.responseText

JavaScript

Vue hybride

Discussions similaires

Partager

Partager