Home forums Using CanvasJS Chrome crash "Render process gone"

This topic contains 4 replies, has 2 voices, and was last updated by  smarco 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #25137

    After a while Chome Crash with “Render process gone”

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title></title>
        <script src="js/canvasjs.min.js"></script>
        <script src="js/jquery.js"></script>
    
        <script type="text/javascript">
            function prod01() {
                $(document).ready(function () {
                    $.getJSON("data.php", {device: "prod01", limit: "120", type: "total"}, function (result) {
                        $.getJSON("data.php", {device: "prod01", limit: "120", type: "full"}, function (result2) {
    
                            var chart = new CanvasJS.Chart("prod01", {
                                zoomEnabled: true,
                                title:{
                                    text: "Prod01",
                                    fontSize: "18",
                                    fontFamily: "tahoma",
                                    fontWeight: "bold",
                                    dockInsidePlotArea: true
                                },
                                axisX:{
                                    intervalType: "minute",
                                    valueFormatString: "HH mm",
                                    labelAngle: 0
                                },
                                data: [
                                    {
                                        type: "spline",
                                        xValueType: "dateTime",
                                        name: "totali",
                                        showInLegend: "true",
                                        dataPoints: result
                                     },
                                     {
                                        type: "column",
                                        xValueType: "dateTime",
                                        name: "vuote",
                                        showInLegend: "true",
                                        dataPoints: result2
                                     }
                                ]
                            });
    
                            chart.render();
                            setTimeout(prod01, 500);
                        });
                    });
                });
            }
    
            function prod02() {
                $(document).ready(function () {
                    $.getJSON("data.php", {device: "prod01", limit: "120", type: "total"}, function (result) {
                        $.getJSON("data.php", {device: "prod01", limit: "120", type: "full"}, function (result2) {
    
                            var chart = new CanvasJS.Chart("prod02", {
                                zoomEnabled: true,
                                title:{
                                    text: "Prod02",
                                    fontSize: "18",
                                    fontFamily: "tahoma",
                                    fontWeight: "bold",
                                    dockInsidePlotArea: true
                                },
                                axisX:{
                                    intervalType: "minute",
                                    valueFormatString: "HH mm",
                                    labelAngle: 0
                                },
                                data: [
                                    {
                                        type: "spline",
                                        xValueType: "dateTime",
                                        name: "totali",
                                        showInLegend: "true",
                                        dataPoints: result
                                     },
                                     {
                                        type: "column",
                                        xValueType: "dateTime",
                                        name: "vuote",
                                        showInLegend: "true",
                                        dataPoints: result2
                                     }
                                ]
                            });
    
                            chart.render();
                            setTimeout(prod02, 500);
                        });
                    });
                });
            }
    
            prod01();
            prod02();
        </script>
    </head>
    <body>
    <div id="prod01" style="width: 700px; height: 300px;"></div>
    <div id="prod02" style="width: 700px; height: 300px;"></div>
    </body>
    </html>
    #25139

    Same result with only one funcion [ prod01(); ]
    Setting hi-speed refresh [ setTimeout(prod02, 100); ] the crash happens within a few minutes

    #25146

    You can test this “memory leak” with the HTML code and this “sample” PHP

    file: data.php

    <?php
    
    $data_points = array();
    
    for ($i = 1; $i <= 10; $i++) {
      $timestamp = time() -($i*60)."000";
      $random = rand(20, 30);
      $point = array("x" => $timestamp, "y" => $random);
      array_push($data_points, $point);
    }
    
    echo json_encode($data_points, JSON_NUMERIC_CHECK);
    
    ?>

    Where am I doing wrong?
    I’m interested in buying the license if it works

    #25149

    @smarco,

    I observe that you are performing AJAX request inside AJAX request within which you are creating chart (i.e. a new chart is created every 500ms). Instead, you can create chart once, update dataPoints every 500ms and re-render the chart. Please take a look at this updated code sample.


    Vishwas R
    Team CanvasJS

    #25156

    Hello Vishwas,

    thank you for your quick reply and revised code!

    I will test it and update you

    Regards
    Marco

    • This reply was modified 2 months ago by  smarco.
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.