CODEWITHSUNDEEP
javascripthtmlcharts
overmach
overmach

Reputation: 96

Multiple dynamic line charts with chart.js | Js and html

I'd like to create an html page using Javascript (in particular using chart.js library) and to display dynamic line charts.
I'd also like to add a new chart every time the "Add Chart" button is pressed.
I manage to do all of this more or less, but with some issues:

Could CSS help me? Or is there a way to divide the html page in a dynamic way so that every time a new chart is created it will also create a new area of the html page for the new chart?

This is the code: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="node_modules/libs/http_cdnjs.cloudflare.com_ajax_libs_moment.js_2.22.2_moment.js"></script>
    <script src="node_modules/libs/http_cdnjs.cloudflare.com_ajax_libs_Chart.js_2.7.3_Chart.js"></script>
    <script src="node_modules/libs/http_github.com_nagix_chartjs-plugin-streaming_releases_download_v1.7.1_chartjs-plugin-streaming.js"></script>

</head>
<body>

    <div id="test">
        <canvas id="myChart"></canvas>
    </div>

    <!-- <div id="test2">
        <canvas id="myChart2"></canvas>
    </div> -->

<p>
    <button id="randomizeData">Randomize Data</button>
    <button id="addDataset">Add Dataset</button>
    <button id="removeDataset">Remove Dataset</button>
    <button id="addData">Add Data</button>
    <button id="addChart">Add Chart</button>
</p>



<script>



    //import Chart from "chart.js";

    var chartColors = {
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(201, 203, 207)'
    };
    var color = Chart.helpers.color;
    var t=5;
    var b=500;
    var d=1;
    var cont = 0;

    var config = {
        type: 'line',
        data: {
            datasets: [{
                label: 'Dataset 1 (cubic interpolation)',
                backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
                borderColor: chartColors.blue,
                fill: false,
                cubicInterpolationMode: 'monotone',
                data: []
            }]
        },
        options: {
            title: {
                display: true,
                text: 'Board Number 0', //var i era 'Board Number X'
            },
            scales: {
                xAxes: [{
                    type: 'realtime',
                    realtime: {
                        duration: 25000, //era 20000
                        refresh: 1000,  //era 1000
                        delay: 1200,    //era 2000
                        onRefresh: onRefresh
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'value'
                    }
                }]
            },
            layout: {
                padding:    {
                    left: 0,
                    right: 1000,
                    top: t, //var t era 5
                    bottom: b //var b era 500
                }
            },
            id: d, //var d
        }
    };

    function randomScalingFactor() {
        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    }


    document.getElementById('addChart').addEventListener('click', newChart);

    function newChart(){
        var ctx2 = document.getElementById('myChart').getContext('2d');
        window.myChart = new Chart(ctx2, config);

        window.myChart.update();
        //alert(config.options.id);
        configSet();
        //alert(config.options.id);
        alert(cont);
        return cont = cont +1;
    }



    function configSet(){
        config.options.layout.padding.top = cont*100;
        config.options.layout.padding.bottom -= cont*100;
        //config.options.layout.padding.right -=200;
        //config.options.layout.padding.left += 200;
        config.options.id += 1;
        config.options.title.text = 'Board Number ' + config.options.id;
        //newChart();
    }

    function onRefresh(chart) {
        chart.config.data.datasets.forEach(function(dataset) {
            dataset.data.push({
                x: Date.now(),
                y: randomScalingFactor()
            });
        });
    }

    /* window.onload = function() {
        var ctx = document.getElementById('myChart').getContext('2d');
        window.myChart = new Chart(ctx, config);
    };*/

    document.getElementById('randomizeData').addEventListener('click', function() {
        config.data.datasets.forEach(function(dataset) {
            dataset.data.forEach(function(dataObj) {
                dataObj.y = randomScalingFactor();
            });
        });
        window.myChart.update();
    });

    var colorNames = Object.keys(chartColors);
    document.getElementById('addDataset').addEventListener('click', function() {
        var colorName = colorNames[config.data.datasets.length % colorNames.length];
        var newColor = chartColors[colorName];
        var newDataset = {
            label: 'Dataset ' + (config.data.datasets.length + 1),
            backgroundColor: color(newColor).alpha(0.5).rgbString(),
            borderColor: newColor,
            fill: false,
            lineTension: 0,
            data: []
        };

        config.data.datasets.push(newDataset);
        window.myChart.update();
    });

    document.getElementById('removeDataset').addEventListener('click', function() {
        config.data.datasets.pop();
        window.myChart.update();
    });

    document.getElementById('addData').addEventListener('click', function() {
        onRefresh(window.myChart);
        window.myChart.update();
    });

</script>

</body>
</html>

Upvotes: 1

Views: 2922

Answers (1)

labu4bd
labu4bd

Reputation: 701

You can create canvas after addChart event call, I just update your newChart() function and run in my computer and it's work what you want. Example:

function newChart(){
    document.getElementById('test').insertAdjacentHTML("afterend","<div><canvas id='canvas"+cont+"'></canvas></div>");
    var can_id="canvas"+cont;
    var ctx2 = document.getElementById(can_id).getContext('2d');
    window.can_id = new Chart(ctx2, config);

    window.can_id.update();
    //alert(config.options.id);
    configSet();
    //alert(config.options.id);
    alert(cont);
    return cont = cont +1;
}

Edit: I edit for use 'table'. In your html I add only 'table' and in JS I add all 'tr' when call this function. Link:

HTML: <table id="test"> </table>

JS:

function newChart(){
    document.getElementById('test').insertAdjacentHTML("afterend","<tr><td><canvas id='canvas"+cont+"'></canvas></td></tr>");
    var can_id="canvas"+cont;
    var ctx2 = document.getElementById(can_id).getContext('2d');
    window.can_id = new Chart(ctx2, config);

    window.can_id.update();
    //alert(config.options.id);
    configSet();
    //alert(config.options.id);
    alert(cont);
    return cont = cont +1;
}

Upvotes: 2

Related Questions