CODEWITHSUNDEEP
javascriptjqueryarraysjsonchart.js
Otto
Otto

Reputation: 119

Chart.js - Right use of object array

i'm using chart.js to make some kind of charts for my admin panel but i'm not understanding how to use my json array of objects for making the correct dataset. What Have i to put in data field of dataset?

Thanks in advance! Simone

Here's my code:

var jqxhr = $.ajax({url: api_statistiche, type: "GET",dataType: "json",
data: {type:"top_most_ingredients",n:15}} )
.done(function(json) {
    if (!json) {
        alert( "error 1" );
        return;
    }
    if (json.res!=1 || !json.data) {
        alert( "error 2" );
        return;
    }
    var max=json.data.length;
    var data=[];
    for (i=0;i<max;i++){
        el=json.data[i];
        data[i]={
            label: el.nome,
            value: el.n
            };

    }
    console.log(data); // Show 'data' correctly
var data = {
datasets: [{
    data: ?,

Upvotes: 1

Views: 5240

Answers (2)

Otto
Otto

Reputation: 119

Thank you!

SOLVED:

var data=[];
data['labels']=[];
data['datasets']=[];
data['datasets'][0]={
    data: [],
    backgroundColor: [],
    borderColor: "rgba(0,0,0,0)",
    label: 'Like'
};
for (i=0;i<max;i++){
    el=json.data[i];
    data['labels'][i]=el.nome;
    data['datasets'][0].data[i]=el.n;
    data['datasets'][0].backgroundColor[i]=getRandomColor();
}

var ctx = document.getElementById("more_like_ingredients");
var myNewChart = new Chart(ctx,{type: 'polarArea',data: data});

Upvotes: 2

Enrikisimo Lopez Ramos
Enrikisimo Lopez Ramos

Reputation: 393

i think you need some object like this... 

{label: aPalos[u],
  fillColor: "rgba("+aColoresGraph[u]+",0.05)",
  strokeColor: "rgba("+aColoresGraph[u]+",0.8)",
  pointColor: "rgba("+aColoresGraph[u]+",0.8)",
  pointStrokeColor: "#fff",
  pointHighlightFill: "#fff",
  pointHighlightStroke: "rgba("+aColoresGraph[u]+",0.8)",
  data: aPorcentajes[u]
}

here I leave my method if it's any help to understand it better

    _generarLineChart(){
  var datos = this.props.historial;
  var len = datos.length;

  var aNameS = [];
  var objHits = [];
  var dataL = {};
  var aPorcentajes = [
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    []
  ];
  for (var i=0;i<len;i++){
    if(datos[i].selected){
      let nombre = datos[i].data.trainingSession.name;
      let field = datos[i].data.trainingSession.field;
      let round = datos[i].data.trainingSession.round;
      if(nombre){
        aNameS.push(nombre + ' - Round ' + round + ' ' + field);
      } else {
        aNameS.push(field);
      }

      let hits = datos[i].data.hits;
      for (var k=0;k<10;k++){
        let porcent;
        let hit = hits[k][1];
        if(hit == 0){
          porcent = 100;
        } else{
          porcent = parseInt((hits[k][0] / hits[k][1]) * 100);
        }
        aPorcentajes[k].push(porcent);
      }

    }
  }


  for (var u=0;u<10;u++){
    objHits.push({label: aPalos[u],
      fillColor: "rgba("+aColoresGraph[u]+",0.05)",
      strokeColor: "rgba("+aColoresGraph[u]+",0.8)",
      pointColor: "rgba("+aColoresGraph[u]+",0.8)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba("+aColoresGraph[u]+",0.8)",
      data: aPorcentajes[u]
    });
  }
  dataL['labels'] = aNameS;
  dataL['datasets'] = objHits;
  return dataL;
}

and here are the documentation for structure chartsjs http://www.chartjs.org/docs/#bar-chart-data-structure

Upvotes: 4

Related Questions