1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    warreninbjcn is on a distinguished road

      0  

    Default Where can I find detail for charting theme?

    Where can I find detail for charting theme?


    I read from http://www.sencha.com/learn/drawing-and-charting/ talking about customizing the theme for chart widget. I am wondering where I can find detailed configuration docs for customization. I believe the config items in the example is not complete. Is there a complete one? The theme config example is listed below:

    Code:
    {
        axis: {
            fill: '#000',
            'stroke-width': 1
        },
        axisLabelTop: {
            fill: '#000',
            font: '11px Arial'
        },
        axisLabelLeft: {
            fill: '#000',
            font: '11px Arial'
        },
        axisLabelRight: {
            fill: '#000',
            font: '11px Arial'
        },
        axisLabelBottom: {
            fill: '#000',
            font: '11px Arial'
        },
        axisTitleTop: {
            fill: '#000',
            font: '11px Arial'
        },
        axisTitleLeft: {
            fill: '#000',
            font: '11px Arial'
        },
        axisTitleRight: {
            fill: '#000',
            font: '11px Arial'
        },
        axisTitleBottom: {
            fill: '#000',
            font: '11px Arial'
        },
        series: {
            'stroke-width': 1
        },
        seriesLabel: {
            font: '12px Arial',
            fill: '#333'
        },
        marker: {
            stroke: '#555',
            fill: '#000',
            radius: 3,
            size: 3
        },
        seriesThemes: [{
            fill: '#C6DBEF'
        }, {
            fill: '#9ECAE1'
        }, {
            fill: '#6BAED6'
        }, {
            fill: '#4292C6'
        }, {
            fill: '#2171B5'
        }, {
            fill: '#084594'
        }],
        markerThemes: [{
            fill: '#084594',
            type: 'circle'
        }, {
            fill: '#2171B5',
            type: 'cross'
        }, {
            fill: '#4292C6',
            type: 'plus'
        }]
    }

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    Vote Rating
    83
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    HI!

    as an example for providing colors,

    Code:
    var colors = ['rgb(47, 162, 223)',
                      'rgb(60, 133, 46)',
                      'rgb(234, 102, 17)',
                      'rgb(154, 176, 213)',
                      'rgb(186, 10, 25)',
                      'rgb(40, 40, 40)'];
        Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
            constructor: function(config) {
                Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
                    colors: colors
                }, config));
            }
        });
    You can find the above code live example at http://dev.sencha.com/deploy/ext-4.0...wserStats.html

    You can find detailed specifications about theming here,
    docs.sencha.com/ext-js/4-0/#/api/Ext.chart.theme.Theme
    http://docs.sencha.com/ext-js/4-0/#!...g_and_charting
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    warreninbjcn is on a distinguished road

      0  

    Default


    Thanks sword-it for your reply.
    I have two questions:
    1. Is there a document with detailed descriptions to these "axisLabelLeft", "axisTitleLeft" configurations while listing all available config items available in customizing a theme?
    2. Is there a way to put the legend to the top-left corner of the chart while the chart can show properly? I want the legend to be displayed as it does with configuration position: 'top', just make it goes to the left end. I've tried position: 'float' with x and y settings, but the legend overlaps with the chart, or any way to set margin to the plot area? I've also tried to set margin of the whole chart, but to avoid overlapping, the legend goes out of the chart and will not render properly.

  4. #4
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    Vote Rating
    83
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi!

    by using axes in charts axis position, type, style can be configured. The axes are defined in an array of configuration objects where the type, field, grid and other configuration options can be set.
    You can find detailed specification on axis here:-

    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.chart.axis.Axis

    as an example, you can use following:-

    Code:
    axes: [{
        type: 'Category',
        position: 'bottom',
        fields: ['name'],
        title: 'Month of the Year',
        grid: true,
        label: {
            rotate: {
                degrees: 315
            }
        }
    }]
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    warreninbjcn is on a distinguished road

      0  

    Default


    Hi sword-it,
    Yes I can make basic configurations with axis configuration object, but if I need to tweak more on the axis, I will need to go to theme, right? For example axis label and title font family, size and color, those are defined theme. And I will need to define a new theme class extending the 'Base' theme or just 'Theme'.
    I would like to know if there is any way I can find the documentation describing details that I can find details in extending the Ext.chart.theme.Theme class.
    I see in the document it says "The theming configuration can be very rich and complex" so I assume the items in my post at the top is not complete and there are some other items can be modified such as items for the plotting area.
    I don't know if my assumption stands or those are the full list of the available items.

  6. #6
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    Vote Rating
    83
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    HI!

    check this link, may be it will helpful to you.
    page consists all the properties and steps used to make custom theme

    http://docs.sencha.com/ext-js/4-0/source/Theme.html
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar