Results 1 to 5 of 5

Thread: Chart listner

  1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    46
    Answers
    3

    Default Answered: Chart listner

    i have a bar chart and i'm tring to click on a bar and have something happen. i've tried the itemmouse events but nothing seems to work. looked at a lot of samples online. now i'm trying it with app.controller.
    here is some of the code. can someone tell me what i'm doing wrong? when i click bar nothing happens.
    i've left comments in for some things i tried.

    Ext.define('Fiddle.controller.MyController', {
    extend: 'Ext.app.Controller',
    alias: 'controller.foo',
    init: function() {
    this.control({
    'chart': {
    boxready: function (chart) {
    var series = chart.series.items;
    Ext.Array.each(series, function (theSeries) {
    this.relayEvents(theSeries, ['itemclick']);
    }, chart);
    },
    itemclick: function (seriesItem) {
    console.log(seriesItem);
    Ext.Msg.alert('Fiddle', 'Series item clicked');
    },
    itemmouseup: function (seriesItem) {
    console.log(seriesItem);
    Ext.Msg.alert('Fiddle', 'Series item clicked');
    }
    }
    });
    }
    });


    var chart = Ext.create('Ext.chart.Chart', {
    controllers: ['MyController'],
    id: 'labChart',
    renderTo: 'chartDiv',
    width: gridMaxwidth,
    height: 695,
    border: false,
    background: '#FFFFFF',
    xtype: 'cartesian',
    // interactions: 'itemhighlight',
    // colors: ["#8064A2", "#9BBB59", "#C0504D", "#4F81BD"],

    legend: {
    id: 'labChartLegend',
    docked: 'top',
    scrollable :false
    },
    insetPadding: {
    left: -20,
    right: 40,
    bottom: -20
    },
    bodyStyle: 'border:0px none;',
    store: chartStore,
    axes: [{
    type: 'numeric',
    position: 'left',
    titleMargin: 50,
    grid :{
    odd: {
    stroke: '#ccc'
    },
    even: {
    stroke: '#ccc'
    }
    },
    adjustByMajorUnit: true,
    fields: ['completeCount', 'partialCount', 'inProcessCount', 'scheduledCount'],
    label: {
    fontSize: 13
    },
    title: {
    text: 'Req Count',
    fontSize: 15,
    fontFamilies: 'Arial',
    fontWeight:'bold'
    },
    minimum: 0
    }, {
    type: 'category',
    position: 'bottom',
    titleMargin: 50,
    label: {
    fontSize: 13
    },
    title: {
    text: 'Draw Date',
    fontSize: 15,
    fontFamilies: 'Arial',
    fontWeight:'bold'
    },

    fields: ['collectionDate']
    }],

    series: [{
    type: 'bar',
    // interactions: ['itemhighlight'],
    // highlight: {
    // fillStyle: '#619fff',
    // strokeStyle: 'black'
    // },

    axis: 'left',
    title: [ ' Complete', ' Partial Complete', ' In Process', ' Scheduled'],
    xField: 'collectionDate',
    yField: ['completeCount', 'partialCount', 'inProcessCount', 'scheduledCount'],
    stacked: false,
    style: {
    maxBarWidth: 60
    },
    label: {
    display: 'outside',
    field: [ 'completeCount', 'partialCount' ],
    orientation: 'horizontal',
    fontSize: 12,
    fontWeight:'bold',
    calloutColor: 'rgba(0,0,0,0)',
    fill: '#666666'
    },
    // plugins: {
    // ptype: 'chartitemevents',
    // moveEvents: true
    // },
    // listeners: {
    // itemclick: function(chart, item) {
    // alert('click');
    // console.log(chart, item);
    // }
    // },

    // listeners: {
    // 'itemmouseup': function(item) {
    // console.log(item);
    // },
    // 'itemmousedown': function(item) {
    // alert("wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww");
    // console.log(item);
    // }
    // },


    // listeners: {
    // itemclick: function(item) {
    //
    //// var series = barChart.series.get(0);
    //// gridPanel.getSelectionModel().select(Ext.Array.indexOf(series.items, item));
    // }
    // },

    tooltip: {
    trackMouse: true,
    style: 'background: #CDDFF2;border-color: #99BBE8;',
    border: true,
    bodyStyle: 'font: bold 12px Arial, Verdana, Helvetica, sans-serif; color:#15428B;',
    renderer: function(storeItem, item) {
    this.setHtml(storeItem.get(item.field));
    }
    }

    }]

    });

  2. So you tried the ItemEvents plugin?
    http://docs.sencha.com/extjs/5.1.1/a...temEvents.html

  3. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    So you tried the ItemEvents plugin?
    http://docs.sencha.com/extjs/5.1.1/a...temEvents.html

  4. #3
    Sencha User
    Join Date
    Jul 2010
    Posts
    46
    Answers
    3

    Default yes i've tried plugin

    Quote Originally Posted by Gary Schlosberg View Post
    So you tried the ItemEvents plugin?
    http://docs.sencha.com/extjs/5.1.1/a...temEvents.html
    i tried that plugin.
    in above code it was commented out because i could not get it to work and tried using controller.

    version i'm using is 5.1.0.

    i want the click on the series(column). do i need to have items: { ? the example does not


    i tried with itemclick and itemmousedown.

    // plugins: {
    // ptype: 'chartitemevents',
    // moveEvents: true
    // },
    //
    // listeners: {
    // itemclick: function(chart, item) {
    // alert('click');
    // console.log(chart, item);
    // }
    //
    // }
    // }

    this example seems to be doing exactly what i want: https://fiddle.sencha.com/#fiddle/g38
    this one with pie chart well : https://fiddle.sencha.com/#fiddle/eud

  5. #4
    Sencha User
    Join Date
    Jul 2010
    Posts
    46
    Answers
    3

    Default

    ok it works with plugin. i had plugin in series and not in chart definition.

    Thank you!

  6. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Ah, so you did -- sorry for not catching that. Glad to hear you're up and running.

Similar Threads

  1. grid listner
    By a7med.she7ata in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 1 Nov 2010, 2:18 AM
  2. Add Listner to TreeNodes
    By saurabhsingh in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 6 Jul 2009, 12:09 PM
  3. DatePicker Listner
    By extjslearner in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 16 Feb 2009, 9:07 PM
  4. Image Listner
    By kalpan in forum Ext GWT: Help & Discussion (1.x)
    Replies: 1
    Last Post: 20 Oct 2008, 1:29 PM

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
  •