PDA

View Full Version : Set image on line chart when chart has no data.



sshukla480
30 Jan 2013, 2:13 AM
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
31 Jan 2013, 3:30 AM
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
8 Feb 2013, 1:51 AM
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
8 Feb 2013, 1:54 AM
The above solution would work with a panel also.

sshukla480
8 Feb 2013, 2:04 AM
thanks ,
but my panel has multiple graph and i am using x type line chart

willigogs
8 Feb 2013, 2:15 AM
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
8 Feb 2013, 2:25 AM
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 (KB)',
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
8 Feb 2013, 9:12 AM
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
10 Feb 2013, 3:17 AM
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 (KB)',
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 ' '
}
};