core/api/admin_skin/js/chart-chartjs.js

/**
 * @Package: Ultra Admin HTML Theme
 * @Since: Ultra 1.0
 * This file is part of Ultra Admin Theme HTML package.
 */


jQuery(function($) {

    'use strict';

    var ULTRA_SETTINGS = window.ULTRA_SETTINGS || {};

    /*--------------------------------
        Chart Js Chart
     --------------------------------*/
    ULTRA_SETTINGS.chartJS = function() {





        /*Bar Chart*/
        var randomScalingFactor = function() {
            return Math.round(Math.random() * 100)
        };

        var barChartData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                fillColor: "rgba(31,181,172,1)",
                strokeColor: "rgba(31,181,172,0.8)",
                highlightFill: "rgba(31,181,172,0.8)",
                highlightStroke: "rgba(31,181,172,1)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            }, {
                fillColor: "rgba(153,114,181,1.0)",
                strokeColor: "rgba(153,114,181,0.8)",
                highlightFill: "rgba(153,114,181,0.8)",
                highlightStroke: "rgba(153,114,181,1.0)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            }]

        }

        var ctxb = document.getElementById("bar-chartjs").getContext("2d");
        window.myBar = new Chart(ctxb).Bar(barChartData, {
            responsive: true
        });


        /*Line Chart*/

        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: "rgba(31,181,172,0.5)",
                strokeColor: "rgba(31,181,172,1)",
                pointColor: "rgba(31,181,172,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(31,181,172,1)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            }, {
                label: "My Second dataset",
                fillColor: "rgba(153,114,181,0.5)",
                strokeColor: "rgba(153,114,181,1.0)",
                pointColor: "rgba(153,114,181,1.0)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(153,114,181,1.0)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            }]

        }

        var ctx = document.getElementById("line-chartjs").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true
        });




        /*PIE Chart*/


        var pieData = [{
                value: 300,
                color: "rgba(250,133,100,1.0)",
                highlight: "rgba(250,133,100,0.8)",
                label: "Orange"
            }, {
                value: 150,
                color: "rgba(31,181,172,1)",
                highlight: "rgba(31,181,172,0.8)",
                label: "Primary"
            }, {
                value: 50,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            }, {
                value: 120,
                color: "rgba(153,114,181,1.0)",
                highlight: "rgba(153,114,181,0.8)",
                label: "Purple"
            }

        ];

        var ctx = document.getElementById("pie-chartjs").getContext("2d");
        window.myPie = new Chart(ctx).Pie(pieData);




        /* Donut Chart*/

        var doughnutData = [{
                value: 300,
                color: "rgba(250,133,100,1.0)",
                highlight: "rgba(250,133,100,0.8)",
                label: "Orange"
            }, {
                value: 150,
                color: "rgba(31,181,172,1)",
                highlight: "rgba(31,181,172,0.8)",
                label: "Primary"
            }, {
                value: 50,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            }, {
                value: 120,
                color: "rgba(153,114,181,1.0)",
                highlight: "rgba(153,114,181,0.8)",
                label: "Purple"
            }

        ];

        var ctxd = document.getElementById("donut-chartjs").getContext("2d");
        window.myDoughnut = new Chart(ctxd).Doughnut(doughnutData, {
            responsive: true
        });





        /*Polar Chart*/

        var polarData = [{
                value: 300,
                color: "rgba(250,133,100,1.0)",
                highlight: "rgba(250,133,100,0.8)",
                label: "Orange"
            }, {
                value: 150,
                color: "rgba(31,181,172,1)",
                highlight: "rgba(31,181,172,0.8)",
                label: "Primary"
            }, {
                value: 50,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            }, {
                value: 120,
                color: "rgba(153,114,181,1.0)",
                highlight: "rgba(153,114,181,0.8)",
                label: "Purple"
            }

        ];

        var ctxp = document.getElementById("polar-chartjs").getContext("2d");
        window.myPolarArea = new Chart(ctxp).PolarArea(polarData, {
            responsive: true
        });









        /*Radar Chart*/
        var radarChartData = {
            labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
            datasets: [{
                label: "My First dataset",
                fillColor: "rgba(31,181,172,0.4)",
                strokeColor: "rgba(31,181,172,1)",
                pointColor: "rgba(31,181,172,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(31,181,172,1)",
                data: [65, 59, 90, 81, 56, 55, 40]
            }, {
                label: "My Second dataset",
                fillColor: "rgba(153,114,181,0.4)",
                strokeColor: "rgba(153,114,181,1.0)",
                pointColor: "rgba(153,114,181,1.0)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(153,114,181,1.0)",
                data: [28, 48, 40, 19, 96, 27, 100]
            }]
        };

        window.myRadar = new Chart(document.getElementById("radar-chartjs").getContext("2d")).Radar(radarChartData, {
            responsive: true
        });


    };






    /******************************
     initialize respective scripts 
     *****************************/
    $(document).ready(function() {});

    $(window).resize(function() {});

    $(window).on('load', function () {
        ULTRA_SETTINGS.chartJS();
    });

});