Hybrid View

  1. #1
    Ext User santosh.rajan's Avatar
    Join Date
    Sep 2007
    Location
    Kannur, Kerala, India
    Posts
    611
    Vote Rating
    0
    santosh.rajan is on a distinguished road

      0  

    Default Ext.ux.GoogleVisualizationComponent - Add Google Visualizations to your Ext App

    Ext.ux.GoogleVisualizationComponent - Add Google Visualizations to your Ext App


    Add Google Visualizations to Ext, just like you would add any Ext Component, with
    Ext.ux.GoogleVisualizationComponent.

    See Demo and Download here.

    Usage
    Code:
    var mygooglemap = new Ext.ux.GoogleVisualizationComponent({
    	visualizationType: 'Map',
    	visualizationConfig: {
    		width: 400,
    		height: 300,
    		showTip: true
    	},
    	columns: [
    		['number', 'Lat'],
    		['number', 'Lon'],
    		['string', 'Name']
    	],
    	data: [
    		[37.4232, -122.0853, 'Work'],
    		[37.4289, -122.1697, 'University'],
    		[37.6153, -122.3900, 'Airport'],
    		[37.4422, -122.1731, 'Shopping']
    	]
    });
    mypanel.add(mygooglemap);
    To load as config option use xtype: 'googlevisualizationcomponent',
    Ext.GoogleVisualizationComponent extends Ext.BoxComponent so you can use all its config options

    Public Methods:
    getSelection() - eg. mygooglemap.getSelection()
    setSelection() - eg. mygooglemap.setSelection()

    Events:
    "select" - eg. mygooglemap.on('select', function() {}, this);

    To see how these public methods and events work see docs at
    http://code.google.com/apis/visualiz...on/events.html

    Setup
    Code:
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="Ext.ux.GoogleVisualizationComponent.js"></script>
    <script type="text/javascript">
      Ext.ux.loadGoogleVisualizationPackages("piechart", "map", "intensitymap", "gauge");
    </script>
    Copy and paste these script tags to wherever you are loading your scripts
    In the Ext.ux.loadGoogleVisualizationPackages add the packages you want to use.

    If you are using Google Maps then you have to add one more script
    Code:
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=PASTE-YOUR-KEY-HERE" type="text/javascript"></script>
    Before you paste this script you will need to sign up for Google Maps API.
    When you sign up you get a key which you can cut and paste in the script tag above.
    You can sign up for google maps api here http://code.google.com/apis/maps/signup.html

    There are many visualizations here. I will add config options for some visualizations in my next post. If you want to use a particular visualization and cant find the config options here, then go to the visualization's docs page by selecting it from the visualization gallery. You will find code on how to add it to a web page(Not Ext). By looking at the code you will easily figure out the Ext config option. You can compare the Maps config option above with the maps doc to see the how it is done.

    Important! If the package name is "piechart", then your visualizationType will be "PieChart". The visualization type is not the package name. I will make a list of all the visualization types for all the visualizations and post it here.

    If you are able to use a visualization who's config option is not available here, then please post it here for others.

    If you find bugs, made modifications to the code please post it here so that i can incorporate in the next release.
    Make everything as simple as possible, but not simpler.
    - Albert Einstein

  2. #2
    Ext User santosh.rajan's Avatar
    Join Date
    Sep 2007
    Location
    Kannur, Kerala, India
    Posts
    611
    Vote Rating
    0
    santosh.rajan is on a distinguished road

      0  

    Default Config options for some Google Visualizations

    Config options for some Google Visualizations


    Pie Chart
    Code:
    	{
    		xtype: 'googlevisualizationcomponent',
    		visualizationType: 'PieChart',
    		visualizationConfig: {
    			width: 400,
    			height: 240,
    			is3D: true,
    			title: 'MyDailyActivities'
    		},
    		columns: [
    			['string', 'Task'],
    			['number', 'Hours per day']
    		],
    		data: [
    			['Work', 11],
    			['Eat', 2],
    			['Commute', 2],
    			['Watch TV', 2],
    			['Sleep', 7]
    		]
    	}
    Intensity Map
    Code:
            {
    		xtype: 'googlevisualizationcomponent',
    		visualizationType: 'IntensityMap',
    		visualizationConfig: {
    		},
    		columns: [
    			['string', '', 'Country'],
    			['number', 'Population (mil)', 'a'],
    			['number', 'Area (km2)', 'b']
    		],
    		data: [
    			['CN', 1324, 9640821],
    			['IN', 1133, 3287263],
    			['US', 304, 9629091],
    			['ID', 232, 1904569],
    			['BR', 187, 8514877]
    		]
    	}
    Gauge
    Code:
            {
    		xtype: 'googlevisualizationcomponent',
    		visualizationType: 'Gauge',
    		visualizationConfig: {
    			width: 400,
    			height: 120,
    			redFrom: 90,
    			redTo: 100,
    			yellowFrom: 75,
    			yellowTo: 90,
    			minorTicks: 5
    		},
    		columns: [
    			['string', 'Label'],
    			['number', 'Value']
    		],
    		data: [
    			['Memory', 80],
    			['CPU', 55],
    			['Network', 68]
    		]
    	}
    MotionChart
    Code:
            {
    		xtype: 'googlevisualizationcomponent',
    		visualizationType: 'MotionChart',
    		visualizationConfig: {
    			width: 600,
    			height: 300
    		},
    		columns: [
    			['string', 'Department'],
    			['number', 'Year'],
    			['number', 'Sales'],
    			['number', 'Expenses']
    		],
    		data: [
    			['Dogs', 1995, 1000, 300],
    			['Cats', 1995, 950, 200],
    			['Dogs', 1996, 1200, 400],
    			['Cats', 1996, 900, 150],
    			['Dogs', 1997, 1250, 800],
    			['Cats', 1997, 200, 660]
    		]
    	}
    Organization Chart
    Code:
            {
    		xtype: 'googlevisualizationcomponent',
    		visualizationType: 'OrgChart',
    		visualizationConfig: {
    		},
    		columns: [
    			['string', 'Name'],
    			['string', 'Manager']
    		],
    		data: [
    			['Mike'],
    			['Jim', 'Mike'],
    			['Alice', 'Mike'],
    			['Bob', 'Jim'],
    			['Carol', 'Bob']
    		]
    	}
    Make everything as simple as possible, but not simpler.
    - Albert Einstein

  3. #3
    Ext User santosh.rajan's Avatar
    Join Date
    Sep 2007
    Location
    Kannur, Kerala, India
    Posts
    611
    Vote Rating
    0
    santosh.rajan is on a distinguished road

      0  

    Default Added Annotated Time Line and Area Chart

    Added Annotated Time Line and Area Chart


    Annotated Time Line
    Code:
             {
    		xtype: 'googlevisualizationcomponent',
    		visualizationType: 'AnnotatedTimeLine',
    		visualizationConfig: {
    			width: 700,
    			height: 240,
    			displayAnnotations: true
    		},
    		columns: [
    			['date', 'Date'],
    			['number', 'Sold Pencils'],
    			['string', 'Title1'],
    			['string', 'Text1'],
    			['number', 'Sold Pens'],
    			['string', 'Title2'],
    			['string', 'Text2']
    		],
    		data: [
    			[new Date(2008, 1 ,1), 30000, '', '', 40645, '', ''],
    			[new Date(2008, 1 ,2), 14045, '', '', 20374, '', ''],
    			[new Date(2008, 1 ,3), 55022, '', '', 50766, '', ''],
    			[new Date(2008, 1 ,4), 75284, '', '', 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
    			[new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66464, '', ''],
    			[new Date(2008, 1 ,6), 33322, '', '', 39463, '', '']
    		]
    	},
    Code:
    Area Chart
            {
    		xtype: 'googlevisualizationcomponent',
    		visualizationType: 'AreaChart',
    		visualizationConfig: {
    			width: 400,
    			height: 240,
    			legend: 'bottom',
    			title: 'Company Performance'
    		},
    		columns: [
    			['string', 'Year'],
    			['number', 'sales'],
    			['number', 'Expenses']
    		],
    		data: [
    			['2004', 1000, 400],
    			['2005', 1170, 460],
    			['2006', 660, 1120],
    			['2007', 1030, 540]
    		]
    	},
    Make everything as simple as possible, but not simpler.
    - Albert Einstein

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    that's awesome. I have to read their license terms before i jump on this. Thanks dude.

  5. #5
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    http://extgooglevisdemo.myofiz.com/ not work in IE7

    Greetings,

  6. #6
    Ext User santosh.rajan's Avatar
    Join Date
    Sep 2007
    Location
    Kannur, Kerala, India
    Posts
    611
    Vote Rating
    0
    santosh.rajan is on a distinguished road

      0  

    Default


    The famous IE "comma". Fixed it. Thanks for pointing out.
    Make everything as simple as possible, but not simpler.
    - Albert Einstein

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar