{"id":183,"date":"2014-10-02T10:59:32","date_gmt":"2014-10-02T10:59:32","guid":{"rendered":"http:\/\/acowhite.uk\/index.php\/elements-charts\/"},"modified":"2014-10-02T10:59:32","modified_gmt":"2014-10-02T10:59:32","slug":"elements-charts","status":"publish","type":"page","link":"https:\/\/acowhite.uk\/index.php\/elements-charts\/","title":{"rendered":"Elements &#8211; Charts"},"content":{"rendered":"<section class=\"section  text-normal section-text-no-shadow section-inner-no-shadow section-normal section-opaque\"  >\n    \n    <div class=\"background-overlay grid-overlay-0 \" style=\"background-color: rgba(0,0,0,0);\"><\/div>\n\n    <div class=\"container container-vertical-middle\">\n        <div class=\"row vertical-middle\">\n            <div class=\"col-md-6     text-Default small-screen-default\"  ><h2 class=\"text-default  element-top-20 element-bottom-0 text-normal os-animation bigger hairline\" data-os-animation=\"fadeInLeft\" data-os-animation-delay=\"0.2s\" >\n    Line charts<\/h2><div class=\"col-text-1 text-normal  element-top-20 element-bottom-20 os-animation\" data-os-animation=\"fadeInLeft\" data-os-animation-delay=\"0.2s\">\n    \n<p class=\"lead\">Line graphs are probably the most widely used graph for showing trends. Chart.js has a ton of customisation features for line graphs, along with support for multiple datasets to be plotted on one chart.<\/p>\n<\/div>\n<\/div><div class=\"col-md-6     text-center small-screen-default\"  ><\/div>        <\/div>\n    <\/div>\n<\/section>\n<section class=\"section  text-normal section-text-no-shadow section-inner-no-shadow section-normal section-opaque\"  >\n    \n    <div class=\"background-overlay grid-overlay-0 \" style=\"background-color: rgba(0,0,0,0);\"><\/div>\n\n    <div class=\"container container-vertical-default\">\n        <div class=\"row vertical-default\">\n            <div class=\"col-md-12     text-default small-screen-default\"  ><hr class=\" element-top-20 element-bottom-20\" data-os-animation=\"none\" data-os-animation-delay=\"0s\"><\/div>        <\/div>\n    <\/div>\n<\/section>\n<section class=\"section  text-normal section-text-no-shadow section-inner-no-shadow section-normal section-opaque\"  >\n    \n    <div class=\"background-overlay grid-overlay-0 \" style=\"background-color: rgba(0,0,0,0);\"><\/div>\n\n    <div class=\"container container-vertical-middle\">\n        <div class=\"row vertical-middle\">\n            <div class=\"col-md-6     text-center small-screen-default\"  ><\/div><div class=\"col-md-6     text-left small-screen-default\"  ><h2 class=\"text-left  element-top-20 element-bottom-0 text-normal os-animation bigger hairline\" data-os-animation=\"fadeInRight\" data-os-animation-delay=\"0.2s\" >\n    Pie charts<\/h2><div class=\"col-text-1 text-normal  element-top-20 element-bottom-20 os-animation\" data-os-animation=\"fadeInRight\" data-os-animation-delay=\"0s\">\n    \n<p class=\"lead\">Pie charts are great at comparing proportions within a single data set. Chart.js shows animated pie charts with customisable colours, strokes, animation easing and effects.<\/p>\n<\/div>\n<\/div>        <\/div>\n    <\/div>\n<\/section>\n<section class=\"section  text-normal section-text-no-shadow section-inner-no-shadow section-normal section-opaque\"  >\n    \n    <div class=\"background-overlay grid-overlay-0 \" style=\"background-color: rgba(0,0,0,0);\"><\/div>\n\n    <div class=\"container container-vertical-default\">\n        <div class=\"row vertical-default\">\n            <div class=\"col-md-12     text-default small-screen-default\"  ><hr class=\" element-top-20 element-bottom-20\" data-os-animation=\"none\" data-os-animation-delay=\"0s\"><\/div>        <\/div>\n    <\/div>\n<\/section>\n<section class=\"section  text-normal section-text-no-shadow section-inner-no-shadow section-normal section-opaque\"  >\n    \n    <div class=\"background-overlay grid-overlay-0 \" style=\"background-color: rgba(0,0,0,0);\"><\/div>\n\n    <div class=\"container container-vertical-middle\">\n        <div class=\"row vertical-middle\">\n            <div class=\"col-md-6     text-Default small-screen-default\"  ><h2 class=\"text-default  element-top-20 element-bottom-0 text-normal os-animation bigger hairline\" data-os-animation=\"fadeInLeft\" data-os-animation-delay=\"0.2s\" >\n    Doughnut charts<\/h2><div class=\"col-text-1 text-normal  element-top-20 element-bottom-20 os-animation\" data-os-animation=\"fadeInLeft\" data-os-animation-delay=\"0.2s\">\n    \n<p class=\"lead\">Similar to pie charts, doughnut charts are great for showing proportional data. Chart.js offers the same customisation options as for pie charts, but with a custom sized inner cutout to turn your pies into doughnuts.<\/p>\n<\/div>\n<\/div><div class=\"col-md-6     text-center small-screen-default\"  ><\/div>        <\/div>\n    <\/div>\n<\/section>\n<section class=\"section  text-normal section-text-no-shadow section-inner-no-shadow section-normal section-opaque\"  >\n    \n    <div class=\"background-overlay grid-overlay-0 \" style=\"background-color: rgba(0,0,0,0);\"><\/div>\n\n    <div class=\"container container-vertical-default\">\n        <div class=\"row vertical-default\">\n            <div class=\"col-md-12     text-default small-screen-default\"  ><hr class=\" element-top-20 element-bottom-20\" data-os-animation=\"none\" data-os-animation-delay=\"0s\"><\/div>        <\/div>\n    <\/div>\n<\/section>\n<section class=\"section  text-normal section-text-no-shadow section-inner-no-shadow section-normal section-opaque\"  >\n    \n    <div class=\"background-overlay grid-overlay-0 \" style=\"background-color: rgba(0,0,0,0);\"><\/div>\n\n    <div class=\"container container-vertical-middle\">\n        <div class=\"row vertical-middle\">\n            <div class=\"col-md-6     text-center small-screen-default\"  ><\/div><div class=\"col-md-6     text-left small-screen-default\"  ><h2 class=\"text-left  element-top-20 element-bottom-0 text-normal os-animation bigger hairline\" data-os-animation=\"fadeInRight\" data-os-animation-delay=\"0.2s\" >\n    Radar charts<\/h2><div class=\"col-text-1 text-normal  element-top-20 element-bottom-20 os-animation\" data-os-animation=\"fadeInRight\" data-os-animation-delay=\"0s\">\n    \n<p class=\"lead\">Radar charts are good for comparing a selection of different pieces of data. Chart.js supports multiple data sets plotted on the same radar chart. It also supports all of the customisation and animation options you&#8217;d expect.<\/p>\n<\/div>\n<\/div>        <\/div>\n    <\/div>\n<\/section>\n<section class=\"section  text-normal section-text-no-shadow section-inner-no-shadow section-normal section-opaque\"  >\n    \n    <div class=\"background-overlay grid-overlay-0 \" style=\"background-color: rgba(0,0,0,0);\"><\/div>\n\n    <div class=\"container container-vertical-default\">\n        <div class=\"row vertical-default\">\n            <div class=\"col-md-12     text-default small-screen-default\"  ><hr class=\" element-top-20 element-bottom-20\" data-os-animation=\"none\" data-os-animation-delay=\"0s\"><\/div>        <\/div>\n    <\/div>\n<\/section>\n<section class=\"section  text-normal section-text-no-shadow section-inner-no-shadow section-normal section-opaque\"  >\n    \n    <div class=\"background-overlay grid-overlay-0 \" style=\"background-color: rgba(0,0,0,0);\"><\/div>\n\n    <div class=\"container container-vertical-middle\">\n        <div class=\"row vertical-middle\">\n            <div class=\"col-md-6     text-Default small-screen-default\"  ><h2 class=\"text-default  element-top-20 element-bottom-0 text-normal os-animation bigger hairline\" data-os-animation=\"fadeInLeft\" data-os-animation-delay=\"0.2s\" >\n    Polar area charts<\/h2><div class=\"col-text-1 text-normal  element-top-20 element-bottom-20 os-animation\" data-os-animation=\"fadeInLeft\" data-os-animation-delay=\"0.2s\">\n    \n<p class=\"lead\">Polar area charts are similar to pie charts, but the variable isn&#8217;t the circumference of the segment, but the radius of it. Chart.js delivers animated polar area charts with custom coloured segments, along with customisable scales and animation.<\/p>\n<\/div>\n<\/div><div class=\"col-md-6     text-center small-screen-default\"  ><\/div>        <\/div>\n    <\/div>\n<\/section>\n<section class=\"section  text-normal section-text-no-shadow section-inner-no-shadow section-normal section-opaque\"  >\n    \n    <div class=\"background-overlay grid-overlay-0 \" style=\"background-color: rgba(0,0,0,0);\"><\/div>\n\n    <div class=\"container container-vertical-default\">\n        <div class=\"row vertical-default\">\n            <div class=\"col-md-12     text-default small-screen-default\"  ><hr class=\" element-top-20 element-bottom-20\" data-os-animation=\"none\" data-os-animation-delay=\"0s\"><\/div>        <\/div>\n    <\/div>\n<\/section>\n<section class=\"section  text-normal section-text-no-shadow section-inner-no-shadow section-normal section-opaque\"  >\n    \n    <div class=\"background-overlay grid-overlay-0 \" style=\"background-color: rgba(0,0,0,0);\"><\/div>\n\n    <div class=\"container container-vertical-middle\">\n        <div class=\"row vertical-middle\">\n            <div class=\"col-md-6     text-right small-screen-default\"  ><\/div><div class=\"col-md-6     text-left small-screen-center\"  ><h2 class=\"text-default  element-top-20 element-bottom-0 text-normal os-animation bigger hairline\" data-os-animation=\"fadeInLeft\" data-os-animation-delay=\"0.2s\" >\n    Bar charts<\/h2><div class=\"col-text-1 text-normal  element-top-20 element-bottom-20 os-animation\" data-os-animation=\"fadeInLeft\" data-os-animation-delay=\"0.2s\">\n    \n<p class=\"lead\">Bar graphs are also great at showing trend data. Chart.js supports bar charts with a load of custom styles and the ability to show multiple bars for each x value.<\/p>\n<\/div>\n<\/div>        <\/div>\n    <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"Line charts Line graphs are probably the most widely used graph for showing trends. Chart.js has a ton of customisation features for line graphs, along with support for multiple datasets to be plotted on one chart. Pie charts Pie charts are great at comparing proportions within a single data set. Chart.js shows animated pie charts","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/acowhite.uk\/index.php\/wp-json\/wp\/v2\/pages\/183"}],"collection":[{"href":"https:\/\/acowhite.uk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/acowhite.uk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/acowhite.uk\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/acowhite.uk\/index.php\/wp-json\/wp\/v2\/comments?post=183"}],"version-history":[{"count":0,"href":"https:\/\/acowhite.uk\/index.php\/wp-json\/wp\/v2\/pages\/183\/revisions"}],"wp:attachment":[{"href":"https:\/\/acowhite.uk\/index.php\/wp-json\/wp\/v2\/media?parent=183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}