1. #1
    Sencha User
    Join Date
    Mar 2009
    Posts
    1
    Vote Rating
    0
    respect is on a distinguished road

      0  

    Default Unanswered: How to restrict the drawing region in line chart

    Unanswered: How to restrict the drawing region in line chart


    Hi,

    I implemented zoom-in for line chart using extjs 4.2.1.

    When I zoom in the graph, I'd like to see the lines only inside of yellow box(1st quadrant), and I don't want to see the lines outside the axes (as shown in the red boxes).

    I understand that it is reasonable to show minus values or similar, but it's not what I want.

    Is there any way to do that?

    Thanks,
    Hojae

    Screen Shot 2013-08-11 at 4.21.00 PM.jpg

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,837
    Answers
    155
    Vote Rating
    69
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    I created an example from the docs but I am unable to reproduce this issue. Instead for me, the line is stopped short of the edge at the last point that falls within the selection. Does the following code run off the edge for you too? If so, in what browser are you seeing this?
    Code:
    Ext.define('WeatherPoint', {
        extend: 'Ext.data.Model',
        fields: ['temperature', 'date']
    });
    
    
    var store = Ext.create('Ext.data.Store', {
        model: 'WeatherPoint',
        data: [
            { temperature: 58, date: new Date(2011, 1, 1, 8) },
            { temperature: 63, date: new Date(2011, 1, 1, 9) },
            { temperature: 73, date: new Date(2011, 1, 1, 10) },
            { temperature: 78, date: new Date(2011, 1, 1, 11) },
            { temperature: 81, date: new Date(2011, 1, 1, 12) }
        ]
    });
    
    
    
    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 400,
        height: 300,
        store: store,
        axes: [
            {
                title: 'Temperature',
                type: 'Numeric',
                position: 'left',
                fields: ['temperature'],
                minimum: 0,
                maximum: 100
            },
            {
                title: 'Time',
                type: 'Time',
                position: 'bottom',
                fields: ['date'],
                dateFormat: 'ga'
            }
        ],
        series: [
            {
                type: 'line',
                xField: 'date',
                yField: 'temperature'
            }
        ],
        enableMask: true,
        mask: 'horizontal',
        listeners: {
            select: {
                fn: function(me, selection) {
                    me.setZoom(selection);
                    me.mask.hide();
                }
            }
        }
    });

Thread Participants: 1

Tags for this Thread