aConic Admin Documentation - v1.0

Version - 1.0.0 Help

Chart.js

Simple yet flexible JavaScript charting for designers & developers.
Chart.js documentation

How to use

Copy-paste the stylesheet <link> into your <head> to load the CSS.

                                
    <link rel="stylesheet" href="./node_modules/chart.js/dist/Chart.min.css">
                            

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

                                
    <script src="./node_modules/chart.js/dist/Chart.min.js"></script>
                            

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                                
    <script>
        (function() {
          // Initialization of chartjs
          
        });
      </script>
                            

Bar chart

Your browser does not support the canvas element.

                                            
    <canvas id="barChart">
        <p>Your browser does not support the canvas element.</p>
    </canvas> 
                                        
                                            
    <script>
        const stat = document.getElementById('barChart').getContext('2d');
        const statistics = new Chart(stat, {
            type: 'bar',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                datasets: [{
                    label: 'Orders',
                    data: [128, 159, 354, 524, 211, 321, 322, 543, 643, 654, 987, 123],
                    backgroundColor: [
                        'rgb(8, 66, 152, 0.9)'
                    ],
                    borderRadius:5
                },
                {
                    label: 'Items sold',
                    data: [18, 19, 34, 54, 21, 31, 32, 53, 63, 64, 97, 13],
                    backgroundColor: [
                        'rgb(0 148 133)'
                    ],
                    borderRadius:5
                },
                {
                    label: 'Refunds',
                    data: [108, 109, 304, 504, 201, 301, 302, 503, 603, 604, 907, 103],
                    backgroundColor: [
                        'rgb(233 30 99)'
                    ],
                    borderRadius:5
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        display:false
                    }
                }
            }
        });
    </script> 
                                        

Line chart

Your browser does not support the canvas element.

                                            
    <canvas id="lineChart">
        <p>Your browser does not support the canvas element.</p>
    </canvas> 
                                        
                                            
    <script>
        const sale = document.getElementById('lineChart').getContext('2d');
        const sales = new Chart(sale, {
            type: 'line',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                datasets: [{
                    label: 'Sales',
                    data: [128, 159, 354, 524, 211, 321, 322, 543, 643, 654, 987, 123],
                    backgroundColor: [
                        'rgb(8, 66, 152, 0.2)'
                    ],
                    fill: true,
                    borderColor: 'rgb(8, 66, 152, 0.9)',
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        display:false
                    }
                }
            }
        });
    </script> 
                                        

Your browser does not support the canvas element.

                                            
    <canvas id="lineChart">
        <p>Your browser does not support the canvas element.</p>
    </canvas> 
                                        
                                            
    <script>
        const traffic = document.getElementById('lineChart').getContext('2d');
        const trafficC = new Chart(traffic, {
            type: 'line',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                datasets: [{
                    label: 'Direct',
                    data: [128, 159, 354, 524, 311, 421, 352, 543, 643, 654, 987, 723],
                    backgroundColor: [
                        'rgb(8, 66, 152, 0.2)'
                    ],
                    fill: false,
                    borderColor: 'rgb(8, 66, 152, 0.9)',
                    tension: 0.1
                },
                {
                    label: 'Organic',
                    data: [228, 259, 254, 224, 211, 321, 322, 443, 743, 554, 787, 923],
                    backgroundColor: [
                        'rgb(233 30 99)'
                    ],
                    fill: false,
                    borderColor: 'rgb(233 30 99)',
                    tension: 0.1
                },
                {
                    label: 'Referral',
                    data: [328, 359, 154, 124, 200, 221, 222, 243, 343, 254, 387, 523],
                    backgroundColor: [
                        'rgb(0 150 136)'
                    ],
                    fill: false,
                    borderColor: 'rgb(0 150 136)',
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        display:false
                    }
                }
            }
        });
    </script>