1. #1
    Sencha User
    Join Date
    Nov 2007
    Posts
    7
    Vote Rating
    0
    shardaprasad001 is on a distinguished road

      0  

    Default Unanswered: group column chart with tool tip having pie chart

    Unanswered: group column chart with tool tip having pie chart


    Dear Reader,

    I have created group column chart that chart having tooltip with pie chart option as based on extjs example. first column represent 2009 data and other is showing 2010 data based on that data when i drag my mouse over these then pie chart is showing data based on render.

    I want when i go to 2009 data render will identify and tooltip pie chart data is based on some data1,data2,data3 and 2010 tooltip data is show based on data4,data5,data6.

    please give me your suggestion so i will solve my problem.


    I have integrated group column for 2009 and 2010 as wall as used tooltip with pie chart from extjs example part.

    Thanks & Regards,
    Sharda

  2. #2
    Sencha User
    Join Date
    Aug 2012
    Posts
    34
    Vote Rating
    0
    nagalla038 is on a distinguished road

      0  

    Default Tool tip as Pie Chart

    Tool tip as Pie Chart


    Hi, try to refer this code..It may help you

    Ext.require('Ext.chart.*');
    Ext.require('Ext.layout.container');
    Ext.require('Ext.layout.container.Fit');
    Ext.require('Ext.window.MessageBox');


    Ext.onReady(function () {


    var pieModel = [
    {
    name: 'Uploads'
    },
    {
    name: 'Downloads'
    },
    {
    name: 'Saved'
    },
    {
    name: 'Edited'
    }

    ];


    var pieStore = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data'],
    data: pieModel
    });


    var pieChart = Ext.create('Ext.chart.Chart', {
    width: 100,
    height: 100,
    animate: false,
    store: pieStore,
    shadow: false,
    insetPadding: 0,
    theme: 'Base:gradients',
    series: [{
    type: 'pie',
    field: 'data',
    showInLegend: false,
    label: {
    field: 'name',
    display: 'rotate',
    contrast: true,
    font: '9px Arial'
    }
    }]
    });


    var gridStore = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data'],
    data: pieModel
    });


    var grid = Ext.create('Ext.grid.Panel', {
    store: gridStore,
    height: 130,
    width: 480,
    columns: [
    {
    text: 'name',
    dataIndex: 'name'
    },
    {
    text: 'data',
    dataIndex: 'data'
    }
    ]
    });


    var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'Uploads', 'Downloads', 'Saved', 'Edited'],
    data: [
    { 'name': 'January', 'Uploads': 10, 'Downloads': 12, 'Saved': 14, 'Edited': 8 },
    { 'name': 'Febraury', 'Uploads': 7, 'Downloads': 8, 'Saved': 16, 'Edited': 10 },
    { 'name': 'March', 'Uploads': 5, 'Downloads': 2, 'Saved': 14, 'Edited': 12 },
    { 'name': 'April', 'Uploads': 2, 'Downloads': 14, 'Saved': 6, 'Edited': 1 },
    { 'name': 'May', 'Uploads': 27, 'Downloads': 38, 'Saved': 36, 'Edited': 13 }
    ]
    });


    var chart = Ext.create('Ext.chart.Chart', {
    xtype: 'chart',
    animate: true,
    shadow: true,
    store: store,
    axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['Uploads'],
    title: false,
    grid: true
    }, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    title: false
    }],
    series: [{
    type: 'line',
    axis: 'left',
    gutter: 80,
    xField: 'name',
    yField: ['Uploads'],
    tips: {
    trackMouse: true,
    width: 580,
    height: 170,
    layout: 'fit',
    items: {
    xtype: 'container',
    layout: 'hbox',
    items: [pieChart, grid]
    }
    ,
    renderer: function (klass, item) {
    var storeItem = item.storeItem,
    data = [{
    name: 'Uploads',
    data: storeItem.get('Uploads')
    }, {
    name: 'Downloads',
    data: storeItem.get('Downloads')
    }, {
    name: 'Saved',
    data: storeItem.get('Saved')
    }, {
    name: 'Edited',
    data: storeItem.get('Edited')
    }], i, l, html;


    this.setTitle("Information for " + storeItem.get('name'));
    pieStore.loadData(data);
    gridStore.loadData(data);
    grid.setSize(480, 130);
    }
    }
    }]
    });




    var panel1 = Ext.create('widget.panel', {
    width: 800,
    height: 400,
    title: 'Line Chart',
    renderTo: Ext.getBody(),
    layout: 'fit',

    items: chart
    });
    });

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