====== Gráfico Periódico ======
===== Generando Componente =====

Componente de la librería de Admin LTE 3 que permite establecer una o varias series de valores con nombres asociados para construir una gráfica de área, de barras ó de líneas; de tipo responsiva y de forma dinámica.

{{:c9f1f876-acd9-422f-b019-1306ca81dc14_4_5005_c.jpeg?400|}}

Se debe establecer de manera predeterminada los siguientes datos:
  - Tamaño
  - Nombre
  - Título
  - Modo {Barras, Áreas o Líneas}
  - Visibilidad

{{:05583242-9600-40da-9cf2-36c5b9c421c5_4_5005_c.jpeg|}}

----
===== Asignando datos en función AJAX =====

__**Estableciendo datos**__

Para establecer las series de nuestro gráfico primero debemos construir un arreglo con dos propiedades asociadas con las palabras reservadas **series** y **labels**, dónde la estructura de las series será un arreglo asignado de arreglos con valores en el mismo orden de la propiedad de labels, cómo se indica a continuación:

<code php>
 
    $this->resAjax->setDataAreaGraph("totalesPorPeriodo",[
            "series"=>[
                "Lunes"=>[8,9,3,7],
                "Martes"=>[4,4,4,8],
                "Miercoles"=>[6,5,3,2],
                "Jueves"=>[2,7,10,7],
                "Viernes"=>[8,6,2,4],
                "Sábado"=>[4,2,7,6],
                "Domingo"=>[10,9,3,5],
            ],
            "labels"=>["Original","Comparable","Iterable","Traceable"]
    ]);
</code>

----

__**Estableciendo pie de gráfico**__

En el pie de la tarjeta de la gráfica se pueden o no establecer celdas dinámicas con un nombre, un ícono y un color especial para exponer datos adicionales, para establecer los campos se configur un arreglo de objetos con propiedades cómo se muestra a continuación:

<code php>

   $this->resAjax->setFooterPastelGraph("acumuladosPorProyecto",[
            [
                "icon"=>"fas fa-caret-up",
                "iconText"=>"17%",
                "text"=>"$35,010.43",
                "title"=>"TOTAL AUMENTADO",
                "color"=>"green"
            ],
            [
                "icon"=>"fas fa-caret-down",
                "iconText"=>"12%",
                "text"=>"$9,210.43",
                "title"=>"TOTAL REDUCIDO",
                "color"=>"red"
            ],
            [
                "icon"=>"fas fa-caret-right",
                "iconText"=>"32%",
                "text"=>"$98,210.43",
                "title"=>"TOTAL AVANZADO",
                "color"=>"blue"
            ],
    ]);
</code>


===== Demostración de la ejecución de los métodos anteriores =====

Al ejecutar los metodos anteriores en la sección de onStart de la funcion AJAX asignada a la forma en cuestión, se puede visualizar una gráfica circular responsiva con la siguiente serie proporcionada con sus respectivos valores, el título y el pie de campos con sus íconos de los colores ya seleccionados:


__**Si se establece el modo Área**__

{{:a4dea2e2-8566-4db4-b5e5-230750097be2.jpeg|}}

__**Si se establece el modo Barras**__

{{:71409c7f-c81f-4620-958e-15cd25a7de3e.jpeg|}}

__**Si se establece el modo Líneas**__

{{:91b4e09a-b973-403f-8e1d-e88bc7a3ac93.jpeg|}}
