1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    8
    Vote Rating
    0
    yangjie.green is on a distinguished road

      0  

    Default How many points can be drawn up in a chart?

    How many points can be drawn up in a chart?


    Hi, I wrote a test case which is used to determine which factors will influence the number of points can be drawn up on a chart, This is the result from my test:

    Factors: the number of points which appear on the x-axis, the width of the chart, the width of the y-axis title

    Factors unrelated: the number of lines, the x-axis time range

    This is my test case code:
    Code:
    <html>
    <head>
    <title>test-max-amount-of-point</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="../ext-4.0.7-gpl/resources/css/ext-all.css">
    <script type="text/javascript" src="../ext-4.0.7-gpl/bootstrap.js"></script>
    
    
    <script type="text/javascript">
    
    // test variable
    var count = 370;
    var maxFieldY = 2;
    var    fromDate = new Date(2013, 2, 8, 11, 0, 0);
    var    toDate = new Date(2013, 2, 8, 11, 10, 0);
    
    var width = 800;
    var minimum = 0;
    
    var chart = null;
    var store = null;
    
    var colors = [ "#FF0000", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"];
    
    
    function generateStore() {
    
        var coord = [];
    
        coord.push('x');
        for (var i = 0; i < maxFieldY; i++) {
            var yField = 'y';
            
            yField = yField + i;
            
            coord.push(yField);
        }
    
        if (store == null) {
            store = Ext.create('Ext.data.Store', {
                fields: coord
            });
        }
    
        // var count = (toDate.getTime() - fromDate.getTime()) / 1000;
        var data = [];
    
        for (var i = 0; i < count; i++) {
            var obj = {};
            var endObj = {};
    
            obj.x = new Date(fromDate.getTime() + 1000 * i);
            endObj.x = new Date(fromDate.getTime() + 1000 * (i+1));
    
            for (var j = 0; j < maxFieldY; j++) {
                var objKey = 'y' + j;
    
                obj[objKey] = minimum + i%10 + j*2;
                endObj[objKey] = obj[objKey];
            }        
    
            data.push(obj);
            data.push(endObj);
        }
    
        store.loadData(data);
    }
    
    Ext.onReady(function () {
    
        generateStore();
    
        var me = {
            renderTo: 'chart',
            width: width,
            height: 200,
            store: store,
            shadow: false,
            
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['y0'],
                grid: true,
                minimum: minimum,
                maximum: minimum + 15
            },{
                type: 'Time',
                position: 'bottom',
                fields: ['x'],
                grid: true,
                step: false,
                dateFormat: 'Y-m-d H:i:s',
                fromDate: fromDate,
                toDate: toDate
            }]
        };
    
        me.series = [];
    
        // 添加线条
        for (var i = 0; i < maxFieldY; i++) {
            var title = "";
    
            var yField = 'y';
            
            yField = yField + i;
            
            me.series.push({
                type: 'line',
                xField: 'x',
                yField: yField,
                title: title,
                showMarkers: false,
                axis: ['left', 'bottom'],
                style: {
                    stroke: colors[i%10],
                    'stroke-width': 0
                },
                tips: {
                    trackMouse: true,
                    width: 200,
                    height: 35,
                    layout: 'fit',
                    renderer: function(storeItem, item) {
                        var curDate = null;
    
                        curDate = item.value[0];
    
                        var formatDate = Ext.Date.format(
                            curDate,
                            'Y-m-d H:i:s'
                        );
    
                        var value = item.value[1];
    
                        this.setTitle(
                            'date: ' + formatDate +
                                '<br>' +
                                'value:' + value.toFixed(3)
                        );
                    }
                }
            });
        }
        
        chart = Ext.create('Ext.chart.Chart', me);
    });
        
    
    </script>
    
    </head>
    <body>
    
      <div id="chart"></div>
    
    </body>
    </html>
    2013-05-24_173135.png

    If I alter the follow code, change the value 370 to 371, the chart won't display any more.
    Code:
    var count = 370;
    2013-05-24_173115.png
    But I alter the date range of the x-axis, it is not affected.
    2013-05-24_174236.png

    So, How can I know the maxinum points can be drawn up in a chart, or Anyone know the relationship between the number points and the width of chart?

    Any help is appreciated, Thank you!

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,800
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    I suspect you'll just have to test out how many points will fit on a given chart. There's not a technical limit form the framework as to how many points you can render in a chart / series, but there may be practical limitations depending on browser / available chart real estate.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    8
    Vote Rating
    0
    yangjie.green is on a distinguished road

      0  

    Default


    Thank you for your replying!

    Maybe you are right, that's the browser's problem. But I still have some confusions. Because I have tested from firefox, ie6, chrome, they all have the same problem. I think that ExtJS draw chart by SVG(firefox, chrome) or VML(IE) method, It won't be so accurately in two different methods.

    I don't care much about the relationship any more, I just want to accomplish the work first, so I define the formula roughly by several test case.

    Code:
    count = widthOfChart - widthOfYAxisTitle
    Actually, I don't know how to get the width of y-axis title, just set it to 100.

    Thank you very much again! Would you mind I add you to my friend list?

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,800
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Sure.
    And working granularly with SVG can be tricky - tough to evaluate measurements of those elements. I haven't played with VML directly, but have with SVG and found it quite challenging.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

Thread Participants: 1

Tags for this Thread