Commit 4e3ff99a authored by lcottret's avatar lcottret

Automatic barplot in web/templates/barplots

parent 770fa975
......@@ -98,4 +98,4 @@
.x-btn-inner-center{
color: "white"
}
\ No newline at end of file
}
......@@ -12,6 +12,10 @@ body {
}
.footer {
padding: 20px;
}
.lead {
font-size:20px !important;
}
......
var data = [
{
"path" : "yeast.iprscan.specific.singlecopy.Coils.xls",
"title" : "Coils",
"data" : [ {
"count" : "3",
"desc" : "",
"name" : "Coil"
} ]
},
{
"title" : "GO",
"data" : [ {
"count" : "2",
"desc" : "null",
"name" : "GO:0003676"
}, {
"desc" : "null",
"count" : "2",
"name" : "GO:0015074"
}, {
"name" : "GO:0016459",
"count" : "1",
"desc" : "null"
}, {
"name" : "GO:0005524",
"count" : "1",
"desc" : "null"
}, {
"name" : "GO:0003774",
"count" : "1",
"desc" : "null"
}, {
"count" : "1",
"desc" : "null",
"name" : "GO:0005515"
} ],
"path" : "yeast.iprscan.specific.singlecopy.GO.xls"
},
{
"title" : "Gene3D",
"data" : [ {
"name" : "G3DSA:3.30.420.10",
"desc" : "",
"count" : "2"
}, {
"name" : "G3DSA:4.10.270.10",
"desc" : "",
"count" : "1"
}, {
"desc" : "",
"count" : "1",
"name" : "G3DSA:3.40.50.300"
} ],
"path" : "yeast.iprscan.specific.singlecopy.Gene3D.xls"
},
{
"path" : "yeast.iprscan.specific.singlecopy.INTERPRO.xls",
"data" : [ {
"name" : "IPR012337",
"count" : "2",
"desc" : "Ribonuclease H-like domain"
}, {
"desc" : "Integrase, catalytic core",
"count" : "2",
"name" : "IPR001584"
}, {
"name" : "IPR013103",
"count" : "2",
"desc" : "Reverse transcriptase, RNA-dependent DNA polymerase"
}, {
"name" : "IPR027401",
"desc" : "Myosin-like IQ motif-containing domain",
"count" : "1"
}, {
"name" : "IPR001609",
"desc" : "Myosin head, motor domain",
"count" : "1"
}, {
"count" : "1",
"desc" : "IQ motif, EF-hand binding site",
"name" : "IPR000048"
}, {
"count" : "1",
"desc" : "P-loop containing nucleoside triphosphate hydrolase",
"name" : "IPR027417"
} ],
"title" : "INTERPRO"
},
{
"data" : [ {
"name" : "00230+2.7.7.7",
"count" : "2",
"desc" : "null"
}, {
"count" : "2",
"desc" : "null",
"name" : "00240+2.7.7.7"
} ],
"title" : "KEGG",
"path" : "yeast.iprscan.specific.singlecopy.KEGG.xls"
},
{
"path" : "yeast.iprscan.specific.singlecopy.PANTHER.xls",
"data" : [ {
"name" : "PTHR11439",
"count" : "2",
"desc" : ""
}, {
"name" : "PTHR13140:SF364",
"desc" : "",
"count" : "1"
}, {
"name" : "PTHR11439:SF127",
"count" : "1",
"desc" : ""
}, {
"name" : "PTHR13140",
"desc" : "",
"count" : "1"
}, {
"desc" : "",
"count" : "1",
"name" : "PTHR11439:SF134"
} ],
"title" : "PANTHER"
},
{
"title" : "PRINTS",
"data" : [ {
"name" : "PR00193",
"count" : "1",
"desc" : "Myosin heavy chain signature"
} ],
"path" : "yeast.iprscan.specific.singlecopy.PRINTS.xls"
},
{
"path" : "yeast.iprscan.specific.singlecopy.Pfam.xls",
"title" : "Pfam",
"data" : [
{
"name" : "PF07727",
"desc" : "Reverse transcriptase (RNA-dependent DNA polymerase)",
"count" : "2"
}, {
"name" : "PF00665",
"desc" : "Integrase core domain",
"count" : "2"
}, {
"name" : "PF00063",
"desc" : "Myosin head (motor domain)",
"count" : "1"
} ]
},
{
"path" : "yeast.iprscan.specific.singlecopy.ProDom.xls",
"data" : [ {
"name" : "PD936484",
"count" : "1",
"desc" : "POLYPROTEIN GLYCOPROTEIN M G2 TRANSMEMBRANE NONSTRUCTURAL MEMBRANE CONTAINS: PRECURSOR SIGNAL"
} ],
"title" : "ProDom"
}, {
"path" : "yeast.iprscan.specific.singlecopy.ProSiteProfiles.xls",
"data" : [ {
"count" : "2",
"desc" : "Integrase catalytic domain profile.",
"name" : "PS50994"
}, {
"count" : "1",
"desc" : "Myosin motor domain profile.",
"name" : "PS51456"
}, {
"count" : "1",
"desc" : "IQ motif profile.",
"name" : "PS50096"
} ],
"title" : "ProSiteProfiles"
}, {
"title" : "SMART",
"data" : [ {
"desc" : "Myosin. Large ATPases.",
"count" : "1",
"name" : "SM00242"
} ],
"path" : "yeast.iprscan.specific.singlecopy.SMART.xls"
}, {
"path" : "yeast.iprscan.specific.singlecopy.SUPERFAMILY.xls",
"title" : "SUPERFAMILY",
"data" : [ {
"desc" : "",
"count" : "2",
"name" : "SSF53098"
}, {
"desc" : "",
"count" : "2",
"name" : "SSF56672"
}, {
"desc" : "",
"count" : "1",
"name" : "SSF52540"
}, {
"name" : "SSF57997",
"desc" : "",
"count" : "1"
} ]
} ];
\ No newline at end of file
<html>
<head>
<link rel="stylesheet" type="text/css"
href="../../js/ext/extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css"
href="../../resources/css/banner.css">
<link rel="stylesheet" type="text/css"
href="../../resources/css/custom.css">
<link rel="stylesheet" type="text/css"
href="../../resources/icons/icons.css">
<script type="text/javascript" src="../../js/ext/extjs/ext-all.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="plot.js"></script>
</head>
<body>
</body>
</html>
\ No newline at end of file
Ext.require([ 'Ext.chart.*', 'Ext.panel.*', 'Ext.Window',
'Ext.fx.target.Sprite', 'Ext.layout.container.Fit',
'Ext.window.MessageBox' ]);
Ext
.onReady(function() {
/**
* Main panel
*/
var mainPanel = Ext.create('Ext.Panel', {
id : 'main-panel',
baseCls : 'x-plain',
renderTo : Ext.getBody(),
layout : {
type : 'table',
columns : 2
},
// applied to child components
defaults : {
frame : true,
// width : 400,
// height : 400,
margin : 20
}
});
Ext.Array
.each(
data,
function(item) {
var store = Ext.create('Ext.data.JsonStore', {
fields : [ 'name', 'count', 'desc' ],
data : item.data
});
var chart = Ext
.create(
'Ext.chart.Chart',
{
width : 500,
height : 300,
animate : true,
store : store,
axes : [ {
type : 'Numeric',
position : 'bottom',
fields : [ 'count' ],
// label : {
// renderer :
// Ext.util.Format.numberRenderer('0,0')
// },
title : "Counts",
grid : true,
minimum : 0
}, {
type : 'Category',
position : 'left',
fields : [ 'name' ],
title : item.title
} ],
series : [ {
type : 'bar',
axis : 'bottom',
highlight : true,
tips : {
trackMouse : true,
width : 200,
height : 130,
renderer : function(
storeItem,
item) {
this.setTitle(storeItem
.get('name'));
this
.update(
storeItem
.get('count')
+ ' items'
+ '<br /><br />Description:<br />'
+ storeItem
.get('desc'));
}
},
// label : {
// display :
// 'insideEnd',
// field : 'data',
// renderer :
// Ext.util.Format.numberRenderer('0'),
// orientation :
// 'horizontal',
// color : '#333',
// 'text-anchor' :
// 'middle'
// },
xField : 'name',
yField : 'count'
} ]
});
/**
* chart panel
*/
var panel = Ext
.create(
'Ext.Panel',
{
title : item.title,
resizable : true,
items : chart,
layout : 'fit',
dockedItems : [ {
xtype : 'toolbar',
items : [
'<-',
{
iconCls : 'icon-eye',
handler : function() {
window.open(item.path);
}
},
{
iconCls : 'icon-disk',
handler : function() {
Ext.MessageBox
.confirm(
'Confirm Download',
'Would you like to download the chart as an image?',
function(
choice) {
if (choice == 'yes') {
chart
.save({
type : 'image/png'
});
}
});
}
} ]
} ]
});
mainPanel.add(panel);
});
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment