<div class="summarychart height-50 w-100"><canvas id="areachartblue1"></canvas></div>
            <canvas id="summarychart" class="height-150"></canvas>
                                
            <script>
                window.randomScalingFactor = function () {
                    return Math.round(Math.random() * 20);
                }
            
                var areachartblue = document.getElementById('areachartblue1').getContext('2d');
                var gradientblue = areachartblue.createLinearGradient(0, 0, 0, 65);
                gradientblue.addColorStop(0, 'rgb(0, 73, 232, 0.85)');
                gradientblue.addColorStop(1, 'rgba( 0, 73, 232, 0)');
            
            var myareachartblue = {
                type: 'bar',
                data: {
                    labels: ['1', '2', '3', '4', '5', '7', '8', '9', '10', '11', '12', '13', '14'],
                    datasets: [{
                        label: '# of Votes',
                            data: [
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            ],
                        radius: 0,
                        backgroundColor: gradientblue,
                        borderColor: '#0049e8',
                        borderWidth: 0,
                        borderRadius: 4,
                        fill: true,
                        tension: 0.5,
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false,
                        },
                        tooltip: {
                            enabled: false
                        },  
                    },
                    scales: {
                        y: {
                            display: false,
                            beginAtZero: true,
                        },
                        x: {
                            display: false,
                        }
                    }
                }
            }
            
            var myAreaChartblue = new Chart(areachartblue, myareachartblue);
            
            /* summary chart */
            var areachart2 = document.getElementById('summarychart').getContext('2d');
            var gradient2 = areachart2.createLinearGradient(0, 0, 0, 120);
            var myareachartCofig2 = {
                type: 'line',
                data: {
                    labels: ['10:30', '11:00', '11:30', '12:00', '12:30', '01:00', '01:30'],
                    datasets: [{
                        label: '# of Votes',
                        data: [
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                        ],
                        radius: 0,
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                        borderColor: '#5840ef',
                        borderWidth: 1,
                        fill: true,
                        tension: 0.5,
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false,
                        },
                    },
                    scales: {
                        y: {
                        display: false,
                        beginAtZero: true,
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            display: true,
                            beginAtZero: true,
                        }
                    }
                }
            }
            
            var myAreaChart2 = new Chart(areachart2, myareachartCofig2);
            
            /* my area chart randomize */
            setInterval(function () {
                myareachartCofig2.data.datasets.forEach(function (dataset) {
                        dataset.data = dataset.data.map(function () {
                        return randomScalingFactor();
                    });
                });
                myAreaChart2.update();
            }, 3000);
            <script>