{"id":212,"date":"2022-11-03T12:30:00","date_gmt":"2022-11-03T12:30:00","guid":{"rendered":"https:\/\/pacohunterdev.com\/blog\/?p=212"},"modified":"2022-11-03T01:32:01","modified_gmt":"2022-11-03T01:32:01","slug":"crear-grafica-con-chart-js-y-js","status":"publish","type":"post","link":"https:\/\/pacohunterdev.com\/blog\/2022\/11\/03\/crear-grafica-con-chart-js-y-js\/","title":{"rendered":"Crear gr\u00e1fica con Chart.js y JS"},"content":{"rendered":"\n

En algunos de los sistemas que te he presentado he agregado gr\u00e1ficas usando Chart.js. En este ejemplo te mostrar\u00e9 como crear una gr\u00e1fica de barras, pie, dona y l\u00ednea, pues son las que m\u00e1s he empleado. Puedes ver la documentaci\u00f3n oficial en su sitio web<\/a>.<\/p>\n\n\n\n

Importando Chart.js<\/h2>\n\n\n\n

Puedes agregarlo de diferentes maneras, ya sea descargando el js, instal\u00e1ndolo con npm o con el cdn, en mi caso usar\u00e9 esta y solo lo agregar\u00e9 dentro del <head><\/head><\/p>\n\n\n\n

<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@3.9.1\/dist\/chart.min.js\"><\/script><\/code><\/pre>\n\n\n\n
Contenedor de la gr\u00e1fica<\/h2>\n\n\n\n
Nuestra gr\u00e1fica se debe de mostrar dentro de un <canvas><\/canvas><\/code> a este debemos colocarle un id<\/strong><\/em>, pues con este sabremos en d\u00f3nde queremos dibujar la gr\u00e1fica. En mi caso voy a hacer diferentes gr\u00e1ficas. Las primeras van a ser con datos de un objeto predefinido y la otra para datos provenientes de una api. Entonces a cada canvas le colocar\u00e9 un id para saber qu\u00e9 grafica va a contener.<\/p>\n\n\n\n
\n
\n
\"\"
Contenedores para gr\u00e1ficas de objeto mascotas<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Contenedores para gr\u00e1ficas de los datos de la api<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Funci\u00f3n para crear la gr\u00e1fica<\/h2>\n\n\n\n
Primero voy a crear una funci\u00f3n que pueda utilizar para dibujar las gr\u00e1ficas. Esta funci\u00f3n va a recibir el tipo de gr\u00e1fica (lineal, barras, dona, pie), el contenedor (id del canvas), labels (las etiquetas), data (los valores de cada etiqueta), el label o etiqueta que dir\u00e1 y por \u00faltimo el tama\u00f1o, que se obtiene con la longitud del arreglo u objeto.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Primero cuando seleccionamos el canvas en el que se va a mostrar la gr\u00e1fica colocamos el id del contenedor que estamos recibiendo.<\/strong><\/p>\n\n\n\n
En type colocamos el tipo de gr\u00e1fica que recibimos, lo mismo con los labels, data y label.<\/strong><\/p>\n\n\n\n
Para el color <\/strong>se emplea otra funci\u00f3n que genera colores aleatorios dependiendo de la cantidad de colores que se necesiten, en este caso se usa el tamanio que recibimos. La funci\u00f3n para generar los colores es la siguiente:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Gr\u00e1ficas con datos predefinidos<\/h2>\n\n\n\n
Como te mencione, primero voy a hacer las gr\u00e1ficas para los datos de un objeto. El objeto es el siguiente:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Lo que sigue es obtener los labels <\/strong>que ser\u00e1n los nombres de las mascotas  y data <\/strong>que ser\u00e1n las edades de las mascotas, que le pasaremos a la funci\u00f3n crearGrafica<\/strong>. Como es un objeto de tipo key: value<\/strong> para obtenerlos simplemente usamos Object.keys y Object.values respectivamente. Las puse por separado en funciones y se ven as\u00ed<\/p>\n\n\n\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
Para dibujar las gr\u00e1ficas llamamos a la funci\u00f3n de crearGrafica <\/strong>y le pasamos los datos necesarios como se muestra a continuaci\u00f3n.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Como se ve primero va el tipo,  despu\u00e9s el id del contenedor, seguido las funciones para obtener los nombres (labels<\/strong>), las edades (data<\/strong>), el label que en este caso ser\u00e1 solo \u00abEdad\u00bb <\/strong>y por ultimo el tama\u00f1o del objeto. Se llama 4 veces a la funci\u00f3n y en cada una cambia el tipo y el contenedor. El resultado es el siguiente<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Gr\u00e1ficas con datos provenientes de una API<\/h2>\n\n\n\n
No siempre vamos a poder definir los datos nostros, casi siempre estos provienen de una fuente externa y con estos datos se deben de crear las gr\u00e1ficas. Para este ejemplo emplear\u00e9 los datos de una API que obtiene la poblaci\u00f3n de Estados Unidos por a\u00f1o, puedes ver la documentaci\u00f3n aqu\u00ed <\/a><\/p>\n\n\n\n
Los datos que obtengo son los siguientes:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Pero a m\u00ed lo que me interesa es el a\u00f1o y la poblaci\u00f3n.<\/p>\n\n\n\n
Entonces lo primero que hago es obtener los datos con fetch<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Tambi\u00e9n, al igual que en el ejemplo anterior, voy a crear unas funciones para obtener los a\u00f1os y la poblaci\u00f3n que ser\u00e1n los labels y data respectivamente.<\/p>\n\n\n\n
\"\"
Year y Population son las claves que me interesan<\/figcaption><\/figure>\n\n\n\n
Cuando resuelvo la funci\u00f3n de obtenerDatosDeApi<\/strong>, primero obtengo el contenido de la propiedad data<\/em>, pues ah\u00ed est\u00e1n los datos que me interesan y despu\u00e9s al igual que antes llamamos a la funci\u00f3n crearGrafica <\/strong>y le pasamos los datos necearios.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
El resultado es el siguiente<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Conclusi\u00f3n<\/h2>\n\n\n\n
Puedes ver el c\u00f3digo completo aqu\u00ed <\/a>y la demostraci\u00f3n por aqu\u00ed<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
En algunos de los sistemas que te he presentado he agregado gr\u00e1ficas usando Chart.js. En este ejemplo te mostrar\u00e9 como crear una gr\u00e1fica de barras, pie, dona y l\u00ednea, pues son las que m\u00e1s he empleado. Puedes ver la documentaci\u00f3n oficial en su sitio web. Importando Chart.js Puedes agregarlo de diferentes maneras, ya sea descargando el js, instal\u00e1ndolo con npm o con el cdn, en mi caso usar\u00e9 esta y solo lo agregar\u00e9 dentro del <head><\/head> Contenedor de la gr\u00e1fica Nuestra gr\u00e1fica se debe de mostrar dentro de un <canvas><\/canvas> a este debemos colocarle un id, pues con este sabremos...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[23],"class_list":["post-212","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript"],"_links":{"self":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts\/212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/comments?post=212"}],"version-history":[{"count":2,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts\/212\/revisions"}],"predecessor-version":[{"id":229,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts\/212\/revisions\/229"}],"wp:attachment":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/media?parent=212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/categories?post=212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/tags?post=212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}