{"id":164,"date":"2015-12-03T22:11:23","date_gmt":"2015-12-03T22:11:23","guid":{"rendered":"http:\/\/blazingspider.com\/wp-demo\/?p=164"},"modified":"2016-09-01T21:50:33","modified_gmt":"2016-09-01T21:50:33","slug":"chartjs-two-doughnut","status":"publish","type":"post","link":"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/","title":{"rendered":"Chart.js Sample: Two Doughnut Charts"},"content":{"rendered":"<p>After updating the <em>Blazing Charts<\/em> plugin with the latest version of Chart.js, 2.2.2, I had to update these snippets. This is because everything is changed with that charting library.<br \/>\nIf you are going to use the new version of Chart.js, be prepared to rewrite your scripts.<\/p>\n<p>To draw two or more charts in one page, we have to consider a few points:<\/p>\n<ul>\n<li>Javascript window.onload can be used only once. So if you want to run the scripts inside this function, you can collect all the scripts in one &#8220;chart snippet&#8221; and run it inside that function. Then introduce the chart divs for those charts in other chart snippets, and place it whenever the chart should goes.<\/li>\n<li>Or you can use jQuery(document).ready(function() {&#8230;}); for each snippet<\/li>\n<li>All the chart snippets will be included in one page. So if you repeat the same variable name in another snippet, it will override the last value you assigned to it. I recommend to use unique variable names in each snippet.<\/li>\n<li>DIV id that you introduce to each script to draw a chart on, should be unique.<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<div id=\"canvas-holder-2\" style=\"width:30%; direction:ltr; margin-left:auto; margin-right:auto; display:table;\">\r\n   <canvas id=\"chart-area\" width=\"250\" height=\"250\"\/>\r\n<\/div>\r\n<script>\r\nvar doughnutData = {\r\n    labels: [\r\n        \"DM orange\",\r\n        \"DM rosa\",\r\n        \"DM lilla\",\r\n        \"DM gron\",\r\n        \"DM turkis\"\r\n    ],\r\n    datasets: [\r\n        {\r\n            data: [43667, 453, 80924, 896, 88],\r\n            backgroundColor: [\r\n                \"#ec8316\",\r\n                \"#AF23A5\",\r\n                \"#66008C\",\r\n                \"#568E14\",\r\n                \"#00829B\"\r\n            ],\r\n            hoverBackgroundColor: [\r\n                \"#ff8300\",\r\n                \"#9d3292\",\r\n                \"#522e91\",\r\n                \"#5d9632\",\r\n                \"#0083a8\"\r\n            ]\r\n        }]\r\n};\r\n\r\njQuery(document).ready(function() {\r\n    var ctx = document.getElementById(\"chart-area\").getContext(\"2d\");\r\n\r\n    window.myDoughnutChart = new Chart(ctx, {\r\n        type: 'doughnut',\r\n        data: doughnutData,\r\n        options: {\r\n            responsive: true,\r\n            elements: {\r\n                arc: {\r\n                    borderColor: \"#000000\"\r\n                }\r\n            },\r\n            cutoutPercentage: 50\r\n        },\r\n        animation:{\r\n            animateScale: true\r\n        }\r\n    });\r\n});\r\n<\/script>\n<p>and another doughnut chart:<\/p>\n<p><div id=\"canvas-holder-1\" style=\"width:30%; direction:ltr; margin-left:auto; margin-right:auto; display:table;\">\r\n   <canvas id=\"chart-area2\" width=\"250\" height=\"250\"\/>\r\n<\/div>\r\n<script>\r\nvar doughnutData1 = {\r\n    labels: [\r\n        \"orange\",\r\n        \"rosa\",\r\n        \"lilla\",\r\n        \"gron\",\r\n        \"turkis\"\r\n    ],\r\n    datasets: [\r\n        {\r\n            data: [10913, 2693, 4104, 26832, 21443],\r\n            backgroundColor: [\r\n                \"#ec8316\",\r\n                \"#AF23A5\",\r\n                \"#66008C\",\r\n                \"#568E14\",\r\n                \"#00829B\"\r\n            ],\r\n            hoverBackgroundColor: [\r\n                \"#ff8300\",\r\n                \"#9d3292\",\r\n                \"#522e91\",\r\n                \"#5d9632\",\r\n                \"#0083a8\"\r\n            ]\r\n        }]\r\n};\r\n\r\njQuery(document).ready(function() {\r\nvar ctx1 = document.getElementById(\"chart-area2\").getContext(\"2d\");\r\n\r\n    window.myDoughnutChart2 = new Chart(ctx1, {\r\n        type: 'doughnut',\r\n        data: doughnutData1,\r\n        options: {\r\n            responsive: true,\r\n            elements: {\r\n                arc: {\r\n                    borderColor: \"#333\"\r\n                }\r\n            },\r\n            cutoutPercentage: 50\r\n        },\r\n        animation:{\r\n            animateScale: true\r\n        }\r\n    });\r\n});\r\n<\/script><br \/>\n&nbsp;<\/p>\n<p>Here is the code used to draw the first chart:<\/p>\n<pre lang=\"html\" toggle=\"no\">\r\n&lt;div id=\"canvas-holder-2\" style=\"width:30%; direction:ltr; margin-left:auto; margin-right:auto; display:table;\"&gt;\r\n   &lt;canvas id=\"chart-area\" width=\"250\" height=\"250\"\/&gt;\r\n&lt;\/div&gt;\r\n&lt;script&gt;\r\nvar doughnutData = {\r\n    labels: [\r\n        \"DM orange\",\r\n        \"DM rosa\",\r\n        \"DM lilla\",\r\n        \"DM gron\",\r\n        \"DM turkis\"\r\n    ],\r\n    datasets: [\r\n        {\r\n            data: [43667, 453, 80924, 896, 88],\r\n            backgroundColor: [\r\n                \"#ec8316\",\r\n                \"#AF23A5\",\r\n                \"#66008C\",\r\n                \"#568E14\",\r\n                \"#00829B\"\r\n            ],\r\n            hoverBackgroundColor: [\r\n                \"#ff8300\",\r\n                \"#9d3292\",\r\n                \"#522e91\",\r\n                \"#5d9632\",\r\n                \"#0083a8\"\r\n            ]\r\n        }]\r\n};\r\n\r\njQuery(document).ready(function() {\r\n    var ctx = document.getElementById(\"chart-area\").getContext(\"2d\");\r\n\r\n    window.myDoughnutChart = new Chart(ctx, {\r\n        type: 'doughnut',\r\n        data: doughnutData,\r\n        options: {\r\n            responsive: true,\r\n            elements: {\r\n                arc: {\r\n                    borderColor: \"#000000\"\r\n                }\r\n            },\r\n            cutoutPercentage: 50\r\n        },\r\n        animation:{\r\n            animateScale: true\r\n        }\r\n    });\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>and the next chart:<\/p>\n<pre lang=\"html\" toggle=\"no\">\r\n\r\n&lt;div id=\"canvas-holder-1\" style=\"width:30%; direction:ltr; margin-left:auto; margin-right:auto; display:table;\"&gt;\r\n   &lt;canvas id=\"chart-area2\" width=\"250\" height=\"250\"\/&gt;\r\n&lt;\/div&gt;\r\n&lt;script&gt;\r\nvar doughnutData1 = {\r\n    labels: [\r\n        \"orange\",\r\n        \"rosa\",\r\n        \"lilla\",\r\n        \"gron\",\r\n        \"turkis\"\r\n    ],\r\n    datasets: [\r\n        {\r\n            data: [10913, 2693, 4104, 26832, 21443],\r\n            backgroundColor: [\r\n                \"#ec8316\",\r\n                \"#AF23A5\",\r\n                \"#66008C\",\r\n                \"#568E14\",\r\n                \"#00829B\"\r\n            ],\r\n            hoverBackgroundColor: [\r\n                \"#ff8300\",\r\n                \"#9d3292\",\r\n                \"#522e91\",\r\n                \"#5d9632\",\r\n                \"#0083a8\"\r\n            ]\r\n        }]\r\n};\r\n\r\njQuery(document).ready(function() {\r\nvar ctx1 = document.getElementById(\"chart-area2\").getContext(\"2d\");\r\n\r\n    window.myDoughnutChart2 = new Chart(ctx1, {\r\n        type: 'doughnut',\r\n        data: doughnutData1,\r\n        options: {\r\n            responsive: true,\r\n            elements: {\r\n                arc: {\r\n                    borderColor: \"#333\"\r\n                }\r\n            },\r\n            cutoutPercentage: 50\r\n        },\r\n        animation:{\r\n            animateScale: true\r\n        }\r\n    });\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>After updating the Blazing Charts plugin with the latest version of Chart.js, 2.2.2, I had to update these snippets. This is because everything is changed with that charting library. If you are going to use the new version of Chart.js, be prepared to rewrite your scripts. To draw two or more charts in one page, &hellip; <a href=\"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Chart.js Sample: Two Doughnut Charts<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-164","post","type-post","status-publish","format-standard","hentry","category-chart-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Chart.js Sample: Two Doughnut Charts - WordPress Demo<\/title>\n<meta name=\"description\" content=\"to draw several chart.js charts in one page, there are a few points to consider\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chart.js Sample: Two Doughnut Charts - WordPress Demo\" \/>\n<meta property=\"og:description\" content=\"to draw several chart.js charts in one page, there are a few points to consider\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/\" \/>\n<meta property=\"og:site_name\" content=\"WordPress Demo\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/blazingspider\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-03T22:11:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-09-01T21:50:33+00:00\" \/>\n<meta name=\"author\" content=\"massoud Shakeri\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BlazingSpider\" \/>\n<meta name=\"twitter:site\" content=\"@BlazingSpider\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"massoud Shakeri\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/\",\"url\":\"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/\",\"name\":\"Chart.js Sample: Two Doughnut Charts - WordPress Demo\",\"isPartOf\":{\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/#website\"},\"datePublished\":\"2015-12-03T22:11:23+00:00\",\"dateModified\":\"2016-09-01T21:50:33+00:00\",\"author\":{\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/#\/schema\/person\/78f615e83cf347ec4b200f825ba2fecd\"},\"description\":\"to draw several chart.js charts in one page, there are a few points to consider\",\"breadcrumb\":{\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blazingspider.com\/wp-demo\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chart.js Sample: Two Doughnut Charts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/#website\",\"url\":\"https:\/\/blazingspider.com\/wp-demo\/\",\"name\":\"WordPress Demo\",\"description\":\"Blazing Spider WordPress Demo\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blazingspider.com\/wp-demo\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/#\/schema\/person\/78f615e83cf347ec4b200f825ba2fecd\",\"name\":\"massoud Shakeri\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3f3d05ee01040cb3ff9bd45b9a45027330209a9a0807f4ad9b195ec7f678f333?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3f3d05ee01040cb3ff9bd45b9a45027330209a9a0807f4ad9b195ec7f678f333?s=96&d=mm&r=g\",\"caption\":\"massoud Shakeri\"},\"sameAs\":[\"http:\/\/blazingspider.com\"],\"url\":\"https:\/\/blazingspider.com\/wp-demo\/author\/massoudshakeri\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Chart.js Sample: Two Doughnut Charts - WordPress Demo","description":"to draw several chart.js charts in one page, there are a few points to consider","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/","og_locale":"en_US","og_type":"article","og_title":"Chart.js Sample: Two Doughnut Charts - WordPress Demo","og_description":"to draw several chart.js charts in one page, there are a few points to consider","og_url":"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/","og_site_name":"WordPress Demo","article_publisher":"https:\/\/www.facebook.com\/blazingspider","article_published_time":"2015-12-03T22:11:23+00:00","article_modified_time":"2016-09-01T21:50:33+00:00","author":"massoud Shakeri","twitter_card":"summary_large_image","twitter_creator":"@BlazingSpider","twitter_site":"@BlazingSpider","twitter_misc":{"Written by":"massoud Shakeri","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/","url":"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/","name":"Chart.js Sample: Two Doughnut Charts - WordPress Demo","isPartOf":{"@id":"https:\/\/blazingspider.com\/wp-demo\/#website"},"datePublished":"2015-12-03T22:11:23+00:00","dateModified":"2016-09-01T21:50:33+00:00","author":{"@id":"https:\/\/blazingspider.com\/wp-demo\/#\/schema\/person\/78f615e83cf347ec4b200f825ba2fecd"},"description":"to draw several chart.js charts in one page, there are a few points to consider","breadcrumb":{"@id":"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blazingspider.com\/wp-demo\/164\/chartjs-two-doughnut\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blazingspider.com\/wp-demo\/"},{"@type":"ListItem","position":2,"name":"Chart.js Sample: Two Doughnut Charts"}]},{"@type":"WebSite","@id":"https:\/\/blazingspider.com\/wp-demo\/#website","url":"https:\/\/blazingspider.com\/wp-demo\/","name":"WordPress Demo","description":"Blazing Spider WordPress Demo","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blazingspider.com\/wp-demo\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blazingspider.com\/wp-demo\/#\/schema\/person\/78f615e83cf347ec4b200f825ba2fecd","name":"massoud Shakeri","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blazingspider.com\/wp-demo\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3f3d05ee01040cb3ff9bd45b9a45027330209a9a0807f4ad9b195ec7f678f333?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3f3d05ee01040cb3ff9bd45b9a45027330209a9a0807f4ad9b195ec7f678f333?s=96&d=mm&r=g","caption":"massoud Shakeri"},"sameAs":["http:\/\/blazingspider.com"],"url":"https:\/\/blazingspider.com\/wp-demo\/author\/massoudshakeri\/"}]}},"_links":{"self":[{"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/posts\/164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/comments?post=164"}],"version-history":[{"count":5,"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/posts\/164\/revisions"}],"predecessor-version":[{"id":185,"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/posts\/164\/revisions\/185"}],"wp:attachment":[{"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/media?parent=164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/categories?post=164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/tags?post=164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}