1
votes

Faire une boucle sur les données et les transmettre à un graphique

J'ai un tableau de données que j'utilise pour tracer un graphique linéaire. J'utilise ApexCharts.

<div id="signal"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

let testData = [
  {
    cell_id: 5833307,
    datetime: ["2019-05-07 11:28:16.406795+03", "2019-05-07 11:28:38.764628+03", "2019-05-07 12:18:38.21369+03", "2019-05-07 12:33:47.889552+03", "2019-05-08 08:45:51.154047+03"],
    rsrq: ["108", "108", "108", "108", "109"]
  },
  {
    cell_id: 2656007,
    datetime: ["2019-07-23 15:29:16.572813+03", "2019-07-23 15:29:16.71938+03", "2019-07-23 15:29:16.781606+03", "2019-07-23 15:29:50.375931+03", "2019-07-23 15:30:01.902013+03"],
    rsrq: ["120", "119", "116", "134", "114"]
  }
];

let datasetValue = [];

for( let x=0; x<testData.length; x++ )
{
  datasetValue =
    { 
    chart: {
      height: 380,
      width: "100%",
      type: "line"
    },
    stroke: {
      curve: 'smooth',
      width: 1.5,
    },
    markers: {
      size: 4,
    },
    legend: {
      show: true,
      position: 'top'
    },  
    series: [
      {
        name: testData[x].cell_id,
        data: testData[x].rsrq
      }
    ],
    xaxis: {
      categories: testData[x].datetime,
      title: {
        text: "Date"
      }
    },
    yaxis: {
      title: {
        text: "RSSI"
      }
    }
  }                
}
            
var chart = new ApexCharts(document.querySelector("#signal"), datasetValue);

chart.render();

Je prends donc mon tableau JSON, je le boucle dans une boucle for pour obtenir mes ensembles de données. Je définis une variable de tableau datasetValue à laquelle j'attribue les données en boucle et les transmets à mon instance de graphique: new ApexCharts (document.querySelector ("# rssi-signal"), datasetValue); code>

Ce qui se passe, c'est que seul le dernier objet du tableau est passé, ce qui signifie qu'il me manque / ne passe pas quelque chose pour obtenir toutes mes données.

javascript json apexcharts

1 commentaires

Vous voulez probablement pousser vos données dans votre tableau plutôt que de les écraser avec datasetValue = . Il est probablement préférable d'ajouter à votre question à quoi devrait ressembler datasetValue

4 Réponses :

2
votes

Puisque vous déclarez un tableau en dehors de la boucle for

    datasetValue.series.push(
          {
            name: testData[x].cell_id,
            data: testData[x].rsrq
          });
    datasetValue.xaxis.categories.push(testData[x].datetime);

À l'intérieur de la boucle for, vous devriez faire

let datasetValue = { 
    chart: {
      height: 380,
      width: "100%",
      type: "line"
    },
    stroke: {
      curve: 'smooth',
      width: 1.5,
    },
    markers: {
      size: 4,
    },
    legend: {
      show: true,
      position: 'top'
    },  
    series: [],
    xaxis: {
      categories: [],
      title: {
        text: "Date"
      }
    },
    yaxis: {
      title: {
        text: "RSSI"
      }
    }
  };

Vous devriez pousser la valeur à l'intérieur du tableau au lieu de la réaffecter à chaque itération

2 commentaires

salut Vivek. Merci pour votre contribution. J'avais essayé de pousser mes définitions de graphique comme vous le suggérez, mais j'ai obtenu l'erreur: TypeError: Impossible de lire la propriété 'type' de undefined

@suo Salut suo, je viens de vérifier les apexcharts et vous devriez le faire, veuillez vérifier la réponse modifiée

4
votes

Restructurez le testData en regroupant les séries et les catégories

<div id="signal"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

let testData = [{
    cell_id: 5833307,
    datetime: ["2019-05-07 11:28:16.406795+03", "2019-05-07 11:28:38.764628+03", "2019-05-07 12:18:38.21369+03", "2019-05-07 12:33:47.889552+03", "2019-05-08 08:45:51.154047+03"],
    rsrq: ["108", "108", "108", "108", "109"]
  },
  {
    cell_id: 2656007,
    datetime: ["2019-07-23 15:29:16.572813+03", "2019-07-23 15:29:16.71938+03", "2019-07-23 15:29:16.781606+03", "2019-07-23 15:29:50.375931+03", "2019-07-23 15:30:01.902013+03"],
    rsrq: ["120", "119", "116", "134", "114"]
  }
];

let series = [];
let categories = [];


for (let x = 0; x < testData.length; x++) {
  series.push({
    name: testData[x].cell_id,
    data: testData[x].rsrq
  });
  categories = categories.concat(testData[x].datetime);
}

