<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, 'rgba(1, 94, 194, 0.85)');
    gradientblue.addColorStop(1, 'rgba(0, 197, 221, 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: '#015EC2',
            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: 2,
            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>