Results 1 to 2 of 2

Thread: Problem with Start and End Dates on a chart

  1. #1
    Sencha Premium Member
    Join Date
    May 2014
    Posts
    1

    Post Problem with Start and End Dates on a chart

    I am working in an Ext 3 environment and sandboxing in Ext4 charting tools.

    In my chart, I have specific start and end dates for my Time Axis. I also have specific dates in my store. When I add the series to the chart, it replaces the start and end dates of the store with the start and end dates for the time axis.

    What am I doing wrong?

    Code:
            var ext3Panel = new Ext.Panel({
                 title: 'Graph View'
             });
             var store1 = new Ext4.data.JsonStore({ 
                fields: ['date', 'data1', 'data2', 'data3'],
                data: [ 
      {'date': '8/8/2014', 'data1': 10, 'data2': 0, 'data3': 10 },        
      {'date': '8/13/2014', 'data1': 7, 'data2': 0, 'data3': 0}, 
    {'date': '8/23/2014', 'data1': 5, 'data2': 0, 'data3': 0}, 
      {'date': '9/1/2014', 'data1': 2, 'data2': 0, 'data3': 0}, 
      {'date': '9/5/2014', 'data1': 27, 'data2': 0, 'data3': 0}, 
            ]
             });
               ext3Panel.on('afterrender', function () {
                 var ext4Chart = Ext4.create('Ext.chart.Chart', {
                    renderTo: ext3Panel.body.dom, 
                    width: 800,
                     height: 422, 
                    animate: true, 
                    store: store1,  
                   shadow: true, 
                    theme: 'Category1',
                     legend: { 
                        position: 'right'
                     },
                     axes: [{
                             type: 'Numeric',
                             grid: true,
                             position: 'left',
                             fields: ['data1', 'data2', 'data3'],
                             title: 'Scores',
                             grid: { 
                                odd: { 
                                    opacity: 1,
                                     fill: '#ddd',
                                     stroke: '#bbb',
                                     'stroke-width': 1
                                 }
                             },
                             minimum: 0
                         }, {
                             type: 'Time',
                             position: 'bottom',
                             fields: 'date',
                             title: 'Date',
                             dateFormat: 'm/d/Y',
                             constrain: true,
                             fromDate: new Date('8/3/2014'),
                             toDate: new Date('9/21/2014'),
                             step: [Ext4.Date.DAY, 6],
                             label: {
                                 rotate: {
                                     degrees: -44
                                 }
                             }
                         }],
                     series: [
                         {
                             type: "line",
                             highlight: {
                                 size: 7,
                                 radius: 7
                             },
                             axis: "left",
                             smooth: true,
                             xField: "date",
                             yField: "data1",
                             title: "Progress",
                             style: {
                                 connectDiscontinuousPoints: true
                             },
                             markerConfig: {
                                 type: "cross",
                                 size: 4,
                                 radius: 4,
                                 "stroke-width": 0
                             },
                         }]
                 });
                              ext3Panel.add(ext4Chart);
             });
    My apologies about the code formatting. This is my first time using this forum.

    Thanks.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    When you add the dates to the axis, you are specifying a hard range. Any better result if you just remove them and use only your data?

Posting Permissions

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