1

Graficando Informacion con ChartJs

Para todas aquellas ocasiones en las que necesitamos representar información de forma grafica en nuestra App.
Chart.js es una librería de javascript muy sencilla la cual nos permite usar una amplia gama de graficos.
Bueno sin mas dilación vamos allá.
lo primero es importar la librería, en este caso usare las cdn.

<scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js">

luego de esto ya podemos comenzar con nuestro grafico.

para representar nuestro grafico usamos una etiqueta canvas de html, a la cual le dejaremos un id, para posteriormente identificarla desde javascript

<canvas id="grafico"height="80px"></canvas>

teniendo esto listo procedemos con nuestro grafico

      var mi_primer_grafico ={
        type:"doughnut",//seleccionamos el tipo de grafico, en este caso es un grafico estilo pie, en esta parte podemos cambiar el tipo de grafico por el que deseamos        data:{/le pasamos la data
          datasets:[{
            data:[1,2,4,6 ],//esta es la data, podemos pasarle variables directamente desde el backend usando blade de la siguiente forma {{$dato1}},            backgroundColor: [//seleccionamos el color de fondo para cada dato que le enviamos"#04B404","#FFBF00",  "#FF0000",  "#04B4AE",
             ],
          }],
          labels: [//añadimos las etiquetas correspondientes a la data"Dato1",  "Dato2", "Dato3", "Dato4",  
             ]
        },
        options:{//le pasamos como opcion adicional que sea responsivo          responsive: true,
        }
      }

Finalmente para poder mostrar el grafico en nuestra app hacemos el llamado al mismo.

var primer_grafico = document.getElementById('grafico').getContext('2d');//seleccionamos el canvaswindow.pie = new Chart(primer_grafico,mi_primer_grafico);//le pasamos el grafico y la data para representarlo

y Listo, con esto ya comenzar a graficar nuestra data.
les dejo el enlace a la documentación de Chart.js http://www.chartjs.org/
espero les sea de ayuda.
Saludos

Escribe tu comentario
+ 2
Ordenar por:
1
1009Puntos

Muchas gracias por crear el tema Alexis, me a servido de mucho,
pero tengo una duda: como puedo conectar los valores de los imput (imput de un form) para que se muestren en la gráfica, e tratado de muchas formas pero no me funciona …

hasta ahora mi arreglo lo tengo así (me funciona si muestro los resultados con números enteros… pero con las variables no):

<script type=“text/javascript”>
$(document).ready( function(){
var datos = {
type: ‘horizontalBar’,
data: {
datasets :[{
data : [
100,
200,
15,
20,
25,
100,
200,
15,
],
backgroundColor: [
"#000",
"#ccc",
"#000fff",
"#00ff00",
"#aaa",
"#000fff",
"#00ff00",
"#aaa",
],
}],
labels : [
“data1”,
“data2”,
“data3”,
“data4”,
“data5”,
“data6”,
“data7”,
“data8”,
]
},
options : {
responsive : true,
}

    };

    var canvas = document.getElementById('chart').getContext('2d');
    window.pie = new Chart(canvas, datos);

    setInterval( function(){
        datos.data.datasets.splice(0);
        var newData = {
            data : [
                result_1,
                result_2,
                result_3,
                result_4,
                result_5,
                result_6,
                result_7,
                result_8,
            ]
        };

        datos.data.datasets.push(newData);

        window.pie.update();
    })

    var result_1 = Number(document.getElementById('r_GalonesGasolinaDiario').value);
    var result_2 = Number(document.getElementById('r_GastodiarioGasolina').value);
    var result_3 = Number(document.getElementById('r_GastodiarioGLP').value);
    var result_4 = Number(document.getElementById('r_AhorroNetoDiarioGLP').value);
    var result_5 = Number(document.getElementById('r_GastodiarioEnGN').value);
    var result_6 = Number(document.getElementById('r_AhorroNetoDiarioGN').value);
    var result_7 = Number(document.getElementById('r_AhorroAñoGLP').value);
    var result_8 = Number(document.getElementById('r_AhorroAñoGN').value);

});

