Charts

There are several types of charts, which you can use to display your statistics data.

Circle

Circle chart

Values and colors of Circle Chart can be edited with data-attributes in HTML code:

<div class="ct-graphBox ct-graphBox--default">
    <div class="ct-graphBox-graph">
        <canvas width="150" height="150" class="ct-js-pieChart" data-ct-percentage="95" 
                data-ct-middleSpace="85" data-ct-secondColor="#eeeeee" 
                data-ct-firstColor="#9cdf3a"></canvas>
        <span class="ct-graphBox-graphPercentage">95%</span>
    </div>
    <div class="ct-graphBox-content">
        <h4 class="ct-graphBox-title">
            Graphic Design
        </h4>

        <p>
            Lorem ipsum dolor sit amet, consecte adipiscing elit. Suspendisse condimentum porttitor
            cursumus. Duis nec nulla turpis. Nulla lacinia laoreet odio
        </p>
    </div>
</div>

<canvas width="150" height="150" class="ct-js-pieChart" data-ct-percentage="95"

data-ct-middleSpace="85" data-ct-secondColor="#eeeeee"

data-ct-firstColor="#9cdf3a"></canvas>

</div>

Graphic Design

</h4>

<p>

Lorem ipsum dolor sit amet, consecte adipiscing elit. Suspendisse condimentum porttitor

cursumus. Duis nec nulla turpis. Nulla lacinia laoreet odio

</p>

</div>

Don’t forget to use also the following script for this:

<script src="assets/js/charts/Chart.min.js"></script>

<script>
$('.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 $margin = validatedata($(this).attr('data-ct-margin'), false);
    $(this).parent().css('margin-left',$margin + 'px');
    $(this).parent().css('margin-right',$margin + 'px');
    var options = {
        responsive: true, percentageInnerCutout: $cutout, segmentShowStroke: $stroke, showTooltips: false
    }
    var doughnutData = [{
        value: parseInt($this.attr('data-ct-percentage'), 10), color: $color, label: false
    }, {
        value: parseInt(100 - $this.attr('data-ct-percentage'), 10), 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);
    }
})
</script>

$('.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 $margin = validatedata($(this).attr('data-ct-margin'), false);

$(this).parent().css('margin-left',$margin + 'px');

$(this).parent().css('margin-right',$margin + 'px');

var options = {

responsive: true, percentageInnerCutout: $cutout, segmentShowStroke: $stroke, showTooltips: false

}

var doughnutData = [{

value: parseInt($this.attr('data-ct-percentage'), 10), color: $color, label: false

}, {

value: parseInt(100 - $this.attr('data-ct-percentage'), 10), 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);

}

})

</script>

Bar chart

Please use simple HTML markup for bar chart:

<div>
    <canvas id="barchart" height="450" width="600"></canvas>
</div>

<div>

</div>

You can modify all settings via the following Javascript:

<script src="assets/js/charts/Chart.min.js"></script>

<script>
    var randomScalingFactor = function () {
        return Math.round(Math.random() * 100)
    };

    var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                fillColor: "rgba(252,67,73,0.5)",
                strokeColor: "#fc4349",
                highlightFill: "#fc4349",
                highlightStroke: "#fc4349",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            },
            {
                fillColor: "rgba(173,210,96,0.5)",
                strokeColor: "#add260",
                highlightFill: "#add260",
                highlightStroke: "#add260",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            }
        ]

    }

    window.onload = function () {
        var ctx1 = document.getElementById("barchart").getContext("2d");
        window.myBar = new Chart(ctx1).Bar(barChartData, {
            responsive: true
        });
    }
</script>

var randomScalingFactor = function () {

return Math.round(Math.random() * 100)

};

var barChartData = {

labels: ["January", "February", "March", "April", "May", "June", "July"],

datasets: [

{

fillColor: "rgba(252,67,73,0.5)",

strokeColor: "#fc4349",

highlightFill: "#fc4349",

highlightStroke: "#fc4349",

data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]

{

fillColor: "rgba(173,210,96,0.5)",

strokeColor: "#add260",

highlightFill: "#add260",

highlightStroke: "#add260",

data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]

}

]

}

