{"id":15083,"date":"2014-06-10T10:46:19","date_gmt":"2014-06-10T10:46:19","guid":{"rendered":"https:\/\/demo.qodeinteractive.com\/hazel\/?page_id=15083"},"modified":"2014-07-01T11:48:31","modified_gmt":"2014-07-01T11:48:31","slug":"doughnut-pie-charts","status":"publish","type":"page","link":"https:\/\/demo.qodeinteractive.com\/hazel\/doughnut-pie-charts\/","title":{"rendered":"Doughnut Pie Charts"},"content":{"rendered":"<p>[vc_row row_type=&#8221;row&#8221; type=&#8221;full_width&#8221; icon_pack=&#8221;font_awesome&#8221; content_menu_fe_icon=&#8221;arrow_back&#8221; text_align=&#8221;left&#8221; padding_top=&#8221;85&#8243; padding_bottom=&#8221;105&#8243; background_color=&#8221;#ffffff&#8221;][vc_column width=&#8221;1\/1&#8243;]<div class=\"custom_font_holder\" style=\" font-size: 32px; line-height: 27px; font-style: normal; font-weight: 300; color: #696969; text-decoration: none; padding: 0; margin: 0; text-align: center;\"><\/p>\n<h3>Shaped Like a Doughnut<\/h3>\n<p><\/div>[vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;25&#8243; down=&#8221;0&#8243;][vc_column_text]<\/p>\n<h4 style=\"text-align: center;\">Carefully crafted elements come together into one amazing design.<\/h4>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_type=&#8221;row&#8221; type=&#8221;full_width&#8221; icon_pack=&#8221;font_awesome&#8221; content_menu_fe_icon=&#8221;arrow_back&#8221; text_align=&#8221;left&#8221; padding_bottom=&#8221;83&#8243;][vc_column width=&#8221;1\/1&#8243;][vc_row_inner row_type=&#8221;row&#8221; type=&#8221;grid&#8221; text_align=&#8221;left&#8221;][vc_column_inner width=&#8221;1\/3&#8243;]<div class='q_pie_graf_holder'><div class='q_pie_graf'><canvas id='pie8255' height='175' width='175'><\/canvas><\/div><div class='q_pie_graf_legend'><ul><li><div class='color_holder' style='background-color: #ecae80;'><\/div><p style='color: ;'>Legend One<\/p><\/li><li><div class='color_holder' style='background-color: #ffbe8d;'><\/div><p style='color: ;'>Legend Two<\/p><\/li><li><div class='color_holder' style='background-color: #f6f6f6;'><\/div><p style='color: ;'>Legend Three<\/p><\/li><\/ul><\/div><\/div><script>var pie8255 = [{value: 15,color:'#ecae80'},{value: 35,color:'#ffbe8d'},{value: 50,color:'#f6f6f6'}];\n\t\tvar $j = jQuery.noConflict();\n\t\t$j(document).ready(function() {\n\t\t\tif($j('.touch .no_delay').length){\n\t\t\t\tnew Chart(document.getElementById('pie8255').getContext('2d')).Doughnut(pie8255,{segmentStrokeColor : 'transparent',});\n\t\t\t}else{\n\t\t\t\t$j('#pie8255').appear(function() {\n\t\t\t\t\tnew Chart(document.getElementById('pie8255').getContext('2d')).Doughnut(pie8255,{segmentStrokeColor : 'transparent',});\n\t\t\t\t},{accX: 0, accY: -200});\n\t\t\t}\t\t\t\t\t\t\t\n\t\t});\n\t<\/script>[vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;80&#8243; down=&#8221;0&#8243;]<div class=\"custom_font_holder\" style=\" font-size: 18px; line-height: 25px; font-style: normal; font-weight: 300; color: #696969; text-decoration: none; padding: 0; margin: 0; text-align: left;\"><\/p>\n<h5>Creative Ideas<\/h5>\n<p><\/div>[vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;20&#8243; down=&#8221;0&#8243;][vc_column_text]<span style=\"color: #9d9d9d;\">Ut wisi enim ad minim veniam,<\/span><\/p>\n<p><span style=\"color: #9d9d9d;\">quis nos trud exerci tation ullamcorper.<\/span>[\/vc_column_text][vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;20&#8243; down=&#8221;0&#8243;][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;]<div class='q_pie_graf_holder'><div class='q_pie_graf'><canvas id='pie4794' height='175' width='175'><\/canvas><\/div><div class='q_pie_graf_legend'><ul><li><div class='color_holder' style='background-color: #ecae80;'><\/div><p style='color: ;'>Legend One<\/p><\/li><li><div class='color_holder' style='background-color: #ffbe8d;'><\/div><p style='color: ;'>Legend Two<\/p><\/li><li><div class='color_holder' style='background-color: #f6f6f6;'><\/div><p style='color: ;'>Legend Three<\/p><\/li><\/ul><\/div><\/div><script>var pie4794 = [{value: 35,color:'#ecae80'},{value: 50,color:'#ffbe8d'},{value: 15,color:'#f6f6f6'}];\n\t\tvar $j = jQuery.noConflict();\n\t\t$j(document).ready(function() {\n\t\t\tif($j('.touch .no_delay').length){\n\t\t\t\tnew Chart(document.getElementById('pie4794').getContext('2d')).Doughnut(pie4794,{segmentStrokeColor : 'transparent',});\n\t\t\t}else{\n\t\t\t\t$j('#pie4794').appear(function() {\n\t\t\t\t\tnew Chart(document.getElementById('pie4794').getContext('2d')).Doughnut(pie4794,{segmentStrokeColor : 'transparent',});\n\t\t\t\t},{accX: 0, accY: -200});\n\t\t\t}\t\t\t\t\t\t\t\n\t\t});\n\t<\/script>[vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;80&#8243; down=&#8221;0&#8243;]<div class=\"custom_font_holder\" style=\" font-size: 18px; line-height: 25px; font-style: normal; font-weight: 300; color: #696969; text-decoration: none; padding: 0; margin: 0; text-align: left;\"><\/p>\n<h5>Projects<\/h5>\n<p><\/div>[vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;20&#8243; down=&#8221;0&#8243;][vc_column_text]<span style=\"color: #9d9d9d;\">Ut wisi enim ad minim veniam,<\/span><\/p>\n<p><span style=\"color: #9d9d9d;\">quis nos trud exerci tation ullamcorper.<\/span>[\/vc_column_text][vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;20&#8243; down=&#8221;0&#8243;][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;]<div class='q_pie_graf_holder'><div class='q_pie_graf'><canvas id='pie4044' height='175' width='175'><\/canvas><\/div><div class='q_pie_graf_legend'><ul><li><div class='color_holder' style='background-color: #ecae80;'><\/div><p style='color: ;'>Legend One<\/p><\/li><li><div class='color_holder' style='background-color: #ffbe8d;'><\/div><p style='color: ;'>Legend Two<\/p><\/li><li><div class='color_holder' style='background-color: #f6f6f6;'><\/div><p style='color: ;'>Legend Three<\/p><\/li><\/ul><\/div><\/div><script>var pie4044 = [{value: 50,color:'#ecae80'},{value: 15,color:'#ffbe8d'},{value: 35,color:'#f6f6f6'}];\n\t\tvar $j = jQuery.noConflict();\n\t\t$j(document).ready(function() {\n\t\t\tif($j('.touch .no_delay').length){\n\t\t\t\tnew Chart(document.getElementById('pie4044').getContext('2d')).Doughnut(pie4044,{segmentStrokeColor : 'transparent',});\n\t\t\t}else{\n\t\t\t\t$j('#pie4044').appear(function() {\n\t\t\t\t\tnew Chart(document.getElementById('pie4044').getContext('2d')).Doughnut(pie4044,{segmentStrokeColor : 'transparent',});\n\t\t\t\t},{accX: 0, accY: -200});\n\t\t\t}\t\t\t\t\t\t\t\n\t\t});\n\t<\/script>[vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;80&#8243; down=&#8221;0&#8243;]<div class=\"custom_font_holder\" style=\" font-size: 18px; line-height: 25px; font-style: normal; font-weight: 300; color: #696969; text-decoration: none; padding: 0; margin: 0; text-align: left;\"><\/p>\n<h5>Customer Support<\/h5>\n<p><\/div>[vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;20&#8243; down=&#8221;0&#8243;][vc_column_text]<span style=\"color: #9d9d9d;\">Ut wisi enim ad minim veniam,<\/span><\/p>\n<p><span style=\"color: #9d9d9d;\">quis nos trud exerci tation ullamcorper.<\/span>[\/vc_column_text][vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;20&#8243; down=&#8221;0&#8243;][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row row_type=&#8221;row&#8221; type=&#8221;full_width&#8221; icon_pack=&#8221;font_awesome&#8221; content_menu_fe_icon=&#8221;arrow_back&#8221; text_align=&#8221;left&#8221; background_image=&#8221;15436&#8243; pattern_background=&#8221;pattern_background&#8221; padding_top=&#8221;103&#8243; padding_bottom=&#8221;83&#8243;][vc_column width=&#8221;1\/1&#8243;][vc_row_inner row_type=&#8221;row&#8221; type=&#8221;grid&#8221; text_align=&#8221;left&#8221;][vc_column_inner width=&#8221;1\/3&#8243;]<div class='q_pie_graf_holder'><div class='q_pie_graf'><canvas id='pie8512' height='175' width='175'><\/canvas><\/div><div class='q_pie_graf_legend'><ul><li><div class='color_holder' style='background-color: #ecae80;'><\/div><p style='color: ;'>Legend One<\/p><\/li><li><div class='color_holder' style='background-color: #ffbe8d;'><\/div><p style='color: ;'>Legend Two<\/p><\/li><li><div class='color_holder' style='background-color: #f6f6f6;'><\/div><p style='color: ;'>Legend Three<\/p><\/li><\/ul><\/div><\/div><script>var pie8512 = [{value: 15,color:'#ecae80'},{value: 35,color:'#ffbe8d'},{value: 50,color:'#f6f6f6'}];\n\t\tvar $j = jQuery.noConflict();\n\t\t$j(document).ready(function() {\n\t\t\tif($j('.touch .no_delay').length){\n\t\t\t\tnew Chart(document.getElementById('pie8512').getContext('2d')).Doughnut(pie8512,{segmentStrokeColor : 'transparent',});\n\t\t\t}else{\n\t\t\t\t$j('#pie8512').appear(function() {\n\t\t\t\t\tnew Chart(document.getElementById('pie8512').getContext('2d')).Doughnut(pie8512,{segmentStrokeColor : 'transparent',});\n\t\t\t\t},{accX: 0, accY: -200});\n\t\t\t}\t\t\t\t\t\t\t\n\t\t});\n\t<\/script>[vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;80&#8243; down=&#8221;0&#8243;]<div class=\"custom_font_holder\" style=\" font-size: 18px; line-height: 25px; font-style: normal; font-weight: 300; color: #696969; text-decoration: none; padding: 0; margin: 0; text-align: left;\"><\/p>\n<h5>Creative Ideas<\/h5>\n<p><\/div>[vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;20&#8243; down=&#8221;0&#8243;][vc_column_text]<span style=\"color: #9d9d9d;\">Ut wisi enim ad minim veniam,<\/span><\/p>\n<p><span style=\"color: #9d9d9d;\">quis nos trud exerci tation ullamcorper.<\/span>[\/vc_column_text][vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;20&#8243; down=&#8221;0&#8243;][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;]<div class='q_pie_graf_holder'><div class='q_pie_graf'><canvas id='pie6643' height='175' width='175'><\/canvas><\/div><div class='q_pie_graf_legend'><ul><li><div class='color_holder' style='background-color: #ecae80;'><\/div><p style='color: ;'>Legend One<\/p><\/li><li><div class='color_holder' style='background-color: #ffbe8d;'><\/div><p style='color: ;'>Legend Two<\/p><\/li><li><div class='color_holder' style='background-color: #f6f6f6;'><\/div><p style='color: ;'>Legend Three<\/p><\/li><\/ul><\/div><\/div><script>var pie6643 = [{value: 35,color:'#ecae80'},{value: 50,color:'#ffbe8d'},{value: 15,color:'#f6f6f6'}];\n\t\tvar $j = jQuery.noConflict();\n\t\t$j(document).ready(function() {\n\t\t\tif($j('.touch .no_delay').length){\n\t\t\t\tnew Chart(document.getElementById('pie6643').getContext('2d')).Doughnut(pie6643,{segmentStrokeColor : 'transparent',});\n\t\t\t}else{\n\t\t\t\t$j('#pie6643').appear(function() {\n\t\t\t\t\tnew Chart(document.getElementById('pie6643').getContext('2d')).Doughnut(pie6643,{segmentStrokeColor : 'transparent',});\n\t\t\t\t},{accX: 0, accY: -200});\n\t\t\t}\t\t\t\t\t\t\t\n\t\t});\n\t<\/script>[vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;80&#8243; down=&#8221;0&#8243;]<div class=\"custom_font_holder\" style=\" font-size: 18px; line-height: 25px; font-style: normal; font-weight: 300; color: #696969; text-decoration: none; padding: 0; margin: 0; text-align: left;\"><\/p>\n<h5>Projects<\/h5>\n<p><\/div>[vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;20&#8243; down=&#8221;0&#8243;][vc_column_text]<span style=\"color: #9d9d9d;\">Ut wisi enim ad minim veniam,<\/span><\/p>\n<p><span style=\"color: #9d9d9d;\">quis nos trud exerci tation ullamcorper.<\/span>[\/vc_column_text][vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;20&#8243; down=&#8221;0&#8243;][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;]<div class='q_pie_graf_holder'><div class='q_pie_graf'><canvas id='pie5638' height='175' width='175'><\/canvas><\/div><div class='q_pie_graf_legend'><ul><li><div class='color_holder' style='background-color: #ecae80;'><\/div><p style='color: ;'>Legend One<\/p><\/li><li><div class='color_holder' style='background-color: #ffbe8d;'><\/div><p style='color: ;'>Legend Two<\/p><\/li><li><div class='color_holder' style='background-color: #f6f6f6;'><\/div><p style='color: ;'>Legend Three<\/p><\/li><\/ul><\/div><\/div><script>var pie5638 = [{value: 50,color:'#ecae80'},{value: 15,color:'#ffbe8d'},{value: 35,color:'#f6f6f6'}];\n\t\tvar $j = jQuery.noConflict();\n\t\t$j(document).ready(function() {\n\t\t\tif($j('.touch .no_delay').length){\n\t\t\t\tnew Chart(document.getElementById('pie5638').getContext('2d')).Doughnut(pie5638,{segmentStrokeColor : 'transparent',});\n\t\t\t}else{\n\t\t\t\t$j('#pie5638').appear(function() {\n\t\t\t\t\tnew Chart(document.getElementById('pie5638').getContext('2d')).Doughnut(pie5638,{segmentStrokeColor : 'transparent',});\n\t\t\t\t},{accX: 0, accY: -200});\n\t\t\t}\t\t\t\t\t\t\t\n\t\t});\n\t<\/script>[vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;80&#8243; down=&#8221;0&#8243;]<div class=\"custom_font_holder\" style=\" font-size: 18px; line-height: 25px; font-style: normal; font-weight: 300; color: #696969; text-decoration: none; padding: 0; margin: 0; text-align: left;\"><\/p>\n<h5>Customer Support<\/h5>\n<p><\/div>[vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;20&#8243; down=&#8221;0&#8243;][vc_column_text]<span style=\"color: #9d9d9d;\">Ut wisi enim ad minim veniam,<\/span><\/p>\n<p><span style=\"color: #9d9d9d;\">quis nos trud exerci tation ullamcorper.<\/span>[\/vc_column_text][vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;20&#8243; down=&#8221;0&#8243;][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row row_type=&#8221;row&#8221; type=&#8221;full_width&#8221; icon_pack=&#8221;font_awesome&#8221; content_menu_fe_icon=&#8221;arrow_back&#8221; text_align=&#8221;left&#8221; padding_top=&#8221;85&#8243; padding_bottom=&#8221;105&#8243; background_color=&#8221;#ffffff&#8221;][vc_column width=&#8221;1\/1&#8243;][vc_separator type=&#8221;transparent&#8221; position=&#8221;center&#8221; up=&#8221;25&#8243; down=&#8221;0&#8243;][vc_column_text] Carefully crafted elements come together into one amazing design&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"full_width.php","meta":[],"_links":{"self":[{"href":"https:\/\/demo.qodeinteractive.com\/hazel\/wp-json\/wp\/v2\/pages\/15083"}],"collection":[{"href":"https:\/\/demo.qodeinteractive.com\/hazel\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.qodeinteractive.com\/hazel\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.qodeinteractive.com\/hazel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.qodeinteractive.com\/hazel\/wp-json\/wp\/v2\/comments?post=15083"}],"version-history":[{"count":13,"href":"https:\/\/demo.qodeinteractive.com\/hazel\/wp-json\/wp\/v2\/pages\/15083\/revisions"}],"predecessor-version":[{"id":19700,"href":"https:\/\/demo.qodeinteractive.com\/hazel\/wp-json\/wp\/v2\/pages\/15083\/revisions\/19700"}],"wp:attachment":[{"href":"https:\/\/demo.qodeinteractive.com\/hazel\/wp-json\/wp\/v2\/media?parent=15083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}