</script>

1
3Puntos

muy bueno queria hacerte una consulta, no se como hacer cuando tengo que graficar con datos que vienen de una base de datos, puedo tomar el valor del recordset pero no se como en el data utilizar un while o un for i ya que no son fijos la cantidad de datos a graficar, ni tampoco en los labels. Por ejemplo un resultado pueden ser como labels; enero, febrero,marzo y los datos 10, 20, 30 y en otro resultado puedo tener enero, febrero,marzo, abril, mayo, junio, julio, agosto y como datos, 10, 20, 30, 40, 50, 60, 70, 80. Muchas gracias.

", "created_at": "2019-03-16T19:16:50.354470Z", "deep": 0, "n_responses": 0, "n_stars": 1, "parent_id": null, "ai_generated": false}, "552453": {"id": 552453, "object_id": "1927", "object_type": "contribution", "author_id": 433457, "comments": [637712], "content": "

Una duda, Chart JS es gratuito ?

", "markdown_content": "Una duda, Chart JS es gratuito ?", "created_at": "2019-04-04T17:17:14.572832Z", "deep": 0, "n_responses": 1, "n_stars": 1, "parent_id": null, "ai_generated": false}, "650868": {"id": 650868, "object_id": "1927", "object_type": "contribution", "author_id": 867255, "comments": [], "content": "

muy bueno queria hacerte una consulta, no se como hacer cuando tengo que graficar con datos que vienen de una base de datos, puedo tomar el valor del recordset pero no se como en el data utilizar un while o un for i ya que no son fijos la cantidad de datos a graficar, ni tampoco en los labels. Por ejemplo un resultado pueden ser como labels; enero, febrero,marzo y los datos 10, 20, 30 y en otro resultado puedo tener enero, febrero,marzo, abril, mayo, junio, julio, agosto y como datos, 10, 20, 30, 40, 50, 60, 70, 80. Muchas gracias.

", "markdown_content": "muy bueno queria hacerte una consulta, no se como hacer cuando tengo que graficar con datos que vienen de una base de datos, puedo tomar el valor del recordset pero no se como en el data utilizar un while o un for i ya que no son fijos la cantidad de datos a graficar, ni tampoco en los labels. Por ejemplo un resultado pueden ser como labels; enero, febrero,marzo y los datos 10, 20, 30 y en otro resultado puedo tener enero, febrero,marzo, abril, mayo, junio, julio, agosto y como datos, 10, 20, 30, 40, 50, 60, 70, 80. Muchas gracias.", "created_at": "2019-07-15T19:53:22.433093Z", "deep": 0, "n_responses": 0, "n_stars": 1, "parent_id": null, "ai_generated": false}, "637712": {"id": 637712, "object_id": "1927", "object_type": "contribution", "author_id": 744911, "comments": [], "content": "

Si

", "markdown_content": "Si", "created_at": "2019-07-04T19:15:35.784288Z", "deep": 1, "n_responses": 0, "n_stars": 1, "parent_id": 552453, "ai_generated": false}}; window.course = {"name": "Curso de PHP con Laravel 2017", "slug": "curso-php-laravel-2017", "id": 1122, "badge": "https://static.platzi.com/media/achievements/1122-5c66464b-92ef-4b6a-8669-d19ff8163d68.png", "paid": true}; window.career = {"name": "PHP", "color": "#88d70b", "url": "/learning-path/desarrollo-php/"}; window.firstComments = [536840, 552453, 650868]; window.stars = {"comments": [], "contribution": [], "related_posts": []}; window.messages = {"discussion": {"responsesTo": "Tutoriales de"}, "popups": {"login": {"welcome": "Bienvenido a Platzi", "loginFacebook": "Ingresa con facebook", "loginTwitter": "Ingresa con Twitter", "loginMail": "\u00bfIngresas con email?", "haveAccount": "\u00bfA\u00fan no tienes cuenta?", "signup": "Reg\u00edstrate aqu\u00ed", "privacy": {"part1": "Valoramos tu", "part2": "privacidad", "part3": "como si fuera nuestra"}, "terms": {"part1": "Ante cualquier duda, nuestros", "part2": "Terminos de servicio"}}, "pay": {"buyPlan": "Comprar Plan", "monthly": {"label": "En 12 pagos sin intereses"}}}, "response": {"time": "hace", "respond": "Escribe tu respuesta", "hideResponses": "Ocultar respuestas", "numberOfResponses": "{number} respuestas", "responseOf": "{number} respuesta", "delete": "Eliminar"}, "form": {"placeholder": "Deja tu comentario", "editor": {"placeholder": "Escribe tu pregunta", "edit": "Editar", "preview": "Vista previa", "expand": "Expandir", "contract": "Contraer", "bold": "Negrita", "italic": "Cursiva", "underline": "Subrayado", "heading": "Encabezado", "code": "Insertar c\u00f3digo", "quote": "Cita", "link": "Enlace", "unorderedList": "Lista desordenada", "orderedList": "Lista ordenada", "image": "Imagen", "youtube": "Youtube", "uploading": "Subiendo imagen"}, "buttons": {"send": "Enviar", "sending": "Enviando", "cancel": "Cancelar"}, "helpbar": {"markdown": "Markdown", "preview": "Vista previa"}, "bottom": {"title": "T\u00edtulo"}}, "access.now": "ver clase", "post.related": "Entradas relacionadas", "start.now": "ver clase sin costo", "banner": {"message": "Estas respuestas son parte del {course}.
Accede a todos los cursos desde {currency} al a\u00f1o", "button": "Suscr\u00edbete"}, "labels": {"question": "Pregunta"}, "bestAnswer": "Mejor respuesta", "comments": {"reply": "Responder", "replyDisabled": "Ocultar", "delete": "Eliminar", "bestAnswer": "Mejor respuesta", "getMore": "Ver todas las respuestas", "points": "Puntos", "new": "Nuevas", "top": "Top", "orderBy": "Ordenar por:", "viewMore": "Ver m\u00e1s"}, "modal.delete.title": "\u00bfQuieres eliminar este Post?", "modal.delete.sub": "Eliminar Blogspost", "modal.delete.error": "Ha ocurrido un error :(", "modal.delete.loading": "Borrando Post...", "modal.delete.yes": "Si, eliminar", "modal.delete.no": "No", "login.fb": "Ingresa con facebook", "login.social": "Con tus redes sociales", "login.tw": "Ingresa con twitter", "author.posts": "Todas sus entradas", "editor.submit.b": "Suma tu comentario", "editor.submit.a": "Sin timidez", "editor.submit.c": "Suma tu comentario", "form.editor.isQuestion": "\u00bfTu comentario es una pregunta?", "delete": "Eliminar", "edit": "Editar", "posts.related": "Entradas relacionadas", "login.email.title": "Con tu Email", "login.email": "Correo electr\u00f3nico", "login.password.forgot": "\u00bfOlvidaste tu contrase\u00f1a?", "login.account": "\u00bfA\u00fan no tienes cuenta? Reg\u00edstrate aqu\u00ed", "LoginSocial-facebook-login": "Iniciar sesi\u00f3n con Facebook", "LoginSocial-twitter-login": "Iniciar sesi\u00f3n con Twitter", "LoginSocial-google-login": "Iniciar sesi\u00f3n con Google", "login_email": "Tu email", "login_password": "Tu contrase\u00f1a", "LoginWithEmail-login": "Iniciar sesi\u00f3n", "LoginWithEmail-lostpassword": "\u00bfOlvidaste tu contrase\u00f1a?", "AccountFooter-title-register": "\u00bfA\u00fan no tienes cuenta en Platzi?", "AccountFooter-register": "Crear cuenta", "AccountFooter-login": "Inicia tu sesi\u00f3n", "AccountFooter-title-login ": "\u00bfYa tienes una cuenta?", "RegisterButton-email": "Reg\u00edstrate con tu Email", "LoginSocial-twitter-register": "Reg\u00edstrate con Twitter", "LoginSocial-facebook-register": " Reg\u00edstrate con Facebook", "LoginSocial-google-register": " Reg\u00edstrate con Google", "write_your_comment": "Escribe tu comentario", "question_send": "Tu pregunta fue enviada al ", "discussion_system": "sistema de discusiones", "ShareButtons_share": "Comparte en:", "unlogged_course_title": "Toma sin costo la primera clase del {title}", "ScrollModal_general_error": "Ha ocurrido un error, vuelve a intentarlo", "ScrollModal_email_error": "Este correo no es v\u00e1lido.", "ScrollModal_title": "D\u00e9janos tu correo electr\u00f3nico y recibe m\u00e1s contenido como este", "ScrollModal_placeholder": "Ingresa tu correo", "ScrollModal_cta": "Continuar"}; window.userId = 'None'; window.userEmail = ''; window.isOrganizer = false; window.isAuthor = false; window.isContribution = true; window.avatar = 'https://static.platzi.com/static/website/v2/images/avatar_default.7516253fc982.png'; window.userType = 'unlogged'; window.breadcrumb = [{"label": "Inicio", "url": "/"}, {"label": "Curso de PHP con Laravel 2017", "url": "/cursos/curso-php-laravel-2017/"}]; window.isBlog = false; window.isProject = false; window.projectCourse = false; window.isFavorite = ""; window.canFavorite = false window.features = {"favorites_enabled": true}; window.contentType = "contribution" window.objectData = {"objectId": 1927, "objectType": "contribution"}; window.comment = { list: window.firstComments, data: window.comments, likes: window.stars.comments, highlighted: null, pagination: { current: 1, total: Math.ceil(window.discussion.n_responses/100), }, }; window.testAb = 'a'; window.diplomado = { date: new Date('2017-06-16T09:00:00-05:00'), is_active: false, }; window.relatedCourse = {} window.relatedCategory = window.relatedPosts = [{"pk": 2276, "draft": false, "title": "Crea una API RESTful con Laravel y ll\u00e9vala a producci\u00f3n usando docker!", "created_at": "2018-05-12T22:56:38.950255Z", "slug": "crea-una-api-restful-con-laravel-y-llevala-a-produccion-usando-docker", "active": true, "type": "text", "subtype": "html", "content": "Laravel API Boilerplate Dockerized\n\nPuedes gestionar una API RestFull de la forma m\u00e1s r\u00e1pida, sencilla y con dependencias de c\u00f3digo open sou", "score": 8714, "course_id": 1122, "author_id": 31136, "cover_image": null, "og_image": null, "stars_count": 4, "responses_count": 0, "platzi_old_id": null, "related_course_id": null, "related_career_id": null, "related_learning_path_id": null, "pinned_post": false, "organization_id": null, "seo_title": "", "seo_description": "", "updated_at": "2018-09-03T19:04:33.453491Z", "category_id": null, "akismet_spam": false, "author_data": {"username": "jfernancordova", "avatar": "https://static.platzi.com/media/avatars/avatars/jfernancordova_92e2dee9-8489-4129-a8e8-ef0a65f00220.jpeg"}, "url": "/tutoriales/1122-curso-php-laravel-2017/2276-crea-una-api-restful-con-laravel-y-llevala-a-produccion-usando-docker/", "color": "#88d70b", "cover_thumbs": ""}, {"pk": 2005, "draft": false, "title": "Declaraciones de use en grupo (NAMESPACES)", "created_at": "2018-02-28T11:17:09.700806Z", "slug": "declaraciones-de-use-en-grupo-namespaces", "active": true, "type": "text", "subtype": "html", "content": "Anteriormente en varias clases del curso de php y laravel he visto el uso de la palabra use para importar clases de la siguiente manera:\n\n&l", "score": 8573, "course_id": 1122, "author_id": 386692, "cover_image": null, "og_image": null, "stars_count": 0, "responses_count": 0, "platzi_old_id": null, "related_course_id": null, "related_career_id": null, "related_learning_path_id": null, "pinned_post": false, "organization_id": null, "seo_title": "", "seo_description": "", "updated_at": "2018-02-28T11:17:09.710281Z", "category_id": null, "akismet_spam": false, "author_data": {"username": "Darwinrv94", "avatar": "https://static.platzi.com/media/avatars/Darwinrv94_18167502-2095-4783-aa6d-3236b3718419"}, "url": "/tutoriales/1122-curso-php-laravel-2017/2005-declaraciones-de-use-en-grupo-namespaces/", "color": "#88d70b", "cover_thumbs": ""}, {"pk": 1932, "draft": false, "title": "Selects Anidados con AJAX yJQuery", "created_at": "2018-02-10T22:28:02.231191Z", "slug": "selects-anidados-con-ajax-yjquery", "active": true, "type": "text", "subtype": "html", "content": "Hay Ocaciones en que tenemos inputs de tipo select con listas interminables de elementos y muchas veces no es necesario desplegar la lista c", "score": 8539, "course_id": 1122, "author_id": 433574, "cover_image": null, "og_image": null, "stars_count": 1, "responses_count": 8, "platzi_old_id": null, "related_course_id": null, "related_career_id": null, "related_learning_path_id": null, "pinned_post": false, "organization_id": null, "seo_title": "", "seo_description": "", "updated_at": "2022-11-08T21:37:53.421615Z", "category_id": null, "akismet_spam": false, "author_data": {"username": "alexisMoragaa", "avatar": "https://static.platzi.com/media/avatars/avatars/alexisMoragaa_a3eb6186-c323-4287-a879-e4f2c7ba910e.jpg"}, "url": "/tutoriales/1122-curso-php-laravel-2017/1932-selects-anidados-con-ajax-yjquery/", "color": "#88d70b", "cover_thumbs": ""}, {"pk": 1928, "draft": false, "title": "Conectar a n (varias) Bases de Datos con Laravel", "created_at": "2018-02-09T14:52:05.262919Z", "slug": "conectar-a-n-varias-bases-de-datos-con-laravel", "active": true, "type": "text", "subtype": "html", "content": "Hace d\u00edas me encontr\u00e9 con tremendo problema, quer\u00eda conectarme a apr\u00f3ximadamente 500 bases de datos (ese n\u00famero ir\u00e1 creciendo) por lo que me", "score": 8537, "course_id": 1122, "author_id": 386692, "cover_image": null, "og_image": null, "stars_count": 3, "responses_count": 3, "platzi_old_id": null, "related_course_id": null, "related_career_id": null, "related_learning_path_id": null, "pinned_post": false, "organization_id": null, "seo_title": "", "seo_description": "", "updated_at": "2022-09-01T17:46:09.116748Z", "category_id": null, "akismet_spam": false, "author_data": {"username": "Darwinrv94", "avatar": "https://static.platzi.com/media/avatars/Darwinrv94_18167502-2095-4783-aa6d-3236b3718419"}, "url": "/tutoriales/1122-curso-php-laravel-2017/1928-conectar-a-n-varias-bases-de-datos-con-laravel/", "color": "#88d70b", "cover_thumbs": ""}] window.projectsCategories = [ { title: 'Proyectos destacados', color: 'red', url: 'https:platzi.com', projects: [ { name: 'Platzi Music', url: 'http://platzi.com/hola', level: 'Avanzado', stars: 10, comments: 20, image: 'http://www.clubit.tv/wp-content/uploads/2017/08/pokemon.jpg', description: 'Aplicación construida en VueJS con la que puedes armar tus listas de reproducción y hacer búsquedas', author: { avatar: 'http://www.clubit.tv/wp-content/uploads/2017/08/pokemon.jpg', username: 'unmalnick' } }, { name: 'Platzi Music', url: 'http://platzi.com/hola', level: 'Avanzado', stars: 10, comments: 20, image: 'http://www.clubit.tv/wp-content/uploads/2017/08/pokemon.jpg', description: 'Aplicación construida en VueJS con la que puedes armar tus listas de reproducción y hacer búsquedas', author: { avatar: 'http://www.clubit.tv/wp-content/uploads/2017/08/pokemon.jpg', username: 'unmalnick' } }, { name: 'Platzi Music', url: 'http://platzi.com/hola', level: 'Avanzado', stars: 10, comments: 20, image: 'http://www.clubit.tv/wp-content/uploads/2017/08/pokemon.jpg', description: 'Aplicación construida en VueJS con la que puedes armar tus listas de reproducción y hacer búsquedas', author: { avatar: 'http://www.clubit.tv/wp-content/uploads/2017/08/pokemon.jpg', username: 'unmalnick' } }, { name: 'Platzi Music', url: 'http://platzi.com/hola', level: 'Avanzado', stars: 10, comments: 20, image: 'http://www.clubit.tv/wp-content/uploads/2017/08/pokemon.jpg', description: 'Aplicación construida en VueJS con la que puedes armar tus listas de reproducción y hacer búsquedas', author: { avatar: 'http://www.clubit.tv/wp-content/uploads/2017/08/pokemon.jpg', username: 'unmalnick' } }, ] } ] window.currency = { flag: '', price: '', fullPrice: '', } window.preConfDate = new Date('') window.conf = { confEnd: new Date('2018-05-06T09:00:00-05:00'), isConfActive: false , }; window.limitDate = new Date(''); window.limitedPromo = { name: '', token: '', }; window.endBarDate = new Date('2018-09-27T16:00:00-04:56'); window.barState = ''; window.contactInfo = { hasSubscription: false, isAuthenticated: false, country: "united-states", flag: "https://static.platzi.com/static/images/languajes/united-states.jpg", isOrganizer: false, lang: "es", i18n: {'contactus_title': '¿Tienes dudas o quieres comunicarte con nosotros?', 'contactus_subtitle': 'Elige el medio que más te convenga, te sugerimos ', 'write': 'Escríbenos', 'dm': 'Mensaje Directo', 'telephone': 'Teléfono', 'acceptTerms': 'Nunca pares de aprender sobre la seguridad de tus datos', 'agree': 'Aquí puedes ver nuestros {terms} y actualizaciones de nuestras {privacy}', 'terms': 'Términos de Uso', 'privacy': 'políticas de privacidad', 'accept': 'Términos de Uso', 'planExpert': 'Plan Expert', 'planExpertText': 'Desarrolla tus habilidades en programación, diseño, producción audiovisual, marketing y muchas más. Mide tu progreso y recibe certificados con tu nombre a finalizar cada curso.'}, enabled: true, accepted_gdpr: false, userId: '0', organizationId: '1', faq: [{'title': 'Quiero contactar directamente a Platzi', 'cta': 'https://platzi.com/faq/#contacto'}, {'title': '¿Cómo funcionan los cursos? ¿Debo seguir un horario?', 'cta': 'https://platzi.com/faq/#como-funcionan-cursos'}, {'title': '¿Qué necesito para tomar los cursos?', 'cta': 'https://platzi.com/faq/#que-necesito'}, {'title': '¿Qué medios de pago aceptan?', 'cta': 'https://platzi.com/faq/#medios-pago'}, {'title': 'Contactarme por mail', 'cta': 'mailto:[email protected]'}], faq_title: '¿Tienes alguna duda o quieres comunicarte con nosotros?', }