1

Buenas tardes, en este momento me encuentro desarrollando una app web donde necesito generar la grafica de unos datos , necesito saber de que manera puedo pasarle un array con la informacion a la data que grafica , ejemplo tengo el array y tengo el codigo de la grafica:

arrayData=[];---> estos dos array ya tienen la información
arrayLabel=[];-->"

//Mi intencion es pasarle el arrayLabel como los labels que van sobre el eje x y el arrayData para que ese sea el valor graficado.

require(['assets/bower_components/chart.js/dist/Chart.min.js'], function(Chart){
      var ctx = $("#myChart");
      var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
              borderWidth:2,
              labels: [arrayLabel],
              datasets: [{

                  data: [arrayData],
                  } 
              ]
          },
          options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }]
              }
          }
      });
    })
1
  • Y cuál es el error?
    – Luis
    Commented el 4 may. 2017 a las 15:54

1 respuesta 1

0

Estoy haciendo un sistema muy similar primero necesitaras descr¿argar el motor de las graficas En mi caso te recomiendo nvd3 ya que tiene muchas graficas completas y sencillas de manejar

Si ya lo tienes instalado, puedes cambiar el array que contiene la grafica, y envia por medio de otra funcion los valores

data:
                [
                    /**
                     * Estructura de datos
                     * |------------------|------------------------|
                     * |        x         |     nombre de valor    |
                     * |------------------|------------------------|
                     * |        y         |     Valor de datos     |
                     * |------------------|------------------------|                             
                     */
                ]

con esta funcion por ejemplo enviarias los datos a data[] de la grafica linechart, x y y son los datos que lee el motor grafico

$scope.generateLineChartData = function (values, name)
{
//values: es un vector en el que tengo un conjunto
//name: el nombre que aparecera en la estructura de datos
    var line = []

    //Data is represented as an array of {x,y} pairs.
    for (var i = 0; i < values.length; i++) {
        line.push({x: i, y: values[i]});
    }

    //Line chart data should be sent as an array of series objects.
    $scope.data.push({
        values: line, //values - represents the array of {x,y} data points
        key: name, //key  - the name of the series.
    });
};

Espero te sirva, o hablame por aqui para poder explicarte mejor Suerte

4
  • Muchas gracias por tu ayuda , ya logre resolverlo , ahora tengo un pequeño problema con las graficas , lo que sucede es lo siguiente , tengo una lista donde dicha lista en cada elemento tiene un boton que muestra en unas pestañas mas informacion sobre cada elemento , siempre que se le da click en el boton se carga en una pestaña la grafica que he realizado , la cuestion es que esa grafica cada que la muestro una vez y regreso a la lista a mirar otro item se recarga la grafica pero encima de la que ya existia, alguna ayuda ? Commented el 4 may. 2017 a las 19:32
  • 1
    @FABIANAGUILAR, espera haber si te entendi, colocas la primera grafica y te funciona bien, pero cuando colocas la segunda grafica, te la pone sobre la grafica que ya habia puestos anteriormente, es así? Commented el 4 may. 2017 a las 22:57
  • @FABIANAGUILAR Mira eso se resuelve creando un servicio, en el crearas un vector vacio app.service('DataService', function () { this.data = []; }); instancias el service $scope.service = GraphsService; en este vector guardaras como objeto cada grafica, diferenciando cada grafica con id if ((id == "Graf-1")) { $scope.service.graphs.push(GraphsService.lineChart()); $scope.$apply(); } Con el pushañades el objeto linechart dentro del vector graphs... Con el $scope.$apply(); aplicas los cambios Commented el 4 may. 2017 a las 23:05
  • 1
    @FABIANAGUILAR Por ultimo, todos los graficos estan en un servicio app.service('GraphsService', function () de alli es donde consigues el objeto para graficarlo Por favor intentalo, y si tienes dudas, no dudes en preguntar Commented el 4 may. 2017 a las 23:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.