1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    15
    Vote Rating
    0
    sshukla480 is on a distinguished road

      0  

    Default Set image on line chart when chart has no data.

    Set image on line chart when chart has no data.


    Hi,

    i want to add image or empty message on line-chart when chart has no data.
    i am using ext-js 3.4.


    ----------------
    Thanks,
    shashank

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    One solution would be to add the chart to a container, then on chart store load and if no records exist - use the container.update() method to enter your own required HTML (Image or message text). However, this would of course remove the chart component from the panel, which might not be suitable...

    Other solutions which would avoid this are also possible.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    15
    Vote Rating
    0
    sshukla480 is on a distinguished road

      0  

    Default


    Thanks,
    But my chart in a Ext.panel i am not able to change it , because this many lines of code.
    so any possible solution for Ext.panel.



    Shashank

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    The above solution would work with a panel also.

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    15
    Vote Rating
    0
    sshukla480 is on a distinguished road

      0  

    Default


    thanks ,
    but my panel has multiple graph and i am using x type line chart

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    Can you provide some example code of how you are currently structuring this, as otherwise it's virtually impossible for us to provide a possible solution since we don't know what restrictions you have...

    Each chart component also has the .update() method, so you can simply check each store on load if no data is returned, then update the corresponding chart html with your message.

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    15
    Vote Rating
    0
    sshukla480 is on a distinguished road

      0  

    Default


    this is my code


    Ext.chart.Chart.CHART_URL = '../js/ext-3.4.0/resources/charts.swf';
    function userDGrid(){
    var userDGrid = new Ext.Panel({
    width: 300,
    height: 500,
    align: 'left',
    animate: true,
    id:'userDash',
    title: 'User Dashboard',
    tbar: [new Ext.form.ComboBox({
    id:"dashboardCB",
    hiddenName:'serviceId',
    store: new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
    url: 'getServicesByLogin',
    timeout :12000,

    success: function(response) {
    console.log("Spiffing, everything worked");
    //isloaded = true;
    },


    failure: function(response) {
    console.log("Curses, something terrible happened");
    },


    callback: function(response) {
    console.log("It is what it is");
    }
    }),
    reader: new Ext.data.JsonReader({
    id: "id",
    root: 'rows',
    totalProperty: 'total'
    }, Ext.data.Record.create([
    {
    name: "id",
    mapping: "id",
    type: "string"
    },
    {
    name: "name",
    mapping: "name",
    type: "string"
    }])),
    remoteSort: false,
    autoLoad : true,
    listeners: {
    load: function () {
    var combo = Ext.getCmp('dashboardCB');
    if(this.data.items.length!=0){
    combo.setValue(this.data.items[0].data.name);
    }
    }
    }
    }),
    fieldLabel:'Services',
    displayField: 'name',
    valueField: 'id',
    allowBlank : false,
    forceSelection: true,
    triggerAction: 'all',
    mode:'remote',
    maxLength: 50,
    anchor : '90%',
    selectOnFocus:true,
    listeners: {

    // 'change' will be fired when the value has changed and the user exits the ComboBox via tab, click, etc.
    // The 'newValue' and 'oldValue' params will be from the field specified in the 'valueField' config above.
    change: function(combo, newValue, oldValue){

    },
    // 'select' will be fired as soon as an item in the ComboBox is selected with mouse, keyboard.
    select: function(combo, record, index){
    Ext.getCmp('mChart').store.load({
    params: {
    appId: combo.getValue()
    }
    });
    Ext.getCmp('storeID').store.load({
    params: {
    appId: combo.getValue()
    }
    });
    },
    focus: function(combo){
    if(combo.getStore().getTotalCount() == 0){
    Ext.MessageBox.show({
    title: 'Dashboard',
    msg: 'Please deploy atleast one Service',
    buttons: Ext.MessageBox.OK,
    icon: 'error'
    });
    return
    }
    }
    }
    })],
    items:[
    {
    title: 'Total No of API Hits',
    id:'totalApiID',
    height:400,
    style:'padding:10px 0 10px 10px; width:48%; float: left;',
    items: [
    {
    xtype: 'linechart',
    id:'mChart',
    store: storeLimit(),
    yField: 'hits',
    url: '../js/ext-3.4.0/resources/charts.swf',
    xField: 'date',
    xAxis: new Ext.chart.CategoryAxis({
    title: 'Date'
    }),
    yAxis: new Ext.chart.NumericAxis({
    title: 'Total No Of API Hits',
    labelRenderer: roundchart
    // minimum:0,
    // majorUnit:1,
    // labelRenderer : Ext.util.Format.numberRenderer('0, 0')(1.55555)

    }),
    tipRenderer : function(chart, record){
    return Ext.util.Format.number(record.data.hits, '0,0') + ' hits on ' + record.data.date;
    },
    extraStyle: {
    xAxis: {
    labelRotation: 0
    },
    yAxis: {
    titleRotation: -90
    }
    }
    },{
    hidden:true,
    id:'alertMsg',
    html : '<i>There is no data available for the graph </i>'
    }]
    },{
    title: 'Total Storage Used ',
    id:'totalStorageID',
    height:400,
    style:'padding:10px 0 10px 10px; width:48%; float: right; margin-right:10px;',
    items:[{
    xtype: 'linechart',
    id:'storeID',
    store: storageStore(),
    yField: 'storage',
    url: '../js/ext-3.4.0/resources/charts.swf',
    xField: 'date',
    xAxis: new Ext.chart.CategoryAxis({
    title: 'Date'
    }),
    yAxis: new Ext.chart.NumericAxis({
    title: 'Storage Used (K',
    stackingEnabled: true //this is for data range in data base regarding graph by naresh
    }),
    tipRenderer : function(chart, record){

    return Ext.util.Format.number(record.data.storage, '.000000') + ' KB storage used in ' + record.data.date;
    },
    extraStyle: {
    xAxis: {
    labelRotation: 0
    },
    yAxis: {
    titleRotation: -90
    }
    }
    }]
    }]

    });
    return userDGrid;


    }
    function storeLimit(){
    var storeLimit = new Ext.data.Store({
    autoLoad:true,
    proxy: new Ext.data.HttpProxy({
    url: '../dashboard/totalApiHits'
    }),

    reader: new Ext.data.JsonReader({
    results: 'date',
    root: 'items',
    id: 'id'
    },
    [
    {
    name: 'date'
    },
    {
    name: 'hits'
    }

    ]
    ),
    listeners: {
    load: function () {
    var combo = Ext.getCmp('mChart');
    if(combo.store.data.items.length == 0){

    }else{

    }
    }
    }
    });
    return storeLimit;
    }
    function storageStore(){
    var storageStore = new Ext.data.Store({
    autoLoad:true,
    proxy: new Ext.data.HttpProxy({
    url: '../dashboard/storageStore'
    }),

    reader: new Ext.data.JsonReader({
    results: 'date',
    root: 'items'
    },
    [
    {
    name: 'date'
    },
    {
    name: 'storage'
    }

    ]
    )
    });
    return storageStore;
    }
    var roundchart = function(val) {
    var string = val.toString();
    var found = string.indexOf('.');
    if(found == '-1') {
    return val;
    } else {
    return ' '
    }
    };

  8. #8
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    Please use CODE tags in future, as that is very difficult to read

    As already stated, you can handle this in various ways.

    The first way would be to simply use the update() method on your chart panel. Something like this:
    Code:
    var storeLimit = new Ext.data.Store({
        // STORE CONFIGS
        listeners: {
            load: function (this, records, options) {
                if(records.length == 0) {
                    var html = '<p class="emptyrecord">No data available</p>'
                    Ext.getCmp('mChart').update(html)    
                }
            }
        }
    });
    I also notice you've tried adding an additional panel to hold the "no data" message, which is a second solution.

    All you would need to do it make the parent use VBOX layout, give each of the children a flex value of 1, then hide and show the correct panels depending on the store having data or not.

    e.g.
    Code:
    var userDGrid = new Ext.Panel({
        // GRID CONFIGS
        layout: 'vbox',
        defaults: {
            layout:'fit',
            flex: 1
        },
        layoutConfig: {
            align:'stretch'     
        },
        items: {
            //CHART GOES HERE
            id: 'mChart'    
        },{
            //NO DATA MESSAGE GOES HERE
            id: 'alertMsg'
        }
    });
    
    
    var storeLimit = new Ext.data.Store({
        // STORE CONFIGS
        listeners: {
            load: function (this, records, options) {
    
                var chart = Ext.getCmp('mChart');
                var alertmsg = Ext.getCmp('alertMsg');
    
                if(records.length == 0) {
                    chart.hide();
                    alertmsg.show();
                } else {
                    chart.show();
                    alertmsg.hide();
                }
    
            }
        }
    });

  9. #9
    Sencha User
    Join Date
    Dec 2011
    Posts
    15
    Vote Rating
    0
    sshukla480 is on a distinguished road

      0  

    Default


    thanks,

    but my problem is not sloved when we use the container.update method it is updated when store have no data but when i select the combo box which id has a data it show the following errors:


    TypeError: this.swf.setDataProvider is not a function

    this.swf.setDataProvider(dataProvider);

    please solved my problem i am new user of extjs . here is my code which i have written








    Ext.chart.Chart.CHART_URL = '../js/ext-3.4.0/resources/charts.swf';
    function userDGrid(){
    var userDGrid = new Ext.Panel({
    width: 300,
    height: 500,
    align: 'left',
    animate: true,
    id:'userDash',
    title: 'User Dashboard',
    tbar: [new Ext.form.ComboBox({
    id:"dashboardCB",
    hiddenName:'serviceId',
    store: new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
    url: 'aaaa',
    timeout :12000,

    success: function(response) {
    console.log("Spiffing, everything worked");
    //isloaded = true;
    },


    failure: function(response) {
    console.log("Curses, something terrible happened");
    },


    callback: function(response) {
    console.log("It is what it is");
    }
    }),
    reader: new Ext.data.JsonReader({
    id: "id",
    root: 'rows',
    totalProperty: 'total'
    }, Ext.data.Record.create([
    {
    name: "id",
    mapping: "id",
    type: "string"
    },
    {
    name: "name",
    mapping: "name",
    type: "string"
    }])),
    remoteSort: false,
    autoLoad : true,
    listeners: {
    load: function () {
    var combo = Ext.getCmp('dashboardCB');
    if(this.data.items.length!=0){
    combo.setValue(this.data.items[0].data.name);
    }
    }
    }
    }),
    fieldLabel:'Services',
    displayField: 'name',
    valueField: 'id',
    allowBlank : false,
    forceSelection: true,
    triggerAction: 'all',
    mode:'remote',
    maxLength: 50,
    anchor : '90%',
    selectOnFocus:true,
    listeners: {

    // 'change' will be fired when the value has changed and the user exits the ComboBox via tab, click, etc.
    // The 'newValue' and 'oldValue' params will be from the field specified in the 'valueField' config above.
    change: function(combo, newValue, oldValue){


    },
    // 'select' will be fired as soon as an item in the ComboBox is selected with mouse, keyboard.
    select: function(combo, record, index){
    Ext.getCmp('mChart').store.load({
    params: {
    appId: combo.getValue()
    }
    });
    Ext.getCmp('storeID').store.load({
    params: {
    appId: combo.getValue()
    }
    });
    },
    focus: function(combo){
    if(combo.getStore().getTotalCount() == 0){
    Ext.MessageBox.show({
    title: 'Dashboard',
    msg: 'Please deploy atleast one Service',
    buttons: Ext.MessageBox.OK,
    icon: 'error'
    });
    return
    }
    }
    }
    })],
    items:[
    {
    title: 'Total No of API Hits',
    id:'totalApiID',
    height:400,
    style:'padding:10px 0 10px 10px; width:48%; float: left;',
    items: [
    {
    xtype: 'linechart',
    id:'mChart',
    store: storeLimit(),
    yField: 'hits',
    url: '../js/ext-3.4.0/resources/charts.swf',
    xField: 'date',
    xAxis: new Ext.chart.CategoryAxis({
    title: 'Date'
    }),
    yAxis: new Ext.chart.NumericAxis({
    title: 'Total No Of API Hits',
    labelRenderer: roundchart
    }),
    tipRenderer : function(chart, record){
    return Ext.util.Format.number(record.data.hits, '0,0') + ' hits in ' + record.data.date;
    },
    extraStyle: {
    xAxis: {
    labelRotation: 0
    },
    yAxis: {
    titleRotation: -90
    }
    }
    }]
    }
    ,{
    title: 'Total Storage Used ',
    id:'totalStorageID',
    height:400,
    style:'padding:10px 0 10px 10px; width:48%; float: right; margin-right:10px;',
    items:[{
    xtype: 'linechart',
    id:'storeID',
    store: storageStore(),
    yField: 'storage',
    url: '../js/ext-3.4.0/resources/charts.swf',
    xField: 'date',
    xAxis: new Ext.chart.CategoryAxis({
    title: 'Date'
    }),
    yAxis: new Ext.chart.NumericAxis({
    title: 'Storage Used (K',
    stackingEnabled: true //this is for data range in data base regarding graph by naresh
    }),
    tipRenderer : function(chart, record){

    return Ext.util.Format.number(record.data.storage, '.000000') + ' KB storage used in ' + record.data.date;
    },
    extraStyle: {
    xAxis: {
    labelRotation: 0
    },
    yAxis: {
    titleRotation: -90
    }
    }
    }]
    }]

    });
    return userDGrid;


    }
    function storeLimit(){
    var storeLimit = new Ext.data.Store({
    autoLoad:true,
    proxy: new Ext.data.HttpProxy({
    url: 'sssss'
    }),

    reader: new Ext.data.JsonReader({
    results: 'date',
    root: 'items',
    id: 'id'
    },
    [
    {
    name: 'date'
    },
    {
    name: 'hits'
    }

    ]
    ),
    listeners: {
    load: function (records ,option) {
    console.log(records.data.items.length)
    if(records.data.items.length == 0){
    Ext.getCmp('mChart').container.update("html")
    }else{
    Ext.getCmp('mChart').show();
    }
    }
    }
    });
    return storeLimit;
    }
    function storageStore(){
    var storageStore = new Ext.data.Store({
    autoLoad:true,
    proxy: new Ext.data.HttpProxy({
    url: 'sssss'
    }),

    reader: new Ext.data.JsonReader({
    results: 'date',
    root: 'items'
    },
    [
    {
    name: 'date'
    },
    {
    name: 'storage'
    }

    ]
    )
    });
    return storageStore;
    }
    var roundchart = function(val) {
    var string = val.toString();
    var found = string.indexOf('.');
    if(found == '-1') {
    return val;
    } else {
    return ' '
    }
    };

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi