Results 1 to 2 of 2

Thread: Labels in x axis overlap - Highchart on EXTJS 3 panel

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    1
    Vote Rating
    0
      0  

    Default Labels in x axis overlap - Highchart on EXTJS 3 panel

    Hi all,
    I am trying to implement a Highchart line graph with a datetime x axis on an EXTJS 3 panel so I am using extjs adapter and all the stuff provided on Sencha forums.
    I am facing a very weird problem. All tick labels on my x axis are in the same position so they overlap. I think it is better to look at the picture attached.

    Also, here you have the code I am working with.

    Code:
    var store = new Ext.data.JsonStore({
           url: '/graph',
           fields: [
                {name: 'datamesura', type: 'int'},
                {name: 'despl_hor', type: 'float'},
                {name: 'despl_ver', type: 'float'}
           ],
           root: 'dades'
         });
    
         var datastore_task = {
           run: function() {
             store.load();
           }
         };
    
         Ext.TaskMgr.start(datastore_task);
    
         Ext.QuickTips.init();
         var chart;
    
         chart = new Ext.ux.HighChart({
            series: [{
                    type: 'spline',
                    dataIndex: 'despl_hor',
                    name: 'Desplaament horitzontal'
                },{
                    type: 'spline',
                    dataIndex: 'despl_ver',
                    name: 'Desplaament vertical'
                }],
            height: 500,
            width: 700,
            store: store,
            animShift: true,
            xField: 'datamesura',
            chartConfig: {
                chart: {
                    marginRight: 210,
                    marginBottom: 120,
                    zoomType: 'xy'
                },
                toolbar: {
                    itemStyle: {
                        color: '#4572A7',
                        cursor: 'pointer'
                    },
                    layout: {
                        xPosition: 'right',
                        yPosition: 'top',
                        x: 0,
                        y: -10
                    }
                },
                title: {
                    text: 'Prismes',
                    x: -20
                },
                subtitle: {
                    text: 'Desplaament',
                    x: -20
                },
                xAxis: [{
                        title: {
                            text: 'Data',
                            margin: 20
                        },
                        labels: {
                            rotation: 270,
                            y: 35
                        },
                        type: 'datetime'
                    }],
                yAxis: [{
                    title: {
                        text: 'Valor'
                    },
                    plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                }],
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: 0,
                    y: 100,
                    borderWidth: 0
                }
            }
        });
    
        new Ext.Window({
            title: 'Example',
            layout: 'anchor',
            items: [chart]
        }).show();
    Graph and time scale are being rendered properly. Even dates are correct in tooltips when I rollover any point. But as you see, all labels are in the beggining of x axis.

    Data is coming from a JSON file in a format like this.

    Code:
    {"dades":[{"datamesura":1305158400000,"despl_hor":0,"despl_ver":0},{"datamesura":1305590400000,"despl_hor":0.85509233483876,"despl_ver":0.7406906575},{"datamesura":1305763200000,"despl_hor":0.40065251939804,"despl_ver":0.3806685951},{"datamesura":1306195200000,"despl_hor":1.3354238226121,"despl_ver":0.3883164125},{"datamesura":1306368000000,"despl_hor":1.2300886025811,"despl_ver":0.3028934962},{"datamesura":1306800000000,"despl_hor":0.76491207579695,"despl_ver":0.7382504417},{"datamesura":1306972800000,"despl_hor":0.97067811781249,"despl_ver":0.3934538156},{"datamesura":1307404800000,"despl_hor":0.99251776941272,"despl_ver":0.1344402012},{"datamesura":1307577600000,"despl_hor":1.7576987265171,"despl_ver":-0.0731718418},{"datamesura":1308009600000,"despl_hor":1.7982043839063,"despl_ver":0.8377618489},{"datamesura":1308182400000,"despl_hor":1.6815243145135,"despl_ver":0.6510250418},{"datamesura":1308614400000,"despl_hor":1.4625103263909,"despl_ver":0.2423211682},{"datamesura":1308787200000,"despl_hor":1.059558961408,"despl_ver":0.9443423224},{"datamesura":1309219200000,"despl_hor":1.8495061606277,"despl_ver":0.7814450066},{"datamesura":1309392000000,"despl_hor":1.9162507008479,"despl_ver":0.6051177109},{"datamesura":1309824000000,"despl_hor":1.7213552221723,"despl_ver":0.6680561831},{"datamesura":1309996800000,"despl_hor":1.9444381633778,"despl_ver":0.8635180524},{"datamesura":1310428800000,"despl_hor":1.6798176421267,"despl_ver":0.8274643529},{"datamesura":1310601600000,"despl_hor":1.4467543786006,"despl_ver":0.4695790538},{"datamesura":1311033600000,"despl_hor":1.4726130928727,"despl_ver":0.2477731064},{"datamesura":1311206400000,"despl_hor":1.2836033705939,"despl_ver":0.2656530857},{"datamesura":1311638400000,"despl_hor":1.5078416389993,"despl_ver":0.3320340535},{"datamesura":1312243200000,"despl_hor":1.9332533948761,"despl_ver":0.9397637894},{"datamesura":1312848000000,"despl_hor":1.2659382917425,"despl_ver":0.0425702553},{"datamesura":1313452800000,"despl_hor":1.2477477249428,"despl_ver":0.8257942379},{"datamesura":1314057600000,"despl_hor":1.8118509156661,"despl_ver":0.4792052981},{"datamesura":1314662400000,"despl_hor":1.918020654138,"despl_ver":0.5906438039},{"datamesura":1315267200000,"despl_hor":1.7023765324099,"despl_ver":0.8507942294},{"datamesura":1315872000000,"despl_hor":1.973909305414,"despl_ver":0.9492018485},{"datamesura":1316476800000,"despl_hor":1.932831196975,"despl_ver":0.8957622496},{"datamesura":1317081600000,"despl_hor":1.8232818443949,"despl_ver":1.0017163985},{"datamesura":1317686400000,"despl_hor":0.73874846050601,"despl_ver":0.5016692077},{"datamesura":1318896000000,"despl_hor":0.98500785814124,"despl_ver":0.2459143327},{"datamesura":1320192000000,"despl_hor":1.8171299009977,"despl_ver":0.695824387},{"datamesura":1321401600000,"despl_hor":1.0247267158126,"despl_ver":0.9220291425},{"datamesura":1322524800000,"despl_hor":1.7464007827529,"despl_ver":0.7178103147},{"datamesura":1323734400000,"despl_hor":1.8637498241985,"despl_ver":0.7515986697}]}
    Does anyone have a clue? I am about to give up and try another charting library even though I like Highcharts very much .

    Thanks very much. Regards,

    Toni M.

    graph.jpg

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,060
    Vote Rating
    1389
      0  

    Default

    You may want to get with the author of the adapter
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

Posting Permissions

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