1

I have seen similar posts, but can not figure out how to properly do it. Many answers have suggested to overwrite the scale, but display of chart gets messed up. Main issue is that my data is too much, its currently reaching 180000 on Y-axis, and with passage of time it might increase further or even drop.

How do I optimize it? Is this possible to just hard code starting point to 0, and leave the steps etc to default? If not, then how to optimize this much data?

I'm attaching a screen short which I got after using this answerenter image description here

I have tried different scaleSteps and scaleStepWidth values, but its not scaling well. I can not change the over all graph size, because that would mean changing the whole page.

My HTML code is given below

{% load static %}
<script src="{% static 'Chart.js' %}"></script>





<canvas align=center id='{{ module }}' height="250" width="250"></canvas>


<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*4000)};
        var data2 ={{stats_dates|safe}};
        var lineChartData6 = {
            labels : {{stats_dates|safe}},
            datasets : [
                  {
                    label: "My Dataset",
                    fillColor : "rgba(255,0,255,0.3)",
                    strokeColor : "rgba(255,0,255,1)",
                    pointColor : "rgba(255,0,255,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(255,0,255,1)",
                    data : {{count}}
                }
            ]

        }





    var ctx = document.getElementById('{{ module }}').getContext("2d");
    ctx.canvas.width = 500;
    ctx.canvas.height = 450;
    window.myLine = new Chart(ctx).Line(lineChartData6, {
        responsive: false,
        scaleOverride : true,
        scaleSteps : 500,
        scaleStepWidth : 500,
        scaleStartValue : 0

    });



</script>
Community
  • 1
  • 1
blackfyre
  • 2,549
  • 5
  • 39
  • 58
  • if you do something like skip marking some points on X-axis, reduce the radius of data points shown on graph and on hover show data point with tool tip & enlarged data point. then will it be good solution to implement ? check this https://www.google.co.in/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=share%20price%20gnfc – sandyJoshi Dec 16 '16 at 06:12
  • You mean skip them on Y-axis, right? And your hyperlink is leading to unrelated topic, could you please re-send link to let me know what you were referring to. Thanks – blackfyre Dec 16 '16 at 08:25
  • My link was for seeing an example of chart with huge data set. In this chart they have done for X- axis but similarly you can also do for Y-axis. Does this solution work for you ? – sandyJoshi Dec 16 '16 at 08:31
  • please create a [MVCE](http://stackoverflow.com/help/mcve) fiddle – Dennis Baizulin Dec 18 '16 at 14:36
  • 1
    maybe try it using http://dygraphs.com/ or http://www.highcharts.com/stock/demo to handle huge dataset. – claudios Dec 20 '16 at 02:59

0 Answers0