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

      0  

    Default How to express the points which should not be showed in a single line?

    How to express the points which should not be showed in a single line?


    I want to split a line which is in a chart to several segments. This is my test sample.

    Code:
    <html>
    <head>
    <title>test-grid</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">
    
    var chart = null;
    var fromDate = null;
    var toDate = null;
    
    var store = null;
    
    function generateStore() {
        fromDate = new Date(2013,2,8,11,0,0);
        toDate = new Date(2013,2,8,11,1,0);
    
        var coord = [];
    
        coord.push('x');
        coord.push('y');
    
        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 = {};
    
            obj.x = new Date(fromDate.getTime() + 1000 * i);
            obj.y = i%10;
    
            // if ((i+1) % 15 == 0) {
            //     obj.y = null;
            // } 
            
            data.push(obj);
        }
    
        store.loadData(data);
    }
    
    Ext.onReady(function () {
    
        generateStore();
        
        chart = Ext.create('Ext.chart.Chart', {
            renderTo: 'chart',
            width: 800,
            height: 200,
            store: store,
            shadow: false,
            axes: [{
                title: 'y',
                type: 'Numeric',
                position: 'left',
                fields: ['y'],
                minimum: 0,
                maximum: 10
            },{
                title: 'x',
                type: 'Time',
                position: 'bottom',
                fields: ['x'],
                step: false,
                dateFormat: 'Y-m-d H:i:s',
                fromDate: fromDate,
                toDate: toDate
            }],
            series: [
                {
                    type: 'Line',
                    xField: 'x',
                    yField: 'y',
                    axis: ['left', 'bottom'],
                    showMarkers: false,
                    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)
                            );
                        }
                    }
                }
            ]
        });
    
        
    });
        
    
    </script>
    
    </head>
    <body>
    
      <div id="chart"></div>
    
    </body>
    </html>
    2013-05-21_143407.png
    I have tried to set some point's value to null, just like the codes below. But it clearly shows that can't solve the problem from the capture picture.

    Code:
    if ((i+1) % 15 == 0) {
        obj.y = null;
    }
    2013-05-21_143047.png
    Is anyone had encountered the problem? Any help will be 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


    See if using false is what you're after.

    Code:
    if ((i+1) % 15 == 0) {
        obj.y = false;
    }

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

      0  

    Default


    Yes, It works, and it is the effect I want, thank you so much!

Thread Participants: 1