======🚧 wChart 🚧======

Esta clase Néfeliza el control [[https://www.chartjs.org/docs/2.9.4/|Chart.js]], permitiendo incluir en nuestras web gráficos para la representación de datos de una manera sencilla y muy vistosa.

Tenemos Néfelizadas 3 versiones de la librería [[https://www.chartjs.org/docs/2.9.4/|Chart.js]] con tres clases distintas.

**wChart** corresponde con la versión [[https://www.chartjs.org/docs/2.9.4/|2.9.4]]

**wChart_351** corresponde con la versión [[https://www.chartjs.org/docs/2.9.4/|3.5.1]]

y **wChart_382** corresponde con la versión [[https://www.chartjs.org/docs/2.9.4/|3.8.2]]

Ha sido realizada como una [[contrib:wchart#Agradecimientos|contribución]] a Néfele.

===== Ejemplo de uso =====
{{url>https://samples.nefele.dev/wiki/wchart  100%, 250px}}

<Code:xailer linenums:1>
/* Este ejemplo corresponde al que puede encontrar en la página inicial de Chart.js */
   WITH OBJECT WChart_382():New(:WO)
      :cHeight := 300
      :cWidth := 500
      WITH OBJECT :Configure()
         :type := 'bar'
         WITH OBJECT :data
            :labels := {'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'}
             WITH OBJECT :DataSet()
                :label := '# of Votes'
                :data  := {12, 19, 3, 5, 2, 3}
                :backgroundColor := {'rgba(255, 99, 132, 0.2)',;
                                     'rgba(54, 162, 235, 0.2)',;
                                     'rgba(255, 206, 86, 0.2)',;
                                     'rgba(75, 192, 192, 0.2)',;
                                     'rgba(153, 102, 255, 0.2)',;
                                     'rgba(255, 159, 64, 0.2)'}
                :borderColor := {'rgba(255, 99, 132, 1)',;
                                 'rgba(54, 162, 235, 1)',;
                                 'rgba(255, 206, 86, 1)',;
                                 'rgba(75, 192, 192, 1)',;
                                 'rgba(153, 102, 255, 1)',;
                                 'rgba(255, 159, 64, 1)'}
                :borderWidth := 1
             END WITH
          END WITH
          WITH OBJECT :options
             :responsive := .F.  // Por defecto lo tenemos a .T.

             // Podemos asignar una propiedad directamente
             :scales:yAxe():ticks:beginAtZero := .F. // El gráfico no empieza en 0, por defecto es .T. 

/*  También podemos ir accediendo a la estructura del objeto hasta llegar a la propiedad
             WITH OBJECT :scales
                WITH OBJECT :yAxe()
                   WITH OBJECT :ticks
                      :beginAtZero := .F. // El gráfico no empieza en 0, por defecto es .T. 
                   END WITH
                END WITH
             END WITH
*/

          END WITH
       END WITH
       :Create()
    END WITH
</Code>
===== Propiedades =====

^Nombre         ^Init   ^Descripción                                                                     ^Versión ^
|[[propiedades:cClassId]] |  'chart'  | |  0.3|
|cHeight  |              | Altura del contenedor del gráfico, no es operativo si definimos el gráfico como responsive |  0.3|
|cWidth  |              | Ancho del contenedor del gráfico, no es operativo si definimos el gráfico como responsive |  0.3|
|cAlign   |  xc_NoAlign  | Alineación del grafico dentro de su contenedor |  0.3|

===== Métodos =====

^Nombre         ^Descripción                                                                     ^Versión ^
|Configure      | Este método nos devuelve el objeto Chart que corresponde con el gráfico a presentar, las propiedades de este objeto están documentadas en la ayuda de [[https://www.chartjs.org/docs/2.9.4/|Chart.js]]  |  0.3|

===== Agradecimientos =====

A Joaquim Ferrer Godoy <quim_ferrer@yahoo.es> por contribuir con este fantástico control a Néfele.