Index: public/assets/js/examples/charts/apex.js
===================================================================
--- public/assets/js/examples/charts/apex.js	(revision 194a35967c638db611da70bbf868d51cd9124ed2)
+++ public/assets/js/examples/charts/apex.js	(revision 194a35967c638db611da70bbf868d51cd9124ed2)
@@ -0,0 +1,614 @@
+'use strict';
+$(document).ready(function () {
+
+    apex_chart_one();
+
+    apex_chart_two();
+
+    apex_chart_three();
+
+    apex_chart_four();
+
+    apex_chart_five();
+
+    apex_chart_six();
+
+    apex_chart_seven();
+
+    apex_chart_eight();
+
+    apex_chart_nine();
+
+    function apex_chart_one() {
+        var lastDate = 0;
+        var data = []
+        var TICKINTERVAL = 86400000
+        let XAXISRANGE = 777600000
+
+        function getDayWiseTimeSeries(baseval, count, yrange) {
+            var i = 0;
+            while (i < count) {
+                var x = baseval;
+                var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+
+                data.push({
+                    x, y
+                });
+                lastDate = baseval
+                baseval += TICKINTERVAL;
+                i++;
+            }
+        }
+
+        getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
+            min: 10,
+            max: 90
+        });
+
+        function getNewSeries(baseval, yrange) {
+            var newDate = baseval + TICKINTERVAL;
+            lastDate = newDate;
+
+            for (var i = 0; i < data.length - 10; i++) {
+                // IMPORTANT
+                // we reset the x and y of the data which is out of drawing area
+                // to prevent memory leaks
+                data[i].x = newDate - XAXISRANGE - TICKINTERVAL
+                data[i].y = 0
+            }
+
+            data.push({
+                x: newDate,
+                y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
+            })
+
+        }
+
+        var options = {
+            chart: {
+                height: 350,
+                type: 'line',
+                animations: {
+                    enabled: true,
+                    easing: 'linear',
+                    dynamicAnimation: {
+                        speed: 1000
+                    }
+                },
+                toolbar: {
+                    show: false
+                },
+                zoom: {
+                    enabled: false
+                }
+            },
+            dataLabels: {
+                enabled: false
+            },
+            stroke: {
+                curve: 'smooth'
+            },
+            series: [{
+                data: data
+            }],
+            title: {
+                text: 'Dynamic Updating Chart',
+                align: 'left'
+            },
+            markers: {
+                size: 0
+            },
+            xaxis: {
+                type: 'datetime',
+                range: XAXISRANGE,
+            },
+            yaxis: {
+                max: 100
+            },
+            legend: {
+                show: false
+            },
+        };
+
+        var chart = new ApexCharts(
+            document.querySelector("#apex_chart_one"),
+            options
+        );
+
+        chart.render();
+
+        window.setInterval(function () {
+            getNewSeries(lastDate, {
+                min: 10,
+                max: 90
+            })
+            chart.updateSeries([{
+                data: data
+            }])
+        }, 1000)
+    }
+
+    function apex_chart_two() {
+        var ts2 = 1484418600000;
+        var dates = [];
+        var spikes = [5, -5, 3, -3, 8, -8]
+        for (var i = 0; i < 120; i++) {
+            ts2 = ts2 + 86400000;
+            var innerArr = [ts2, dataSeries[1][i].value];
+            dates.push(innerArr)
+        }
+
+        var options = {
+            chart: {
+                type: 'area',
+                stacked: false,
+                height: 350,
+                zoom: {
+                    type: 'x',
+                    enabled: true
+                },
+                toolbar: {
+                    autoSelected: 'zoom'
+                }
+            },
+            dataLabels: {
+                enabled: false
+            },
+            series: [{
+                name: 'XYZ MOTORS',
+                data: dates
+            }],
+            markers: {
+                size: 0,
+            },
+            title: {
+                text: 'Stock Price Movement',
+                align: 'left'
+            },
+            fill: {
+                type: 'gradient',
+                gradient: {
+                    shadeIntensity: 1,
+                    inverseColors: false,
+                    opacityFrom: 0.5,
+                    opacityTo: 0,
+                    stops: [0, 90, 100]
+                },
+            },
+            yaxis: {
+                min: 20000000,
+                max: 250000000,
+                labels: {
+                    formatter: function (val) {
+                        return (val / 1000000).toFixed(0);
+                    },
+                },
+                title: {
+                    text: 'Price'
+                },
+            },
+            xaxis: {
+                type: 'datetime',
+            },
+
+            tooltip: {
+                shared: false,
+                y: {
+                    formatter: function (val) {
+                        return (val / 1000000).toFixed(0)
+                    }
+                }
+            }
+        }
+
+        var chart = new ApexCharts(
+            document.querySelector("#apex_chart_two"),
+            options
+        );
+
+        chart.render();
+    }
+
+    function apex_chart_three() {
+        var options = {
+            chart: {
+                height: 350,
+                type: 'area',
+            },
+            dataLabels: {
+                enabled: false
+            },
+            stroke: {
+                curve: 'smooth'
+            },
+            series: [{
+                name: 'series1',
+                data: [31, 40, 28, 51, 42, 109, 100]
+            }, {
+                name: 'series2',
+                data: [11, 32, 45, 32, 34, 52, 41]
+            }],
+
+            xaxis: {
+                type: 'datetime',
+                categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"],
+            },
+            tooltip: {
+                x: {
+                    format: 'dd/MM/yy HH:mm'
+                },
+            }
+        }
+
+        var chart = new ApexCharts(
+            document.querySelector("#apex_chart_three"),
+            options
+        );
+
+        chart.render();
+    }
+
+    function apex_chart_four() {
+        var options = {
+            chart: {
+                height: 350,
+                type: 'bar',
+            },
+            plotOptions: {
+                bar: {
+                    horizontal: false,
+                    columnWidth: '55%',
+                    endingShape: 'rounded'
+                },
+            },
+            dataLabels: {
+                enabled: false
+            },
+            stroke: {
+                show: true,
+                width: 2,
+                colors: ['transparent']
+            },
+            series: [{
+                name: 'Net Profit',
+                data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
+            }, {
+                name: 'Revenue',
+                data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
+            }, {
+                name: 'Free Cash Flow',
+                data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
+            }],
+            xaxis: {
+                categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+            },
+            yaxis: {
+                title: {
+                    text: '$ (thousands)'
+                }
+            },
+            fill: {
+                opacity: 1
+
+            },
+            tooltip: {
+                y: {
+                    formatter: function (val) {
+                        return "$ " + val + " thousands"
+                    }
+                }
+            }
+        }
+
+        var chart = new ApexCharts(
+            document.querySelector("#apex_chart_four"),
+            options
+        );
+
+        chart.render();
+    }
+
+    function apex_chart_five() {
+        var options = {
+            chart: {
+                height: 350,
+                type: 'bar',
+                stacked: true,
+                stackType: '100%'
+            },
+            responsive: [{
+                breakpoint: 480,
+                options: {
+                    legend: {
+                        position: 'bottom',
+                        offsetX: -10,
+                        offsetY: 0
+                    }
+                }
+            }],
+            series: [{
+                name: 'PRODUCT A',
+                data: [44, 55, 41, 67, 22, 43, 21, 49]
+            },{
+                name: 'PRODUCT B',
+                data: [13, 23, 20, 8, 13, 27, 33, 12]
+            },{
+                name: 'PRODUCT C',
+                data: [11, 17, 15, 15, 21, 14, 15, 13]
+            }],
+            xaxis: {
+                categories: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4'],
+            },
+            fill: {
+                opacity: 1
+            },
+
+            legend: {
+                position: 'right',
+                offsetX: 0,
+                offsetY: 50
+            },
+        }
+
+        var chart = new ApexCharts(
+            document.querySelector("#apex_chart_five"),
+            options
+        );
+
+        chart.render();
+    }
+
+    function apex_chart_six() {
+        var options = {
+            chart: {
+                height: 380,
+                type: 'bar'
+            },
+            plotOptions: {
+                bar: {
+                    barHeight: '100%',
+                    distributed: true,
+                    horizontal: true,
+                    dataLabels: {
+                        position: 'bottom'
+                    },
+                }
+            },
+            colors: ['#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4', '#90ee7e', '#f48024', '#69d2e7'],
+            dataLabels: {
+                enabled: true,
+                textAnchor: 'start',
+                style: {
+                    colors: ['#fff']
+                },
+                formatter: function(val, opt) {
+                    return opt.w.globals.labels[opt.dataPointIndex] + ":  " + val
+                },
+                offsetX: 0,
+                dropShadow: {
+                    enabled: true
+                }
+            },
+            series: [{
+                data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
+            }],
+            stroke: {
+                width: 1,
+                colors: ['#fff']
+            },
+            xaxis: {
+                categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'India'],
+            },
+            yaxis: {
+                labels: {
+                    show: false
+                }
+            },
+            title: {
+                text: 'Custom DataLabels',
+                align: 'center',
+                floating: true
+            },
+            subtitle: {
+                text: 'Category Names as DataLabels inside bars',
+                align: 'center',
+            },
+            tooltip: {
+                theme: 'dark',
+                x: {
+                    show: false
+                },
+                y: {
+                    title: {
+                        formatter: function() {
+                            return ''
+                        }
+                    }
+                }
+            }
+        }
+
+        var chart = new ApexCharts(
+            document.querySelector("#apex_chart_six"),
+            options
+        );
+
+        chart.render();
+    }
+
+    function apex_chart_seven() {
+        var options = {
+            chart: {
+                width: 380,
+                type: 'pie',
+            },
+            labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
+            series: [44, 55, 13, 43, 22],
+            responsive: [{
+                breakpoint: 480,
+                options: {
+                    chart: {
+                        width: 200
+                    },
+                    legend: {
+                        position: 'bottom'
+                    }
+                }
+            }]
+        }
+
+        var chart = new ApexCharts(
+            document.querySelector("#apex_chart_seven"),
+            options
+        );
+
+        chart.render();
+    }
+
+    function apex_chart_eight() {
+        function generateData(baseval, count, yrange) {
+            var i = 0;
+            var series = [];
+            while (i < count) {
+                var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
+                var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+                var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
+
+                series.push([x, y, z]);
+                baseval += 86400000;
+                i++;
+            }
+            return series;
+        }
+
+
+        var options = {
+            chart: {
+                height: 350,
+                type: 'bubble',
+            },
+            dataLabels: {
+                enabled: false
+            },
+            series: [{
+                name: 'Bubble1',
+                data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
+                    min: 10,
+                    max: 60
+                })
+            },
+                {
+                    name: 'Bubble2',
+                    data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
+                        min: 10,
+                        max: 60
+                    })
+                },
+                {
+                    name: 'Bubble3',
+                    data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
+                        min: 10,
+                        max: 60
+                    })
+                },
+                {
+                    name: 'Bubble4',
+                    data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
+                        min: 10,
+                        max: 60
+                    })
+                }
+            ],
+            fill: {
+                opacity: 0.8
+            },
+            title: {
+                text: 'Simple Bubble Chart'
+            },
+            xaxis: {
+                tickAmount: 12,
+                type: 'category',
+            },
+            yaxis: {
+                max: 70
+            }
+        }
+
+        var chart = new ApexCharts(
+            document.querySelector("#apex_chart_eight"),
+            options
+        );
+
+        chart.render();
+    }
+
+    function apex_chart_nine() {
+        var options = {
+            chart: {
+                height: 350,
+                type: 'radar',
+                dropShadow: {
+                    enabled: true,
+                    blur: 1,
+                    left: 1,
+                    top: 1
+                }
+            },
+            series: [{
+                name: 'Series 1',
+                data: [80, 50, 30, 40, 100, 20],
+            }, {
+                name: 'Series 2',
+                data: [20, 30, 40, 80, 20, 80],
+            }, {
+                name: 'Series 3',
+                data: [44, 76, 78, 13, 43, 10],
+            }],
+            title: {
+                text: 'Radar Chart - Multi Series'
+            },
+            stroke: {
+                width: 0
+            },
+            fill: {
+                opacity: 0.4
+            },
+            markers: {
+                size: 0
+            },
+            labels: ['2011', '2012', '2013', '2014', '2015', '2016']
+        }
+
+        var chart = new ApexCharts(
+            document.querySelector("#apex_chart_nine"),
+            options
+        );
+
+        chart.render();
+
+        function update() {
+
+            function randomSeries() {
+                var arr = []
+                for(var i = 0; i < 6; i++) {
+                    arr.push(Math.floor(Math.random() * 100))
+                }
+
+                return arr
+            }
+
+
+            chart.updateSeries([{
+                name: 'Series 1',
+                data: randomSeries(),
+            }, {
+                name: 'Series 2',
+                data: randomSeries(),
+            }, {
+                name: 'Series 3',
+                data: randomSeries(),
+            }])
+        }
+    }
+
+});
Index: public/assets/js/examples/charts/chartjs.js
===================================================================
--- public/assets/js/examples/charts/chartjs.js	(revision 194a35967c638db611da70bbf868d51cd9124ed2)
+++ public/assets/js/examples/charts/chartjs.js	(revision 194a35967c638db611da70bbf868d51cd9124ed2)
@@ -0,0 +1,228 @@
+'use strict';
+$(document).ready(function () {
+
+    var colors = {
+        primary: $('.colors .bg-primary').css('background-color'),
+        primaryLight: $('.colors .bg-primary-bright').css('background-color'),
+        secondary: $('.colors .bg-secondary').css('background-color'),
+        secondaryLight: $('.colors .bg-secondary-bright').css('background-color'),
+        info: $('.colors .bg-info').css('background-color'),
+        infoLight: $('.colors .bg-info-bright').css('background-color'),
+        success: $('.colors .bg-success').css('background-color'),
+        successLight: $('.colors .bg-success-bright').css('background-color'),
+        danger: $('.colors .bg-danger').css('background-color'),
+        dangerLight: $('.colors .bg-danger-bright').css('background-color'),
+        warning: $('.colors .bg-warning').css('background-color'),
+        warningLight: $('.colors .bg-warning-bright').css('background-color'),
+    };
+
+    chartjs_one();
+
+    chartjs_two();
+
+    chartjs_three();
+
+    chartjs_four();
+
+    chartjs_five();
+
+    chartjs_six();
+
+    function chartjs_one() {
+        var element = document.getElementById("chartjs_one");
+        element.height = 100;
+        new Chart(element, {
+            type: 'bar',
+            data: {
+                labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
+                datasets: [
+                    {
+                        label: "Population (millions)",
+                        backgroundColor: [
+                            colors.primary,
+                            colors.secondary,
+                            colors.success,
+                            colors.warning,
+                            colors.info
+                        ],
+                        data: [2478,3267,1734,2084,3000]
+                    }
+                ]
+            },
+            options: {
+                legend: { display: false },
+                title: {
+                    display: true,
+                    text: 'Predicted world population (millions) in 2050'
+                }
+            }
+        });
+    }
+
+    function chartjs_two() {
+        var element = document.getElementById("chartjs_two");
+        element.height = 100;
+        new Chart(element, {
+            type: 'line',
+            data: {
+                labels: ["January", "February", "March", "April", "May", "June", "July"],
+                datasets: [{
+                    data: [65, 0, 80, 81, 56, 85, 40],
+                    label: "Africa",
+                    borderColor: colors.primary,
+                    backgroundColor: colors.primaryLight,
+                }, {
+                    data: [25, 55, 20, 31, 96, 35, 80],
+                    label: "Asia",
+                    borderColor: colors.success,
+                    backgroundColor: colors.successLight,
+                }
+                ]
+            },
+            options: {
+                title: {
+                    display: true,
+                    text: 'World population per region (in millions)'
+                }
+            }
+        });
+    }
+
+    function chartjs_three() {
+        var element = document.getElementById("chartjs_three");
+        element.height = 100;
+        new Chart(element, {
+            type: 'pie',
+            data: {
+                labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
+                datasets: [{
+                    label: "Population (millions)",
+                    borderWidth: 5,
+                    backgroundColor: [
+                        colors.primary,
+                        colors.secondary,
+                        colors.success,
+                        colors.warning,
+                        colors.info
+                    ],
+                    data: [2478,3267,734,1784,933]
+                }]
+            },
+            options: {
+                title: {
+                    display: true,
+                    text: 'Predicted world population (millions) in 2050'
+                }
+            }
+        });
+    }
+
+    function chartjs_four() {
+        var element = document.getElementById("chartjs_four");
+        element.height = 100;
+        new Chart(element, {
+            type: 'radar',
+            data: {
+                labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
+                datasets: [
+                    {
+                        label: "1950",
+                        fill: true,
+                        backgroundColor: colors.primaryLight,
+                        borderColor: colors.primary,
+                        pointBorderColor: "#fff",
+                        data: [8.77,55.61,21.69,6.62,6.82]
+                    }, {
+                        label: "2050",
+                        fill: true,
+                        backgroundColor: colors.successLight,
+                        borderColor: colors.success,
+                        pointBorderColor: "#fff",
+                        data: [25.48,54.16,7.61,8.06,4.45]
+                    }
+                ]
+            },
+            options: {
+                title: {
+                    display: true,
+                    text: 'Distribution in % of world population'
+                }
+            }
+        });
+    }
+
+    function chartjs_five() {
+        var element = document.getElementById("chartjs_five");
+        element.height = 100;
+        new Chart(element, {
+            type: 'horizontalBar',
+            data: {
+                labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
+                datasets: [
+                    {
+                        label: "Population (millions)",
+                        backgroundColor: [
+                            colors.primary,
+                            colors.secondary,
+                            colors.success,
+                            colors.warning,
+                            colors.info
+                        ],
+                        data: [2478,5267,734,784,433]
+                    }
+                ]
+            },
+            options: {
+                legend: { display: false },
+                title: {
+                    display: true,
+                    text: 'Predicted world population (millions) in 2050'
+                }
+            }
+        });
+    }
+
+    function chartjs_six() {
+        var element = document.getElementById("chartjs_six");
+        element.height = 100;
+        new Chart(element, {
+            type: 'bar',
+            data: {
+                labels: ["1900", "1950", "1999", "2050"],
+                datasets: [{
+                    label: "Europe",
+                    type: "line",
+                    borderColor: colors.warning,
+                    data: [408,547,675,734],
+                    fill: false
+                }, {
+                    label: "Africa",
+                    type: "line",
+                    borderColor: colors.success,
+                    data: [133,221,783,2478],
+                    fill: false
+                }, {
+                    label: "Europe",
+                    type: "bar",
+                    backgroundColor: colors.secondary,
+                    data: [408,547,675,734],
+                }, {
+                    label: "Africa",
+                    type: "bar",
+                    backgroundColor: colors.primary,
+                    backgroundColorHover: "#3e95cd",
+                    data: [133,221,783,2478]
+                }
+                ]
+            },
+            options: {
+                title: {
+                    display: true,
+                    text: 'Population growth (millions): Europe & Africa'
+                },
+                legend: { display: false }
+            }
+        });
+    }
+
+});
Index: public/assets/js/examples/charts/justgage.js
===================================================================
--- public/assets/js/examples/charts/justgage.js	(revision 194a35967c638db611da70bbf868d51cd9124ed2)
+++ public/assets/js/examples/charts/justgage.js	(revision 194a35967c638db611da70bbf868d51cd9124ed2)
@@ -0,0 +1,243 @@
+'use strict';
+$(document).ready(function () {
+
+    var colors = {
+        primary: $('.colors .bg-primary').css('background-color'),
+        primaryLight: $('.colors .bg-primary-bright').css('background-color'),
+        secondary: $('.colors .bg-secondary').css('background-color'),
+        secondaryLight: $('.colors .bg-secondary-bright').css('background-color'),
+        info: $('.colors .bg-info').css('background-color'),
+        infoLight: $('.colors .bg-info-bright').css('background-color'),
+        success: $('.colors .bg-success').css('background-color'),
+        successLight: $('.colors .bg-success-bright').css('background-color'),
+        danger: $('.colors .bg-danger').css('background-color'),
+        dangerLight: $('.colors .bg-danger-bright').css('background-color'),
+        warning: $('.colors .bg-warning').css('background-color'),
+        warningLight: $('.colors .bg-warning-bright').css('background-color'),
+    };
+
+    var valueFontColor = "black";
+
+    if($('body').hasClass('dark')){
+        valueFontColor = "white";
+    }
+
+    function init() {
+        new JustGage({
+            id: "justgage_one",
+            value: 90,
+            min: 0,
+            max: 100,
+            counter: true,
+            donut: true,
+            gaugeWidthScale: 0.3,
+            valueFontColor: valueFontColor,
+            levelColors: [colors.primary],
+            label: "Users",
+        });
+
+        // Delete the extra added element when the page is resized.
+        $('#justgage_one > svg + svg').remove();
+
+        new JustGage({
+            id: "justgage_two",
+            value: 46,
+            min: 0,
+            max: 100,
+            counter: true,
+            donut: true,
+            gaugeWidthScale: 0.3,
+            valueFontColor: valueFontColor,
+            levelColors: [colors.success],
+            label: "Customers",
+        });
+
+        // Delete the extra added element when the page is resized.
+        $('#justgage_two > svg + svg').remove();
+
+        new JustGage({
+            id: "justgage_three",
+            value: 10,
+            min: 0,
+            max: 100,
+            counter: true,
+            donut: true,
+            gaugeWidthScale: 0.3,
+            valueFontColor: valueFontColor,
+            levelColors: [colors.info],
+            label: "Visitor",
+        });
+
+        // Delete the extra added element when the page is resized.
+        $('#justgage_three > svg + svg').remove();
+
+        new JustGage({
+            id: 'justgage_four',
+            value: 155,
+            min: 0,
+            max: 250,
+            symbol: 'mph',
+            pointer: true,
+            gaugeWidthScale: 0.3,
+            pointerOptions: {
+                color: colors.primary,
+                stroke: colors.primary
+            },
+            counter: true,
+            relativeGaugeSize: true,
+            valueFontColor: valueFontColor,
+            levelColors: [colors.warning],
+            donut: true
+        });
+
+        // Delete the extra added element when the page is resized.
+        $('#justgage_four > svg + svg').remove();
+
+        new JustGage({
+            id: 'justgage_five',
+            value: 25,
+            min: 0,
+            max: 100,
+            symbol: '%',
+            pointer: true,
+            pointerOptions: {
+                toplength: -15,
+                bottomlength: 10,
+                bottomwidth: 12,
+                color: colors.primary,
+                stroke: colors.primary,
+                stroke_width: 3,
+                stroke_linecap: 'round'
+            },
+            gaugeWidthScale: 0.3,
+            counter: true,
+            relativeGaugeSize: true,
+            valueFontColor: valueFontColor,
+            levelColors: [colors.danger],
+            donut: true,
+        });
+
+        // Delete the extra added element when the page is resized.
+        $('#justgage_five > svg + svg').remove();
+
+        new JustGage({
+            id: 'justgage_six',
+            value: 86,
+            min: 0,
+            max: 100,
+            symbol: 'kWh',
+            pointer: true,
+            gaugeWidthScale: 0.3,
+            pointerOptions: {
+                toplength: 10,
+                bottomlength: 10,
+                bottomwidth: 8,
+                color: colors.primary
+            },
+            counter: true,
+            relativeGaugeSize: true,
+            valueFontColor: valueFontColor,
+            levelColors: [colors.secondary],
+            donut: true
+        });
+
+        // Delete the extra added element when the page is resized.
+        $('#justgage_six > svg + svg').remove();
+
+        var justgage_seven = new JustGage({
+            id: "justgage_seven",
+            value: 275,
+            min: 0,
+            max: 500,
+            label: "Visitors On Site",
+            valueFontColor: valueFontColor,
+            levelColors: [colors.info],
+        });
+
+        // Delete the extra added element when the page is resized.
+        $('#justgage_seven > svg + svg').remove();
+
+        var justgage_eight = new JustGage({
+            id: "justgage_eight",
+            value: 120,
+            min: 0,
+            max: 500,
+            label: "Memory Usage",
+            pointer: true,
+            pointerOptions: {
+                toplength: -15,
+                bottomlength: 10,
+                bottomwidth: 12,
+                color: colors.primary,
+                stroke: colors.primary,
+                stroke_width: 3,
+                stroke_linecap: 'round'
+            },
+            valueFontColor: valueFontColor
+        });
+
+        // Delete the extra added element when the page is resized.
+        $('#justgage_eight > svg + svg').remove();
+
+        var justgage_nine = new JustGage({
+            id: 'justgage_nine',
+            value: 25,
+            min: 0,
+            max: 100,
+            symbol: '%',
+            pointer: true,
+            pointerOptions: {
+                toplength: -15,
+                bottomlength: 10,
+                bottomwidth: 12,
+                color: colors.primary,
+                stroke: colors.primary,
+                stroke_width: 3,
+                stroke_linecap: 'round'
+            },
+            gaugeWidthScale: 0.3,
+            counter: true,
+            relativeGaugeSize: true,
+            valueFontColor: valueFontColor
+        });
+
+        // Delete the extra added element when the page is resized.
+        $('#justgage_nine > svg + svg').remove();
+
+        var justgage_ten = new JustGage({
+            id: 'justgage_ten',
+            value: 70,
+            min: 0,
+            max: 100,
+            symbol: 'Kg',
+            pointerOptions: {
+                toplength: 8,
+                bottomlength: -20,
+                bottomwidth: 6,
+                color: '#8e8e93'
+            },
+            gaugeWidthScale: 0.3,
+            counter: true,
+            relativeGaugeSize: true,
+            valueFontColor: valueFontColor,
+            levelColors: [colors.success],
+        });
+
+        // Delete the extra added element when the page is resized.
+        $('#justgage_ten > svg + svg').remove();
+
+        setInterval(function () {
+            justgage_seven.refresh(getRandomInt(0, 500));
+            justgage_eight.refresh(getRandomInt(0, 500));
+            justgage_nine.refresh(getRandomInt(0, 100));
+            justgage_ten.refresh(getRandomInt(0, 100));
+        }, 2000);
+    }
+
+    init();
+
+    $(window).on('resize', function () {
+        init();
+    });
+
+});
Index: public/assets/js/examples/charts/morsis.js
===================================================================
--- public/assets/js/examples/charts/morsis.js	(revision 194a35967c638db611da70bbf868d51cd9124ed2)
+++ public/assets/js/examples/charts/morsis.js	(revision 194a35967c638db611da70bbf868d51cd9124ed2)
@@ -0,0 +1,49 @@
+'use strict';
+$(document).ready(function () {
+
+    var data = [
+            { y: '2014', a: 50, b: 90},
+            { y: '2015', a: 65,  b: 75},
+            { y: '2016', a: 50,  b: 50},
+            { y: '2017', a: 75,  b: 60},
+            { y: '2018', a: 80,  b: 65},
+            { y: '2019', a: 90,  b: 70},
+            { y: '2020', a: 100, b: 75},
+            { y: '2021', a: 115, b: 75},
+            { y: '2022', a: 120, b: 85},
+            { y: '2023', a: 145, b: 85},
+            { y: '2024', a: 160, b: 95}
+        ],
+        config = {
+            data: data,
+            xkey: 'y',
+            ykeys: ['a', 'b'],
+            labels: ['Total Income', 'Total Outcome'],
+            fillOpacity: 0.6,
+            hideHover: 'auto',
+            behaveLikeLine: true,
+            resize: true,
+            pointFillColors:['#ffffff'],
+            pointStrokeColors: ['black'],
+            lineColors:['gray','red']
+        };
+    config.element = 'area-chart';
+    Morris.Area(config);
+    config.element = 'line-chart';
+    Morris.Line(config);
+    config.element = 'bar-chart';
+    Morris.Bar(config);
+    config.element = 'stacked';
+    config.stacked = true;
+    Morris.Bar(config);
+    Morris.Donut({
+        element: 'pie-chart',
+        data: [
+            {label: "Friends", value: 30},
+            {label: "Allies", value: 15},
+            {label: "Enemies", value: 45},
+            {label: "Neutral", value: 10}
+        ]
+    });
+
+});
Index: public/assets/js/examples/charts/peity.js
===================================================================
--- public/assets/js/examples/charts/peity.js	(revision 194a35967c638db611da70bbf868d51cd9124ed2)
+++ public/assets/js/examples/charts/peity.js	(revision 194a35967c638db611da70bbf868d51cd9124ed2)
@@ -0,0 +1,151 @@
+'use strict';
+$(document).ready(function () {
+
+    var colors = {
+        primary: $('.colors .bg-primary').css('background-color'),
+        primaryLight: $('.colors .bg-primary-bright').css('background-color'),
+        secondary: $('.colors .bg-secondary').css('background-color'),
+        secondaryLight: $('.colors .bg-secondary-bright').css('background-color'),
+        info: $('.colors .bg-info').css('background-color'),
+        infoLight: $('.colors .bg-info-bright').css('background-color'),
+        success: $('.colors .bg-success').css('background-color'),
+        successLight: $('.colors .bg-success-bright').css('background-color'),
+        danger: $('.colors .bg-danger').css('background-color'),
+        dangerLight: $('.colors .bg-danger-bright').css('background-color'),
+        warning: $('.colors .bg-warning').css('background-color'),
+        warningLight: $('.colors .bg-warning-bright').css('background-color'),
+    };
+
+    $("span.pie").peity("pie");
+
+    $(".pie-1").peity("pie", {
+        "fill": [colors.primary, colors.primaryLight],
+        "radius": 30
+    });
+
+    $(".pie-2").peity("pie", {
+        "fill": [colors.secondary, colors.secondaryLight],
+        "radius": 30
+    });
+
+    $(".pie-3").peity("pie", {
+        "fill": [colors.success, colors.successLight],
+        "radius": 30
+    });
+
+    $(".pie-4").peity("pie", {
+        "fill": [colors.danger, colors.dangerLight],
+        "radius": 30
+    });
+
+    $(".pie-5").peity("pie", {
+        "fill": [colors.warning, colors.warningLight],
+        "radius": 30
+    });
+
+    $(".pie-6").peity("pie", {
+        "fill": [colors.primary, colors.primaryLight],
+        "radius": 30,
+        "innerRadius": 20
+    });
+
+    $(".pie-7").peity("pie", {
+        "fill": [colors.secondary, colors.secondaryLight],
+        "radius": 30,
+        "innerRadius": 20
+    });
+
+    $(".pie-8").peity("pie", {
+        "fill": [colors.success, colors.successLight],
+        "radius": 30,
+        "innerRadius": 20
+    });
+
+    $(".pie-9").peity("pie", {
+        "fill": [colors.danger, colors.dangerLight],
+        "radius": 30,
+        "innerRadius": 20
+    });
+
+    $(".pie-10").peity("pie", {
+        "fill": [colors.warning, colors.warningLight],
+        "radius": 30,
+        "innerRadius": 20
+    });
+
+    $(".line-1").peity("line", {
+        "fill": colors.primaryLight,
+        "stroke": colors.primary,
+        "height": 80,
+        "width": 100
+    });
+
+    $(".line-2").peity("line", {
+        "fill": colors.secondaryLight,
+        "stroke": colors.secondary,
+        "height": 80,
+        "width": 100
+    });
+
+    $(".line-3").peity("line", {
+        "fill": colors.secondaryLight,
+        "stroke": colors.success,
+        "height": 80,
+        "width": 100
+    });
+
+    $(".line-4").peity("line", {
+        "fill": colors.dangerLight,
+        "stroke": colors.danger,
+        "height": 80,
+        "width": 100
+    });
+
+    $(".line-5").peity("line", {
+        "fill": colors.warningLight,
+        "stroke": colors.warning,
+        "height": 80,
+        "width": 100
+    });
+
+    $(".bar-1").peity("bar", {
+        "fill": [colors.primary, colors.primaryLight],
+        "height": 50,
+        "width": 100
+    });
+
+    $(".bar-2").peity("bar", {
+        "fill": [colors.secondary, colors.secondaryLight],
+        "height": 50,
+        "width": 100
+    });
+
+    $(".bar-3").peity("bar", {
+        "fill": [colors.success, colors.successLight],
+        "height": 50,
+        "width": 100
+    });
+
+    $(".bar-4").peity("bar", {
+        "fill": [colors.danger, colors.dangerLight],
+        "height": 50,
+        "width": 100
+    });
+
+    $(".bar-5").peity("bar", {
+        "fill": [colors.warning, colors.warningLight],
+        "height": 50,
+        "width": 100
+    });
+
+    $('.peity [data-title]').mousemove(function (e) {
+        $('#peity-tooltip').html($(this).data('title')).css({left: e.pageX + 8, top: e.pageY + 8});
+    }).hover(
+        function () {
+            $('#peity-tooltip').addClass('show');
+        }, function () {
+            $('#peity-tooltip').removeClass('show');
+        }
+    );
+
+});
