In {Theme} you can create a chart with the simple HTML markup:
|
1 2 |
<canvas width="130" height="130" class="ct-js-pieChart" data-ct-percentage="85" data-ct-middleSpace="95" data-ct-secondColor="#d9ddde" data-ct-firstColor="#3eaefa"></canvas> <span class="ct-graphBox-graphPercentage">85%</span> |
And the following javascript snippet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
(function ($) { "use strict"; $(window).load(function () { /* ==================== */ /* ==== PIE CHARTS ==== */ $('.ct-js-pieChart').each(function () { var $this = $(this); var $color = validatedata($(this).attr('data-ct-firstColor'), "#2b8be9"); var $color2 = validatedata($(this).attr('data-ct-secondColor'), "#eeeeee"); var $cutout = validatedata($(this).attr('data-ct-middleSpace'), 90); var $stroke = validatedata($(this).attr('data-ct-showStroke'), false); var options = { responsive: true, percentageInnerCutout: $cutout, segmentShowStroke: $stroke, showTooltips: false } var doughnutData = [{ value: parseInt($this.attr('data-ct-percentage')), color: $color, label: false }, { value: parseInt(100 - $this.attr('data-ct-percentage')), color: $color2 }]; if (($().appear) && ($("body").hasClass("cssAnimate"))) { $('.ct-js-pieChart').appear(function () { var ctx = $this[0].getContext("2d"); window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, options); }); } else { var ctx = $this[0].getContext("2d"); window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, options); } }) }) })(jQuery); |
Chart