ux.Media.ChartPack 2.1.2 (Fusion, OFC2, amChart) released.

**adammascherin** · 31 May 2011 8:49 AM

Hi again,
Is there a specific setting for the 'sliceclick' listener to work on pie charts? It doesn't work for pie charts for me. Am I missing something. Nothing happens.

Here my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>chartpack test</title>
		<link rel="stylesheet" type="text/css" href='ext-all.css' />
		<script type="text/javascript" src=ext-base-debug.js'></script>
		<script type="text/javascript" src='ext-all-debug.js'></script>
		<script type="text/javascript" src='uxamchartpak-debug.js'></script>

        <script type="text/javascript">
			Ext.onReady(function() {
				var fusionPanel = new Ext.ux.Chart.amChart.Panel({
					 title: 'Candidates per Year',
					 chartCfg: { id: 'chart1'
											, params: {
												flashVars: {
													debugMode: 0,
													lang: 'EN'
												},
												wmode: 'transparent'
											}
					},
					id: 'chartpanel',
					 bodyStyle: {background: 'transparent'},
					border: false,
					chartURL: '../amcharts_2.0.7/amcharts/flash/ampie.swf',
					dataURL: 'pie_data.xml',  //let the Flash chartObj load it
					settingsURL: 'pie_settings.xml',
					//autoLoad   : MCW.fusion+'XML/Col3D1.xml' ,  //let Ext autoLoad do the same.

					//loadMask  : {msg: 'Loading data...'},

					width: 600,
					height: 400,
					listeners: {
						chartload: function (p, obj) { alert('chartload') },
						error: function (p, obj) { alert('error') },
						sliceclick: function () { alert('slice clicked') }
					}
				});

				var center = new Ext.Panel({
					 region:'center',
					 //layout:'fit',
					 width: 600,
					 height: 400,
					 margins:'5 0 5 0',
					 bodyStyle: {background: 'transparent'},
					 items: fusionPanel
				});
				
				

				var viewport = new Ext.Viewport({
					 layout:'fit',
					 items:[center]
				});
			});
		</script>
    </head>
    <body>
		
    </body>
</html>

EDIT: just doing some testing. If I add this function to my javascript, it gets called.

Code:

function amSliceClick()
{
	alert('amSliceClick function');
}

but the 'sliceclick' listener doesn't get called in the chartpack listeners. The 'sliceover' and 'sliceout' listeners have the same problem. Creating the amSliceOver and amSliceOut functions allow it to work, but thats not ideal.

Is this a bug??

**hendricd** · 1 Jun 2011 5:10 AM

@adammascherin --

Not really a bug, just amCharts is evolving.

If you're interested in additional events, use this fragment to bind desired events the amChart classes:

Code:

(function(){
var dispatchEvent = function(name, id){

        var c, d = Ext.get(id);
        if(d && (c = d.ownerCt)){
           c.fireEvent.apply(c, [name, c, c.getInterface()].concat(Array.prototype.slice.call(arguments,2)));
        }
        c = d =null;
    },
    bindFunction = function(fnName){
        var cb = dispatchEvent.createDelegate(null,[fnName.toLowerCase().replace(/^am/i,'')],0);
        window[fnName] = (typeof window[fnName] == 'function') ? window[fnName].createInterceptor(cb): cb ;
     };

    //Bind amChart callbacks to an Ext.Event for the corresponding chart.
    Ext.each([  
       'amSliceClick'    //add more here
        ],
      bindFunction);
}());

**adammascherin** · 1 Jun 2011 5:51 AM

OK i'll take a look at that code, but isn't amSliceClick already bound to the sliceclick function in ChartPack?

EDIT: ok, that code worked perfectly (THANKS!), but my question still stands: I thought amSliceClick was already bound to sliceclick in ChartPack? If not, what was the 'sliceclick' listener listening to?

**adammascherin** · 2 Jun 2011 1:22 PM

Hey Doug,
How do I make use of IntelliMask with my charts? I saw the fusion charts demo but when I try to use it with my amCharts, it errors out on "this.loadMask.show()" in the refreshChart() method. Do I need to include any other JS files or any special properties in the chart object?

**adammascherin** · 7 Jun 2011 7:01 AM

any help Doug? Sorry, I know you're busy.

**hendricd** · 7 Jun 2011 3:17 PM

Originally Posted by adammascherin

Hey Doug,
How do I make use of IntelliMask with my charts? I saw the fusion charts demo but when I try to use it with my amCharts, it errors out on "this.loadMask.show()" in the refreshChart() method. Do I need to include any other JS files or any special properties in the chart object?

@adam--

The IntelliMask class is already integrated into the Chart class heirarchy.

Just add:

Code:

 mediaMask  : 'Loading Chart...',   //to mask the chart object's container during rendering
 loadMask  : {msg:'Loading Chart Data...'},    //to mask the chart during data load ops
 autoMask  : true,     //let the classes figure it out

..to your Chart component configuration.

**adammascherin** · 8 Jun 2011 5:45 AM

I have those properties set, but 1) I don't see it, and 2) as I said in my previous message, it errors out at "this.loadMask.show(...)" in the refreshChart() method from your demo.

**adammascherin** · 13 Jun 2011 6:24 AM

someone?

**adammascherin** · 2 Aug 2011 11:50 AM

hey Doug,
I'm still having issues with the loading mask on the amCharts. If you could assist me, that would be great.

Adam

ux.Media.ChartPack 2.1.2 (Fusion, OFC2, amChart) released.

Thread Tools

Search Thread

Display

Tags for this Thread