Results 1 to 3 of 3

Thread: Time chart : labelInSpan not working

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    43
    Answers
    1

    Default Time chart : labelInSpan not working

    Hi, I have define a chart using segmenter 'time' . I'm trying to display the labels onthe axis in the middle of 2 ticks. I have defined labelInSpan to true. but it is not working ??

    code for axis:


    Code:
               { 
                                type: 'time',
                                position: 'bottom',
                                fields: ['local_date_time'],
                                labelInSpan: true,
                                step: [Ext.Date.HOUR, 24],
                                fromDate: new Date('Jan 3 2014'),
                                toDate: new Date('Jan 7 2014'),
                                style: {
                                    lineWidth: 1,
                                    stroke: '#777'
                                },
                                title: {text:'test', fontSize: 20},
                                grid: {
                                    stroke: '#999999',
                                    lineJoin: 'miter',
                                    miterLimit: 5
                                }
                            },

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    4,108
    Answers
    342

    Default

    Hard to tell from the info you have provided? Does the chart display? Are there any errors in the console? I did not find any existing bugs in Jira. Put together a working test case in fiddle and I will take a look at it. https://fiddle.sencha.com/#home
    Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services [email protected]

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    43
    Answers
    1

    Default

    Thanks fmoseley for looking at it.


    Since I have given up in using time segmenter. I'm trying to create a graph like the one below. I have data for every 2 hours in the day But I only want to see the day on the graph and 4 minor ticks. I don't think anymore the labelInSpan is suitable for this.
    Graph.jpg

    But I still have issues. I came back to basic with a numeric segmenter. See my fiddle: https://fiddle.sencha.com/#fiddle/2j3

    I had to debugg the minor ticks. and major ticks.
    In As you can see in the fiddle, the ticks don't match the change of day. (where the arrows are above 30 it is midnight and there is no minor ticks.)

    To have the minor ticks I have to do in touch\src\chart\axis\sprite\Axis.js :
    Code:
    minorTicks: true //  (instead of false )
    To get the majorticks matching exactly the segmentation i wanted i had to do in touch\src\chart\axis\layout\Continuous.js :

    Code:
        snapEnds: function (context, min, max, estStepSize) {
            var segmenter = context.segmenter,
                axis = this.getAxis(),
                minimum = axis.getMinimum(),
                maximum = axis.getMaximum(),
                majorTickSteps = axis.getMajorTickSteps();
            var out = majorTickSteps && Ext.isNumber(minimum) && Ext.isNumber(maximum) && segmenter.exactStep ?
                    segmenter.preferredStep(min, estStepSize): //CUSTOM segmenter.exactStep(min, (max - min) / majorTickSteps) : NOT WORKING!!!
                    segmenter.preferredStep(min, estStepSize),
                unit = out.unit,
                steps = segmenter.diff(min, max, unit) + 1,
                step = majorTickSteps ? (majorTickSteps / out.unit.scale) : out.step , //CUSTOM out.step
                from = majorTickSteps ? (segmenter.align(min, step, unit) + 1) : segmenter.align(min, step, unit); //CUSTOM segmenter.align(min, step, unit)
    
            return {
                min: segmenter.from(min),
                max: segmenter.from(max),
                from: from,
                to: segmenter.add(from, steps * step, unit),
                step: step,
                steps: steps,
                unit: unit,
                get: function (current) {
                    return segmenter.add(this.from, this.step * current, unit);
                }
            };
        },
    This way closer to Extjs process and worked better, at least for me. The major steps are where i want them the be.

    I'm struggling now to get the day appearing in the middle of 2 major ticks. I know how to get the proper name using the renderer but the positioning is a but tricky.

    DO you have a better way of doing the graph?

    Thanks for your feedback.

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
  •