Results 1 to 6 of 6

Thread: Markers types not working (e.g. diamond, cross, ...)

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    30

    Default Markers types not working (e.g. diamond, cross, ...)

    REQUIRED INFORMATION




    Ext version tested:
    • Sencha Touch 2.0.0
    • Touch Charts 2.0.0b


    Browser versions tested against:
    • Google Chrome 17.0.963.83


    Description:
    • The markerConfig type property (on series) is not working properly, when you use type such as diamond or cross.


    Steps to reproduce the problem:
    • Use the code below


    The result that was expected:
    • Diamond markers


    The result that occurs instead:
    • Circle markers


    Test Case:


    Code:
    Ext.setup({
        onReady: function() {
            var chart = new Ext.chart.Chart({
                store: new Ext.data.JsonStore({
                    fields: ['month', 'weight'],
                    data: [{
                        month: 'Janvier',
                        weight: 60
                    }, {
                        month: 'Fvrier',
                        weight: 70
                    }, {
                        month: 'Mars',
                        weight: 80
                    }, {
                        month: 'Avril',
                        weight: 90
                    }]
                }),
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['weight']
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['month']
                }],
                series: [{
                    type: 'line',
                    axis: 'left',
                    xField: 'month',
                    yField: 'weight',
                    markerConfig: {
                        type: 'diamond',
                        size: 10,
                        radius: 10,
                        'stroke-width': 0,
                    }
                }]
            });
    
    
            new Ext.chart.Panel({
                fullscreen: true,
                chart: chart
            });
        }
    });

    Possible fix:
    • On the drawSeries method of the class Ext.chart.series.Line there is the line the code
      Code:
      delete endMarkerStyle.type;
      (line 16075 touch-charts-debug.js). It deletes the type property but there is style a endMarkerStyle.__proto__.type sets to 'circle', thus on the line 16240, instead of being replaced by 'path', the type is still set to 'circle' and this is causing the bug. A fix would be to insert
      Code:
      delete endMarkerStyle.__proto__.style
      after the line 16075


    Operating System:
    • Mac OS X

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    From the API Docs:

    type - (String) The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square', 'image'.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    30

    Default

    I'm not talking about sprites, I'm talking about the markerConfig object that you can define for each series. And you take a look at file:///C:/Users/Matt/Desktop/touch-charts-2.0.0-beta/docs/index.html#!/api/Ext.chart.series.Line , you can see that one of the two series has a markerConfig object with the type cross. When I try to duplicate this example with the following code :
    Code:
    Ext.setup({
        onReady: function() {
            console.log('ok')
            var chart = new Ext.chart.Chart({
                store: new Ext.data.JsonStore({
                    fields: ['month', 'weight'],
                    data: [{
                        month: 'Janvier',
                        weight: 60
                    }, {
                        month: 'Fvrier',
                        weight: 70
                    }, {
                        month: 'Mars',
                        weight: 80
                    }, {
                        month: 'Avril',
                        weight: 90
                    }]
                }),
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['weight']
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['month']
                }],
                series: [{
                    type: 'line',
                    axis: 'left',
                    xField: 'month',
                    yField: 'weight',
                    markerConfig: {
                        type: 'cross',
                        size: 10,
                        radius: 10,
                        'stroke-width': 0,
                    }
                }]
            });
    
    
            new Ext.chart.Panel({
                fullscreen: true,
                chart: chart
            });
        }
    });
    I get as circle marker instead of a cross as you can see on the screenshot below :
    Capture.jpg
    But one I had the code
    Code:
    delete endMarkerStyle.__proto__.type;
    after the line 16075 I get the expected result as you can see :
    Capture.jpg

    I hope you'll read what I wrote and test it on your side.

    Thanks

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    Also from the docs:

    The markerConfig is a configuration object containing the same set of properties defined in the Sprite class.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    30

    Default

    Well I read the code and I'm pretty sure we can use types such as diamond and cross. If you look at touch-charts-debug.js at the line 16240 where the marker is created you see this :
    Code:
    Ext.chart.Shape[type](...)
    And if you go to line 5980 whe Ext.chart.Shape is defined, you see indeed the trivial types such as circle, line and square, but you also see that there are : triangle, diamond, cross, plus, arrow and drop. But you can't use these types, because of the bug I explained.

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    30

    Default

    Did you take a look at what I'm talking about ?
    Here is a simple example showing that what I am talking about is possible with my fix : http://testfactory.fr/chart/

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •