Results 1 to 3 of 3

Thread: Chat Axis Labeling

  1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    2
    Vote Rating
    0
      0  

    Default Chat Axis Labeling

    I have a chart with a numeric y-axis that ranges from 0-20. Instead of displaying the numbers, I would like to display a word inside of the grid on the horizontal grid line that corresponds to the number. At the value 5, I would like to display "Average", at 10, "Good", at 15, "Excellent", at 20, "Don't Miss It". I would like these labels to be constant even if no values in the chart reach that number.

    Any thoughts how to do this?

    My chart thus far
    Code:
    {
        xtype: 'chart',
        height: '100%',
        id: 'bestTimesChart',
        itemId: 'mycartesianchart',
        store: 'bestChartStore',
        axes: [{
            type: 'numeric',
            fields: [
                'level'],
            increment: 1,
            maximum: 20,
            minimum: 0,
            position: 'left'
        }, {
            type: 'numeric',
            fields: [
                'time'],
            increment: 1
        }],
        series: [{
            type: 'line',
            smooth: true,
            labelField: 'time',
            xField: 'time',
            yField: 'level'
        }]
    }

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    You can add your own sprites to the surface but you will have to manage everything from location to rotation. There isn't an out of the box way to do that.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    2
    Vote Rating
    0
      0  

    Default Axis Label Renderer

    I noticed in Ext JS I could run a renderer on the label of the chart axis and it gives me exactly what I want. I just modified the X value to display the label inside the grid. The same code doesn't work in Sencha 2.1. Any thoughts?

    Also, I'm using Architect 2 and the renderer function on the chart doesn't allow me to add any parameters. Not sure how to approach this issue.


    Code:
       axes: [{
                    type: 'numeric',
                    grid: true,
                    position: 'left',
                    x:100,
                    fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
                    title: 'Sample Values',
           		renderer: function(g) {
                           if(g==60) return "Poor";
                          if(g==100) return "Average";
                           return "";
                        },
                    grid: {
                        odd: {
                            opacity: 1,
                            fill: '#ddd',
                            stroke: '#bbb',
                            'lineWidth': 1
                        }
                    },
                    minimum: 0,
                    adjustMinimumByMajorUnit: 0
     }],

Tags for this Thread

Posting Permissions

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