{"id":6785,"date":"2016-06-25T09:27:31","date_gmt":"2016-06-25T09:27:31","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6785"},"modified":"2019-04-08T10:19:16","modified_gmt":"2019-04-08T10:19:16","slug":"chartjs","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/","title":{"rendered":"ChartJS"},"content":{"rendered":"

Chart JS es un plugin JavaScript simple, <\/span>flexible y muy completo para los dise\u00f1adores gr\u00e1ficos<\/span> y desarrolladores que desean incrustar gr\u00e1ficas en las p\u00e1ginas Web.
\n<\/span><\/span><\/p>\n

Es una de las formas m\u00e1s elegantes que conozco hasta la fecha de incorporar este tipo de elementos gr\u00e1ficos.<\/p>\n

No requiere jQuery. Para instalar en tu p\u00e1gina Web tan solo es necesario incluir el plugin en la cabecera de tu p\u00e1gina. Por ejemplo:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<script<\/span><\/a> src<\/span>=<\/span>"js\/Chart.bundle.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
En el <body> utilizar un objeto <canvas> con un identificador. Por ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<canvas id<\/span>=<\/span>"line_chart"<\/span>><\/<\/span>canvas><\/span><\/pre><\/div><\/div>\n
Y finalmente despu\u00e9s de la etiqueta de cierre del <\/body> a\u00f1adimos la llamada al plugin para el elemento canvas, como por ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>script><\/span>\nvar<\/span> div_line_chart =<\/span> document.getElementById<\/span>(<\/span>"line_chart"<\/span>)<\/span>;<\/span>\nvar<\/span> myLineChart =<\/span> new<\/span> Chart(<\/span>div_line_chart,<\/span> {<\/span>\n    type:<\/span> 'line'<\/span>,<\/span>\n    data:<\/span> {<\/span>\n        labels:<\/span> [<\/span>"Ene"<\/span>,<\/span> "Feb"<\/span>,<\/span> "Mar"<\/span>,<\/span> "Abr"<\/span>,<\/span> "May"<\/span>,<\/span> "Jun"<\/span>,<\/span> "Jul"<\/span>]<\/span>,<\/span>\n        datasets:<\/span> [<\/span>\n            {<\/span>\n                label:<\/span> "Ingreso"<\/span>,<\/span>\n                fill:<\/span> false<\/span>,<\/span>\n                lineTension:<\/span> 0.1<\/span>,<\/span>\n                backgroundColor:<\/span> "#428bca"<\/span>,<\/span>\n                borderColor:<\/span> "#357ebd"<\/span>,<\/span>\n                borderCapStyle:<\/span> 'butt'<\/span>,<\/span>\n                borderDash:<\/span> [<\/span>]<\/span>,<\/span>\n                borderDashOffset:<\/span> 0.0<\/span>,<\/span>\n                borderJoinStyle:<\/span> 'miter'<\/span>,<\/span>\n                pointBorderColor:<\/span> "#3276B1"<\/span>,<\/span>\n                pointBackgroundColor:<\/span> "#3276B1"<\/span>,<\/span>\n                pointBorderWidth:<\/span> 1<\/span>,<\/span>\n                pointHoverRadius:<\/span> 5<\/span>,<\/span>\n                pointHoverBackgroundColor:<\/span> "#3276B1"<\/span>,<\/span>\n                pointHoverBorderColor:<\/span> "#3276B1"<\/span>,<\/span>\n                pointHoverBorderWidth:<\/span> 2,<\/span>\n                pointRadius:<\/span> 1,<\/span>\n                pointHitRadius:<\/span> 10,<\/span>\n                data:<\/span> [<\/span>65,<\/span> 59,<\/span> 80,<\/span> 81,<\/span> 56,<\/span> 55,<\/span> 40]<\/span>,<\/span>\n            }<\/span>\n        ]<\/span>\n    }<\/span>,<\/span>\n    options:<\/span> {<\/span>\n        responsive:<\/span> true<\/span>,<\/span>\n        maintainAspectRatio:<\/span> true<\/span>,<\/span>\n    }<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
Obteniendo como resultado:<\/p>\n
\"line_chart\"<\/a><\/p>\n
El plugin dispone de muchos par\u00e1metros y opciones para poder ser configurado. Eso lo puedes revisar en la documentaci\u00f3n de ChartJS<\/a>.<\/p>\n
En el ejemplo en funcionamiento podemos 2 tipos de gr\u00e1ficas que hemos implementado. La gr\u00e1fica lineal y la de barras. Las gr\u00e1ficas m\u00e1s utilizadas para representar datos estad\u00edsticos.<\/p>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n
Ver la documentaci\u00f3n del plugin<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Chart JS es un plugin JavaScript simple, flexible y muy completo para los dise\u00f1adores gr\u00e1ficos y desarrolladores que desean incrustar gr\u00e1ficas en las p\u00e1ginas Web. Es una de las formas m\u00e1s elegantes que conozco hasta la fecha de incorporar este tipo de elementos gr\u00e1ficos. No requiere jQuery. Para instalar en tu p\u00e1gina Web tan solo […]<\/p>\n","protected":false},"author":1,"featured_media":6788,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[101],"class_list":["post-6785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-graficas"],"yoast_head":"\nChartJS - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"ChartJS es un plugin JavaScript simple, flexible y muy completo para incrustar gr\u00e1ficas en las p\u00e1ginas Web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ChartJS - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"ChartJS es un plugin JavaScript simple, flexible y muy completo para incrustar gr\u00e1ficas en las p\u00e1ginas Web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-25T09:27:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-08T10:19:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/chartjs.png\" \/>\n\t<meta property=\"og:image:width\" content=\"271\" \/>\n\t<meta property=\"og:image:height\" content=\"279\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/\",\"name\":\"ChartJS - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/chartjs.png\",\"datePublished\":\"2016-06-25T09:27:31+00:00\",\"dateModified\":\"2019-04-08T10:19:16+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"ChartJS es un plugin JavaScript simple, flexible y muy completo para incrustar gr\u00e1ficas en las p\u00e1ginas Web.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/chartjs.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/chartjs.png\",\"width\":271,\"height\":279},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ChartJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ChartJS - Jose Aguilar Blog","description":"ChartJS es un plugin JavaScript simple, flexible y muy completo para incrustar gr\u00e1ficas en las p\u00e1ginas Web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"ChartJS - Jose Aguilar Blog","og_description":"ChartJS es un plugin JavaScript simple, flexible y muy completo para incrustar gr\u00e1ficas en las p\u00e1ginas Web.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2016-06-25T09:27:31+00:00","article_modified_time":"2019-04-08T10:19:16+00:00","og_image":[{"width":271,"height":279,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/chartjs.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/","url":"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/","name":"ChartJS - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/chartjs.png","datePublished":"2016-06-25T09:27:31+00:00","dateModified":"2019-04-08T10:19:16+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"ChartJS es un plugin JavaScript simple, flexible y muy completo para incrustar gr\u00e1ficas en las p\u00e1ginas Web.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/chartjs\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/chartjs.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/chartjs.png","width":271,"height":279},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/chartjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"ChartJS"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6785"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6785\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6788"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}