More than 1 chart on a page results in 'X-Axis' labels getting overwritten by those of last chart drawn

[AshishGupta001]

When having more than 1 chart displayed in a view/page, X-Axis labels of last chart drawn overwrites the labels of all previous charts. Although data is correct.

Source code of the page displayed is as below:

        <!-- Main content -->
        <section class="content">
        <!-- Your Page Content Here -->
        <div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-x">
            <div class="panel-heading">Dummy1</div>
            <div class="panel-body">
                <script src="/js/moment.js"></script>
                <script src="/js/Chart.min.js"></script>
                <div class="container-fluid">
                    <canvas id="BarChart1" width="100px" height="100px"></canvas>
                </div>
<script>
    /**
     * This script is to allow for more than one window.onload in our page,
     * in case we need to use more than one chart per page
     */

    /**
     * The addLoadEvent function.
     * @author  Willison, Simon (http://simonwillison.net/)
     */
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }
</script>
<!--suppress BadExpressionStatementJS -->
<script type="text/javascript">

    var label = []; // graphic label array
    var infor = []; // graphic data array

    // incremeting labels array
            label.push("Jan");
            label.push("Apr");

    /**
     * This function is responsible for loading the window.load and instantiate our chart.
     * The parameters of data and options are passed directly to avoid conflict with the
     * variable names when using more than one report.
     */
    addLoadEvent(function() {
        var BarChart1 = document.getElementById("BarChart1").getContext("2d");

        window.myBar = new Chart(BarChart1).Bar(
                    // ---------------------------------------------------------------
                    // Data sections
                    // ---------------------------------------------------------------
                    {
                    labels: label,
                    datasets:
                            [
                                {
                                    label: "Dados primários",
                                    fillColor: "rgba(212, 141, 63, .7)",
                                    strokeColor: "rgba(212, 141, 63, .7)",
                                    highlightFill: "rgba(212, 141, 63, .7)",
                                    highlightStroke: "rgba(212, 141, 63, .7)",
                                    data : [333.4, 50]

                                    }, {
                                    label: "Dados primários",
                                    fillColor: "rgba(181, 90, 164, .7)",
                                    strokeColor: "rgba(181, 90, 164, .7)",
                                    highlightFill: "rgba(181, 90, 164, .7)",
                                    highlightStroke: "rgba(181, 90, 164, .7)",
                                    data : [87, 60]

                                    }, {
                                    label: "Dados primários",
                                    fillColor: "rgba(35, 102, 154, .7)",
                                    strokeColor: "rgba(35, 102, 154, .7)",
                                    highlightFill: "rgba(35, 102, 154, .7)",
                                    highlightStroke: "rgba(35, 102, 154, .7)",
                                    data : [100, 70]

                                    }, {
                                    label: "Dados primários",
                                    fillColor: "rgba(86, 160, 59, .7)",
                                    strokeColor: "rgba(86, 160, 59, .7)",
                                    highlightFill: "rgba(86, 160, 59, .7)",
                                    highlightStroke: "rgba(86, 160, 59, .7)",
                                    data : [45, 35]
                                    } ]
                    },
                    // End data section

                    // ---------------------------------------------------------------
                    // Options section
                    // ---------------------------------------------------------------
                    {
                        responsive:true
                    });
                    // End options section
    });
</script>
            </div>
        </div>
        <!-- ========================================================= -->
        <div class="col-md-4 col-md-offset-x">
            <div class="panel-heading">Dummy2</div>
            <div class="panel-body">
                <script src="/js/moment.js"></script>
                <script src="/js/Chart.min.js"></script>
                <div class="container-fluid">
                    <canvas id="BarChart2" width="100px" height="100px"></canvas>
                </div>

<script>
    /**
     * This script is to allow for more than one window.onload in our page,
     * in case we need to use more than one chart per page
     */

    /**
     * The addLoadEvent function.
     * @author  Willison, Simon (http://simonwillison.net/)
     */
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }
</script>
<!--suppress BadExpressionStatementJS -->
<script type="text/javascript">

    var label = []; // graphic label array
    var infor = []; // graphic data array

    // incremeting labels array
            label.push("Orange");
            label.push("Apple");
            label.push("Banana");

    /**
     * This function is responsible for loading the window.load and instantiate our chart.
     * The parameters of data and options are passed directly to avoid conflict with the
     * variable names when using more than one report.
     */
    addLoadEvent(function() {
        var BarChart2 = document.getElementById("BarChart2").getContext("2d");

        window.myBar = new Chart(BarChart2).Bar(
                    // ---------------------------------------------------------------
                    // Data sections
                    // ---------------------------------------------------------------
                    {
                    labels: label,
                    datasets:
                            [
                                {
                                    label: "Dados primários",
                                    fillColor: "rgba(214, 158, 100, .7)",
                                    strokeColor: "rgba(214, 158, 100, .7)",
                                    highlightFill: "rgba(214, 158, 100, .7)",
                                    highlightStroke: "rgba(214, 158, 100, .7)",
                                    data : [23.4, 32.8, 20]
                                    }, {
                                    label: "Dados primários",
                                    fillColor: "rgba(28, 216, 135, .7)",
                                    strokeColor: "rgba(28, 216, 135, .7)",
                                    highlightFill: "rgba(28, 216, 135, .7)",
                                    highlightStroke: "rgba(28, 216, 135, .7)",
                                    data : [47, 45, 23]
                                    }]
                    },
                    // End data section

                    // ---------------------------------------------------------------
                    // Options section
                    // ---------------------------------------------------------------
                    {
                        responsive:true
                    });
                    // End options section
    });
</script>
</div>
    </div>
    </div>

[edduu]

had the same issue.

go to vendor/fx3costa/laravel/src/resources/views/

edit all views, the

var label = []; // graphic label array
    var infor = []; // graphic data array

    // incremeting labels array
    <?php foreach($labels as $label): ?>
        label.push("<?php echo $label; ?>");
    <?php endforeach; ?>

cut it and paste in bellow the line

addLoadEvent(function() {

this is because the BarCode and Line Codes don't define the label var inside the function, they got them as a global var but it got defined many times and got the first definition.

had the same issue should be updated

[fxcosta]

Fixed by @edduu in db9aaf0bf353d3ffeacee5e51422e8c5e20bb3f3