Hybrid View

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    1
    Vote Rating
    0
    jrosocha is on a distinguished road

      0  

    Default Struggling With Bar Chart

    Struggling With Bar Chart


    I'm a few days into my Architect 2 trial and I've hit a problem that the samples have not solved.

    I've a small block of code for theming a chart from your extjs tutorials (exhibit A). Now I'm not sure where this should live in the Architect world so I've added it to Application launch, on render event for my chart, etc. If I set the theme of my chart to Ext.chart.theme.Fancy or Fancy in the architect UI, the preview of the chart is not the desired effect (nothing really renders), and it goes on to tell me the object has no rendered. I've tried to peel back the onion on /src/chart/theme/Base.js but have not succeeded in getting any style other than the canned styles to effect my chart.

    Question 1. Where is it appropriate to put the block of code to create a theme for a chart in the Architect 2 fashion? I've tried Application launch, on render event for the chart, etc.
    Question 2. How do I apply the theme?
    Question 3. What is wrong with the theme I listed below? From http://cdn.sencha.com/ext-4.1.1a-gpl...rts/Column2.js with a minor change to the color list for learning.

    Exhibit A
    Code:
        var colors = ['#CCCCCC',
                      '#DDDDDD',
                      '#BBBBBB',
                      '#CCCCCC',
                      '#CCCCCC'];
        
        var baseColor = '#eee';
        
        Ext.define('Ext.chart.theme.Fancy', {
            extend: 'Ext.chart.theme.Base',
            
            constructor: function(config) {
                this.callParent([Ext.apply({
                    axis: {
                        fill: baseColor,
                        stroke: baseColor
                    },
                    axisLabelLeft: {
                        fill: baseColor
                    },
                    axisLabelBottom: {
                        fill: baseColor
                    },
                    axisTitleLeft: {
                        fill: baseColor
                    },
                    axisTitleBottom: {
                        fill: baseColor
                    },
                    colors: colors
                }, config)]);
            }
        });

  2. #2
    Sencha - Architect Dev Team jjohnston's Avatar
    Join Date
    Sep 2010
    Posts
    567
    Vote Rating
    20
    jjohnston will become famous soon enough jjohnston will become famous soon enough

      0  

    Default


    Question 1: At this time I'd recommend putting the code in a JS Resource - see http://docs.sencha.com/architect/2/#...rces-section-3

    Ideally Architect would let you extend the base theme and choose colors etc. that way, but we're not there yet unfortunately.

    Question 2: In the config for the chart, you'll see a 'theme' config. Set it to the name of your theme, in your case 'Fancy'.

    Question 3: Nothing appears to be wrong with it -- when I add your code into a JS Resource and set the chart's 'theme' config to reference it, I see your light gray colors applied as expected when previewing it in the browser: http://cl.ly/image/1O0x322y3j1e

    Perhaps what is confusing you is that custom code cannot currently be run within Architect's canvas. Since your theme is implemented via custom code, it will therefore not be applied within the canvas -- you'll have to save and preview your project to see it applied. We are working to fix this limitation in a future release.

    I hope that helps.
    Jason Johnston
    @lojjic
    Sencha Architect Development Team

Thread Participants: 1