window.onload = function () {

var ctx1 = document.getElementById("barchart").getContext("2d");

window.myBar = new Chart(ctx1).Bar(barChartData, {

responsive: true

});

}

</script>

Line Chart

Line chart

Analogously to Bart charts, you can use Line chart with simple HTML markup:

<canvas id="linechart" height="450" width="600"></canvas>

1	<canvas id="linechart" height="450" width="600"></canvas>

And edit all parameters with the following Javascript:

<script src="assets/js/charts/Chart.min.js"></script>

<script>
    var randomScalingFactor = function () {
        return Math.round(Math.random() * 100)
    };    

    var lineChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "#fc4349",
                strokeColor: "#fc4349",
                highlightFill: "#fc4349",
                highlightStroke: "#fc4349",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            }
        ]

    }

    window.onload = function () {
        var ctx1 = document.getElementById("linechart").getContext("2d");
        window.myLine = new Chart(ctx1).Line(lineChartData, {
            responsive: true
        });
    }
</script>

var randomScalingFactor = function () {

return Math.round(Math.random() * 100)

};

var lineChartData = {

labels: ["January", "February", "March", "April", "May", "June", "July"],

datasets: [

{

label: "My First dataset",

fillColor: "#fc4349",

strokeColor: "#fc4349",

highlightFill: "#fc4349",

highlightStroke: "#fc4349",

pointColor: "rgba(220,220,220,1)",

pointStrokeColor: "#fff",

pointHighlightFill: "#fff",

pointHighlightStroke: "rgba(220,220,220,1)",

data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]

{

label: "My Second dataset",

fillColor: "rgba(151,187,205,0.2)",

strokeColor: "rgba(151,187,205,1)",

pointColor: "rgba(151,187,205,1)",

pointStrokeColor: "#fff",

pointHighlightFill: "#fff",

pointHighlightStroke: "rgba(151,187,205,1)",

data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]

}

]

}

window.onload = function () {

var ctx1 = document.getElementById("linechart").getContext("2d");

window.myLine = new Chart(ctx1).Line(lineChartData, {

responsive: true

});

}

</script>

Polar Chart

Polar chart

Insert the polar chart with the following HTML markup:

<canvas id="polararea" height="450" width="600"></canvas>

1	<canvas id="polararea" height="450" width="600"></canvas>

Polar chart can be customized with the following Javascript:

<script src="assets/js/charts/Chart.min.js"></script>

<script>
    var randomScalingFactor = function () {
        return Math.round(Math.random() * 100)
    };

    var polarData = [
        {
            value: 300,
            color: "#F7464A",
            highlight: "#FF5A5E",
            label: "Red" 
        },
        {
            value: 50,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Green" 
        },
        {
            value: 100,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Yellow" 
        },
        {
            value: 40,
            color: "#949FB1",
            highlight: "#A8B3C5",
            label: "Grey" 
        },
        {
            value: 120,
            color: "#4D5360",
            highlight: "#616774",
            label: "Dark Grey" 
        }

    ];

    window.onload = function () {
        var ctx1 = document.getElementById("polararea").getContext("2d");
        window.myPolarArea = new Chart(ctx1).PolarArea(polarData, {
            responsive: true
        });
    }
</script>

var randomScalingFactor = function () {

return Math.round(Math.random() * 100)

};

var polarData = [

{

value: 300,

color: "#F7464A",

highlight: "#FF5A5E",

label: "Red"

{

value: 50,

color: "#46BFBD",

highlight: "#5AD3D1",

label: "Green"

{

value: 100,

color: "#FDB45C",

highlight: "#FFC870",

label: "Yellow"

{

value: 40,

color: "#949FB1",

highlight: "#A8B3C5",

label: "Grey"

{

value: 120,

color: "#4D5360",

highlight: "#616774",

label: "Dark Grey"

}

];

window.onload = function () {

var ctx1 = document.getElementById("polararea").getContext("2d");

window.myPolarArea = new Chart(ctx1).PolarArea(polarData, {

responsive: true

});

}

</script>

News

Circle

Bar chart

Line Chart

Polar Chart

Siver

Estato

Disrupt

We are elite