Results 1 to 8 of 8

Thread: Chart TimeAxis display problem

  1. #1

    Default Chart TimeAxis display problem

    In 3.1.0 release Reference: examples/charts/chart.js - I modified the sample code to have Feb 08 name information in the third row instead of last as follows:

    Code:
     var store = new Ext.data.JsonStore({
            fields:['name', 'visits', 'views'],
            data: [
                {name:'1 Jul 07', visits: 245000, views: 3000000},
                {name:'1 Aug 07', visits: 240000, views: 3500000},
                {name:'1 Feb 08', visits: 620000, views: 7500000},
                {name:'1 Sep 07', visits: 355000, views: 4000000},
                {name:'1 Oct 07', visits: 375000, views: 4200000},
                {name:'1 Nov 07', visits: 490000, views: 4500000},
                {name:'1 Dec 07', visits: 495000, views: 5800000},
                {name:'1 Jan 08', visits: 520000, views: 6000000} 
            ]
        });
    And then modified the extra simple (2nd chart's ) x axis to use the TimeAxis class as follows:
    Code:
    xAxis: new Ext.chart.TimeAxis({
                   displayName: 'Interval (month/year)',
                   labelRenderer: function(date){ return date.format("M Y"); }
                })
    However, when I do that, I do not see the data on x axis appearing according to the time?
    Instead I see the following :



    I have seen a few other examples that are directly instantiating LineChart and then adding TimeAxis to the xAxis - but in this example it is being used as an xtype. ( xtype: 'linechart')

    Please can someone give me a working example using this sample code so that I can understand the usage and the concepts.

    Thanks!,
    Shivani

  2. #2

    Default Re:

    Anyone has any updates on this?

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    75

    Default

    Got the same problem...

    I'll try to specify that name is a date type in the fields definition and add a reader.

    That's the only thing I could imagine to fix this.

  4. #4
    Sencha User
    Join Date
    Jun 2008
    Posts
    75

    Default

    Worked for me!


    You need to specifiy the date format in the fields definition :

    Code:
    var fields = [ {name: 'name', type: 'date', dateFormat: 'M Y'}, ...];
    Hope that it'll work for you!

  5. #5
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,232

    Default

    glad you discovered that in the end.

    always remember:
    all raw Store data are treated as js strings by default unless an appropriate type config is specified in the Record's data.Field.

  6. #6

    Exclamation Same problem whit Ext.chart.TimeAxis

    Quote Originally Posted by mystix View Post
    glad you discovered that in the end.

    always remember:
    all raw Store data are treated as js strings by default unless an appropriate type config is specified in the Record's data.Field.
    i have the same problem but whit a stackedbarchart, the error is :
    To use a BarSeries object, the horizontal axis of the chart it appears within must be an IOriginAxis.

  7. #7
    Sencha User
    Join Date
    Mar 2011
    Posts
    2

    Default

    I tried even by supplying the dateFormat but still the same problem. Kindly check. Source code below. Thanks


    Ext.onReady(function(){


    var store = new Ext.data.JsonStore({

    fields: [{name:'Resource',type:'string'},
    {name:'Idle', type: 'date', dateFormat: 'Y m d'},
    {name:'Active',type:'date', dateFormat: 'Y m d'},
    {name:'Busy',type:'date', dateFormat: 'Y m d'},
    {name:'Down',type:'date', dateFormat: 'Y m d'}],
    data: [
    {Resource: "ColorPrinter ", Idle: '2011 03 01', Active: '2011 03 05', Busy: '2011 03 15', Down: '2011 03 26'},
    {Resource: "BW Printer ", Idle: '2011 03 03', Active: '2011 03 06', Busy: '2011 03 08', Down: '2011 03 31'},
    {Resource: "Insertor ", Idle: '2011 03 02', Active: '2011 03 03', Busy: '2011 03 20', Down: '2011 03 22'},
    {Resource: "Cuttor ", Idle: '2011 03 07', Active: '2011 03 08', Busy: '2011 03 25', Down: '2011 03 28'}
    ]
    });


    var start = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
    end = start.add(Date.DAY, 30);


    new Ext.Panel({
    renderTo: 'container',
    width: '100%',
    height: 300,
    items: {
    xtype: 'stackedbarchart',
    store: store,
    width: '100%',
    height: 300,
    yField: 'Resource',


    xAxis: new Ext.chart.TimeAxis(
    { labelRenderer: function(date) { return date.format('Y m d');}
    }),



    yAxis: new Ext.chart.CategoryAxis({
    labelSpacing: 5

    }),
    series: [{
    xField: 'Idle',
    displayName: '[Hrs] Idle'
    },{
    xField: 'Active',
    displayName: '[Hrs] Active'
    },{
    xField: 'Busy',
    displayName: '[Hrs] Busy'
    },{
    xField: 'Down',
    displayName: '[Hrs] Down'
    }]
    }
    });
    });

  8. #8
    Sencha User
    Join Date
    Mar 2011
    Posts
    2

    Default

    Nice article, could you kindly give an example of stackedbarchart using TimeAxis? For me the stackedbarchart is working fine if I follow NumericAxis, CategoryAxis but when I try w/ TimeAxis w/ format, the chart is not being displayed. I have also given stackingEnable:true option. Appreciate your effort/reply. Thanks

Posting Permissions

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