CODEWITHSUNDEEP
javascripthtmlmysqljsonchart.js
FranzHuber23
FranzHuber23

Reputation: 4292

How can I fasten up the Chart.js graph generation from JQuery over PHP and mySQL?

According to my prior two questions: #1 and #2. How can I fasten up the following code in javascript as the result graph is loading very slowly (even with just 50 values in the dataset)?

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="/node_modules/chart.js/dist/Chart.bundle.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
    canvas{
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    .no-js #loader { display: none;  }
    .js #loader { display: block; position: absolute; left: 100px; top: 0; }
    .loaderClass {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url(web_images/loader.gif) center no-repeat #fff;
    }
</style>
<title>Temperatur und Feuchtigkeit</title>
</head>
<body>
    <div class="loaderClass"></div>
    <div style="width: 100%;"> 
        <canvas id="canvas"></canvas>
    </div>
    <script>
        var data = [], labels = [], temperature=[], humidity=[];
        $.get('GetTestData.php', function(dataGet) {
            data = JSON.parse(dataGet);
            data['labels'].forEach(function(singleResult) {
                labels.push(singleResult);
            });
            data['temperature'].forEach(function(singleResult) {
                temperature.push(singleResult);
            });
            data['humidity'].forEach(function(singleResult) {
                humidity.push(singleResult);
            });
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx, config);
            $(".loaderClass").fadeOut("slow");
        });

        var config = {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: "Temperatur",
                    data: temperature,
                    fill: false,
                    yAxisID: 'A'
                },
                {
                    label: "Feuchtigkeit",
                    data: humidity,
                    fill: false,
                    yAxisID: 'B'
                }]
            },
            options: {
                responsive: true,
                title:{
                    display:true,
                    text:'Temperatur und Feuchtigkeit'
                },
                tooltips: {
                    mode: 'label'
                },
                hover: {
                    mode: 'dataset'
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Datum'
                        }
                    }],
                    yAxes: [{
                        id: 'A',
                        position: 'left',
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Temperatur in у'
                        },
                        ticks: {
                            suggestedMin: -40,
                            suggestedMax: 60,
                        },
                        {
                        id: 'B',
                        position: 'right',
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Luftfeuchtigkeit in %'
                        },
                        ticks: {
                            suggestedMin: 0,
                            suggestedMax: 100,
                        }
                    }],
                }
            }
        };

        $.each(config.data.datasets, function(i, dataset) {
            if(i==0){
                dataset.borderColor = 'rgba(255,0,0,1)';
                dataset.backgroundColor = 'rgba(255,0,0,1)';
                dataset.pointBorderColor = 'rgba(0,50,255,1)';
                dataset.pointBackgroundColor = 'rgba(0,0,0,1)';
            }
            else{
                dataset.borderColor = 'rgba(200,0,255,1)';
                dataset.backgroundColor = 'rgba(200,0,255,1)';
                dataset.pointBorderColor = 'rgba(0,50,255,1)';
                dataset.pointBackgroundColor = 'rgba(0,0,0,1)';
            }
            dataset.pointBorderWidth = 1;
        });

        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx, config);
        };
    </script>
</body>
</html>

Does anyone have some ideas here?

Upvotes: 1

Views: 218

Answers (1)

Kenneth Chan
Kenneth Chan

Reputation: 530

You would try to embed the data from php directly. or include the file using 

<?php include('getTestData.php'); ?>

such like below to replace the ajax get request.

    <?php foreach($dataGet->label as $label){ ?>
  labels.push("<?= $label ?>");
 <?= } ?>

  <?php foreach($dataGet->temperature as $temperature){ ?>
  temperature.push("<?= $temperature ?>");
 <?= } ?>

  <?php foreach($dataGet->humidity as $humidity){ ?>
  humidity.push("<?= $humidity ?>");
 <?= } ?>

  var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
$(".loaderClass").fadeOut("slow");

Upvotes: 1

Related Questions