var chart = new ApexCharts(document.querySelector("#signal"), {
  chart: {
    height: 380,
    width: "100%",
    type: "line"
  },
  stroke: {
    curve: 'smooth',
    width: 1.5,
  },
  markers: {
    size: 4,
  },
  legend: {
    show: true,
    position: 'top'
  },
  series: series,
  xaxis: {
    categories: categories,
    title: {
      text: "Date"
    }
  },
  yaxis: {
    title: {
      text: "RSSI"
    }
  }
});

chart.render();

let series = [];
let categories = [];

for (let x = 0; x < testData.length; x++) {
  series.push({
    name: testData[x].cell_id,
    data: testData[x].rsrq
  });
  categories.concat(testData[x].datetime);
}

0 commentaires

2
votes

La première erreur que vous essayez de faire est de définir "datasetValue" comme une variable de tableau.

var datasetValue;
var series = [];
var categories = [];

for(let x=0; x<testData.length;x++) {
series.push({
    name: testData[x].cell_id,
    data: testData[x].rsrq
});
categories.concat(testData[x].datetime);
}

datasetValue = { 
    chart: {
      height: 380,
      width: "100%",
      type: "line"
    },
    stroke: {
      curve: 'smooth',
      width: 1.5,
    },
    markers: {
      size: 4,
    },
    legend: {
      show: true,
      position: 'top'
    },  
    series,
    xaxis: {
      categories,
      title: {
        text: "Date"
      }
    },
    yaxis: {
      title: {
        text: "RSSI"
      }
    }
  };

var chart = new ApexCharts(document.querySelector("#signal"), datasetValue);

chart.render();

Vous essayez d'affecter un objet à une variable de tableau qui ne contient que les derniers résultats en raison de bouclage et affectation. Au lieu de cela, utilisez la méthode push du tableau pour pousser les données dans un tableau.

datasetValue.push(yourdata); //correct way to push data to array

Donc, il est inutile de définir "datasetValue" comme un tableau.

Pour atteindre votre objectif, vous pouvez appliquer une boucle avec les éléments suivants

datasetValue = yourdata; //wrong in case of pushing data into array

0 commentaires

1
votes

Je déplace votre boucle for après la définition de datasetValue pour y ajouter uniquement des séries, et change également l'extrait de xaxis

<div id="signal"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

let testData = [
  {
    cell_id: 5833307,
    datetime: ["2019-05-07 11:28:16.406795+03", "2019-05-07 11:28:38.764628+03", "2019-05-07 12:18:38.21369+03", "2019-05-07 12:33:47.889552+03", "2019-05-08 08:45:51.154047+03"],
    rsrq: ["108", "108", "108", "108", "109"]
  },
  {
    cell_id: 2656007,
    datetime: ["2019-07-23 15:29:16.572813+03", "2019-07-23 15:29:16.71938+03", "2019-07-23 15:29:16.781606+03", "2019-07-23 15:29:50.375931+03", "2019-07-23 15:30:01.902013+03"],
    rsrq: ["120", "119", "116", "134", "114"]
  }
];

let datasetValue = 
    { 
    chart: {
      height: 380,
      width: "100%",
      type: "line"
    },
    stroke: {
      curve: 'smooth',
      width: 1.5,
    },
    markers: {
      size: 4,
    },
    legend: {
      show: true,
      position: 'top'
    },  
    series: [
    ],
    xaxis: {
      categories: testData[0].datetime,
      title: {
        text: "Date"
      }
    },
    yaxis: {
      title: {
        text: "RSSI"
      }
    }
  }
  
for( let x=0; x<testData.length; x++ )
{
    datasetValue.series.push({
        name: testData[x].cell_id,
        data: testData[x].rsrq
      })
}
  
var chart = new ApexCharts(document.querySelector("#signal"), datasetValue);

chart.render();

for( let x=0; x<testData.length; x++ )
{
    datasetValue.series.push({
        name: testData[x].cell_id,
        data: testData[x].rsrq
    })
}

2 commentaires

salut Kamil. Merci pour votre contribution. Cela fonctionne, même si la seule question serait de savoir pourquoi passer les catégories comme: testData [0] .datetime . car maintenant l'axe X n'aura que les données du premier objet du tableau uniquement. pour la propriété datetime

C'est un problème plus fondamental, je pense - pour écrire des données multi-séries dans un graphique, elles doivent avoir le même domaine (mêmes dates / points sur l'axe des x) - donc votre entrée datetime pour les deux séries doit être les mêmes (dans votre cas, ils sont différents - le problème est donc dans les données elles-mêmes)