Ir para conteúdo


Foto

Gráficos tipo Gauge


  • Por favor, faça o login para responder
3 respostas neste tópico

#1 AmorimJR

AmorimJR

    Iniciante

  • Membros
  • Pip
  • 2 posts

Postado 06 October 2015 - 23:08

Boa noite pessoal,

estou tentando criar um gráfico tipo gauge a partir dos dados vindo do banco de dados. 

No caso, a quantidade de registros no banco é para gerar um gráfico.

 

Segue código que estou testando.

 

Controller

Ext.define('M2.controller.Gauge', {
    extend: 'Ext.app.Controller',

    models: [
        'Eqp',
        'Pop'
    ],
    stores: [
        'Eqps',
        'Pops'
    ],
    views: [
        'MyGauge'
    ],

    refs: [
        {
            ref: 'mainGauge',
            selector: 'mygauge #mainGauge',
            xtype: 'Ext.tab.Panel'
        }
    ],

    onGaugeRender: function(component, eOpts) {



        this.getEqpsStore().load(function(records, op, success){

            var gaugePanel = Ext.ComponentQuery.query('chart')[0];

               // gaugePanel.removeAll();


            Ext.each(records, function(root){
                var iconeCls_Pop = 'computer';
                var iconeCls_Eqp = 'tag';
                var icone = root.get('sta_eqp');


                var gauge = Ext.create('Ext.chart.Chart',{
                        width: 400,        
                        height: 250,
                        renderTo: 'mygauge',
                        store: 'Eqps',
                        axes: [{
                                type: 'gauge',
                                position: 'gauge',
                                minimum: 0,
                                maximum: 100,
                                steps: 20,
                                margin: -10
                            }], 
                    series: [{
                        type: 'gauge',
                        field: 'leitura',
                        donut: 50
                    }]
                });
                
                gaugePanel.add(gauge);
            }); 
        });

    },

    
  refreshGauge: function() {

        Ext.TaskManager.start({
            run: this.onGaugeRender,
            interval: 1000 * 5, // 5 Seconds
            scope: this
        });

    },


    init: function(application) {

        this.control({
            "chart": {
                render: this.refreshGauge
            }
        });

    }
});

View

Ext.define('M2.view.MyGauge', {
    extend: 'Ext.Panel',
    xtype: 'gauge-basic',
    alias: 'widget.mygauge',
    viewModel: {
        type: 'gauge-basic'
    },
    requires: ['Ext.chart.*'],


    width: 650,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
            xtype: 'panel',
            itemId: 'chart',
            width: '100%',
            flex: 1,
            layout: {
                type: 'hbox',
                align: 'stretch'
            }
        }
            ]
        });

        me.callParent(arguments);
    }

});

Store

Ext.define('M2.store.Eqps', {
    extend: 'Ext.data.Store',
    model: 'M2.model.Eqp',
    autoLoad: true,
    pageSize: 35,
    autoLoad: {start: 0, limit: 35},
 
    proxy: {
        type: 'ajax',
        api: {
            create: 'php/criaEqp.php',
            read: 'php/listaEqp.php',
            update: 'php/atualizaEqp.php',
            destroy: 'php/deletaEqp.php',
        },
        reader: {
            type: 'json',
            rootProperty: 'eqps',
            successProperty: 'success'
        },
        writer: {
            type: 'json',
            writeAllFields: true,
            encode: true,
            rootProperty: 'eqps'
        }
    }
});

Model

Ext.define('M2.model.Eqp', {
    extend: 'Ext.data.Model',
    fields: ['id', 'id_pop', 'text', 'lt_porta', 'porta', 'sta_porta', 'leitura', 'ts_rem_eqp', 'ts_rem_eqp_dt', 'n_eqp_l', 'n_eqp_ll', 'n_eqp_h', 'n_eqp_hh', 'dt_create', 'sta_eqp', 'monitor_ip', 'ip', 'dt_atualizacao', 'iconCls', 'className']
});

Se alguém poder ajudar, desde já agradeço.

 

Abraços



#2 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 839 posts
  • LocationGoiânia - GO

Postado 06 October 2015 - 23:59

Será que vc precisa de axes? Não basta criar um serie em um polar?

 

poderia implementar seu código desse gráfico no sencha fiddle como esse https://fiddle.sencha.com/#fiddle/tns?


Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#3 fabiovilas

fabiovilas

    Member Avançado

  • Membros
  • PipPipPip
  • 51 posts

Postado 07 October 2015 - 08:50

Há 15 dias eu desisti dos gráficos do extjs.

 

Estou usando highcharts e sinceramente o resultado é MUITO melhor.

 

 



#4 AmorimJR

AmorimJR

    Iniciante

  • Membros
  • Pip
  • 2 posts

Postado 07 October 2015 - 17:50

O Problema é que quando abro a view, os gráficos não aparecem.






0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos