Set image on line chart when chart has no data.

[sshukla480]

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

[willigogs]

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.

[sshukla480]

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

[willigogs]

The above solution would work with a panel also.

[sshukla480]

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

[willigogs]

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.

[sshukla480]

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 ' '
}
};

[willigogs]

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:

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.

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();
            }

        }
    }
});

[sshukla480]

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 ' '
}
};