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,895
    Vote Rating
    176
    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 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,895
    Vote Rating
    176
    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 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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."