Chart load time and animation slow on mobile device
<p>I have a chart built using Chart.js which starts with 0 values. Upon clicking a submit button, data is loaded from an external database and updated on the chart. This is working as expected on a computer browser. </p>

<p>Takes under a second to reach from 0 values to new data display on chart. But when I try to access this page on a mobile phone, it still works but the load time is very long. Takes about 10 seconds for the chart to update as the points slowly rise up to new positions. Sometimes it even freezes midway. </p>

<p>I tested with fixed values instead of getting them from the database and the load time is still delayed on mobile phone. Thus I think it has to do with the Chart.js options itself instead.  </p>

<p>Is there anyway to reduce load time on mobile devices when using Chart.js? I don't really see any optimization options there. Anyone experienced similar issues? The images below show the chart look at 0 value and loaded value.    </p>

<p><strong>Javascript</strong></p>

<pre><code>$( document ).ready(function() {

    var lineData = {
        labels: ["Lap 1", "Lap 2", "Lap 3", "Lap 4", "Lap 5", "Lap 6", "Lap 7", "Lap 8", "Lap 9", "Lap 10", "Lap 11", "Lap 12"],
        datasets: [{
            fillColor: "rgba(255,255,255,0)",
            strokeColor: "rgba(63,169,245,1)",
            pointColor: "rgba(63,169,245,1)",
            pointStrokeColor: "#fff",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        }, {
            fillColor: "rgba(255,255,255,0)",
            strokeColor: "rgba(102,45,145,1)",
            pointColor: "rgba(102,45,145,1)",
            pointStrokeColor: "#fff",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        }]
    }

    var lineOptions = {
        responsive: true,
        animation: true,
        pointDot: true,
        scaleOverride : false,
        scaleShowGridLines : false,
        scaleShowLabels : true,
        scaleSteps : 4,
        scaleStepWidth : 25,
        scaleStartValue : null
    };

    //Create Line chart
    var ctx = document.getElementById("lineChart").getContext("2d");
    myNewChart = new Chart(ctx).Line(lineData, lineOptions);

    $("#form").submit(function(e) {
        e.preventDefault();
        e.stopPropagation();
        var race1 = $( "#racename1" ).val();
        var race2 = $( "#racename2" ).val();
        var race1Data = [];
        var race2Data = [];

        if ((race1.length &gt; 0 &amp;&amp; race2.length &gt; 0) &amp;&amp;
                (race1.toLowerCase() != "select race" &amp;&amp; race2.toLowerCase() != "select race")) {

            $.post("updateStatChartServlet", {raceName1 : race1, raceName2 : race2},  function(responseText) {
                var temp = responseText;
                var race1Str = temp.substring(0,temp.indexOf("|"));
                var race2Str = temp.substring(temp.indexOf("|")+1,temp.length);
                race1Data = race1Str.split(",");
                race2Data = race2Str.split(",");

                var count = 0;

                lineData.datasets.forEach(function(set){
                    set.data.forEach(function(){
                        if(race1Data[count].trim() != ""){
                            myNewChart.datasets[0].points[count].value = race1Data[count];
                        }
                        else{
                            myNewChart.datasets[0].points[count].value = 0;
                        }

                        if(race2Data[count].trim() != ""){
                            myNewChart.datasets[1].points[count].value = race2Data[count];
                        }
                        else{
                            myNewChart.datasets[1].points[count].value = 0;
                        }
                        myNewChart.update();
                        count++;
                    });
                });
            });
        }
        else{
            alert("Fill Both Race Fields with Valid Data");
        }
    });

});
</code></pre>

<p></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;form id="form"&gt;
&lt;div class="form-group col-sm-4 col-lg-4"&gt;
    &lt;select id="drivername1" class="form-control"&gt;
    &lt;/select&gt;
    &lt;select id="racename1" class="form-control"&gt;
        &lt;option value="select race"&gt;Select Race&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;

&lt;div class="form-group col-sm-4 col-lg-4"&gt;
    &lt;select id="drivername2" class="form-control"&gt;
    &lt;/select&gt;
    &lt;select id="racename2" class="form-control"&gt;
        &lt;option value="select race"&gt;Select Race&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;

&lt;div class="form-group col-sm-4 col-lg-4"&gt;
    &lt;button id="update" type="submit"&gt;Update&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p></p>

<p>Zero Value
<a href="https://i.stack.imgur.com/qWqaB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qWqaB.jpg" alt="Zero Value"></a></p>

<p>Values Loaded
<a href="https://i.stack.imgur.com/q4kZb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q4kZb.jpg" alt="Value Loaded"></a></p>