Tweet
Hello,
I'm trying to put multiple horizontal bullet widgets on a page and I cannot get it to display. I've created a single for the bullet widget example and it displays properly. Can someone please look at my code and point out what I cannot see. Oh and Firebug shows no errors. Thanks.
First the HTML
Here's my XMLs, there are four, the RPG program is working properly and returning the correct data.
I'm trying to put multiple horizontal bullet widgets on a page and I cannot get it to display. I've created a single for the bullet widget example and it displays properly. Can someone please look at my code and point out what I cannot see. Oh and Firebug shows no errors. Thanks.
First the HTML
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Copyright" content="Copyright 2008-2012 CNX Corporation, All Rights Reserved">
<title>Production Goals by Line</title>
<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<script type="text/javascript" src="/extjs4/ext-all.js"></script>
<script type="text/javascript" src="/vvresources/valence-extjs4.js"></script>
<script type="text/javascript" src="/FusionCharts/Charts/FusionCharts.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var myChart1, myChart2, myChart3, myChart4;
// function to render the first chart
var renderChart1 = function(p) {
if (myChart1) {
myChart1.resizeTo(p.getWidth(true), p.getHeight(true));
} else {
var chartLink1 = "../FusionCharts/charts/HBullet.swf";
myChart1 = new FusionCharts(chartLink1, "myChart1", p.getWidth(true), p.getHeight(true), "0", "0");
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
pgm: 'prodgoalO1',
action: 'getShift1Data'
},
success: function(response) {
myChart1.setDataXML(response.responseText);
myChart1.setTransparent(true);
myChart1.render("chartdiv1");
}
});
}
};
// function to render the second chart
var renderChart2 = function(p) {
if (myChart2) {
myChart2.resizeTo(p.getWidth(true), p.getHeight(true));
} else {
var chartLink2 = "../FusionCharts/charts/HBullet.swf";
myChart2 = new FusionCharts(chartLink2, "myChart2", p.getWidth(true), p.getHeight(true), "0", "0");
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
pgm: 'prodgoalO1',
action: 'getShift2Data'
},
success: function(response) {
myChart2.setDataXML(response.responseText);
myChart2.setTransparent(true);
myChart2.render("chartdiv2");
}
});
}
};
// function to render the third chart
var renderChart3 = function(p) {
if (myChart3) {
myChart3.resizeTo(p.getWidth(true), p.getHeight(true));
} else {
var chartLink3 = "../FusionCharts/charts/HBullet.swf";
myChart3 = new FusionCharts(chartLink3, "myChart3", p.getWidth(true), p.getHeight(true), "0", "0");
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
pgm: 'prodgoalO1',
action: 'getShift3Data'
},
success: function(response) {
myChart3.setDataXML(response.responseText);
myChart3.setTransparent(true);
myChart3.render("chartdiv3");
}
});
}
};
// function to render the fourth chart
var renderChart4 = function(p) {
if (myChart4) {
myChart4.resizeTo(p.getWidth(true), p.getHeight(true));
} else {
var chartLink4 = "../FusionCharts/charts/HBullet.swf";
myChart4 = new FusionCharts(chartLink4, "myChart4", p.getWidth(true), p.getHeight(true), "0", "0");
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
pgm: 'prodgoalO1',
action: 'getSummaryData'
},
success: function(response) {
myChart4.setDataXML(response.responseText);
myChart4.setTransparent(true);
myChart4.render("chartdiv4");
}
});
}
};
// create a panel to hold chart 1 (first horizontal bullet)
var panelChart1 = Ext.create('Ext.panel.Panel', {
flex: 0.2,
border: false,
style: {
padding: 1
},
html: '<div id="chartdiv1"></div>',
listeners: {
resize: renderChart1
}
});
// create a panel to hold chart 2 (second horizontal bullet)
var panelChart2 = Ext.create('Ext.panel.Panel', {
flex: 0.2,
border: false,
style: {
padding: 1
},
html: '<div id="chartdiv2"></div>',
listeners: {
resize: renderChart2
}
});
// create a panel to hold chart 3 (third horizontal bullet)
var panelChart3 = Ext.create('Ext.panel.Panel', {
flex: 0.2,
border: false,
style: {
padding: 1
},
html: '<div id="chartdiv3"></div>',
listeners: {
resize: renderChart3
}
});
// create a panel to hold chart 4 (fourth horizontal bullet)
var panelChart4 = Ext.create('Ext.panel.Panel', {
flex: 0.2,
border: false,
style: {
padding: 1
},
html: '<div id="chartdiv4"></div>',
listeners: {
resize: renderChart4
}
});
// the north panel with text describing this example
var panelNorth = Ext.create('Ext.panel.Panel',{
padding: '5',
border: false,
anchor:'100%, 20%',
html: '<table width=100%>'+
'<tr><td align="center"><br><b>Production Goals - Line 1</b></td></tr>' +
'<tr><td><br></td></tr></table>'
});
// outer panel to hold the four panels in the center/south
var panelCenter = Ext.create('Ext.panel.Panel', {
anchor: '100% 80%',
border: false,
layout: {
type: 'hbox',
pack: 'center',
align: 'middle'
},
items: [panelChart1, panelChart2, panelChart3, panelChart4]
});
// viewport
new Ext.container.Viewport({
layout: 'anchor',
items: [panelNorth, panelCenter]
});
});
</script>
</head>
<body>
</body>
</html>
Code:
<chart palette="4" lowerLimit="0" upperLimit="8000" caption="** Shift 1 **" subcaption="Planned - 5500 Produced - 4568 Efficiency - 83%" canvasLeftMargin="120" canvasRightMargin="40" showValue="1"> <colorRange> <color minValue="0" maxValue="5500" color="A6A6A6"></color> <color minValue="5500" maxValue="8000" color="E1E1E1"></color> </colorRange> <value>4568</value> <target>5500</target> </chart>
Code:
<chart palette="4" lowerLimit="0" upperLimit="7500" caption="** Shift 2 **" subcaption="Planned - 5000 Produced - 6450 Efficiency - 129%" canvasLeftMargin="120" canvasRightMargin="40" showValue="1"> <colorRange> <color minValue="0" maxValue="5000" color="A6A6A6"></color> <color minValue="5000" maxValue="7500" color="E1E1E1"></color> </colorRange> <value>6450</value> <target>5000</target> </chart>
Code:
<chart palette="4" lowerLimit="0" upperLimit="7500" caption="** Shift 3 **" subcaption="Planned - 5000 Produced - 2800 Efficiency - 56%" canvasLeftMargin="120" canvasRightMargin="40" showValue="1"> <colorRange> <color minValue="0" maxValue="5000" color="A6A6A6"></color> <color minValue="5000" maxValue="7500" color="E1E1E1"></color> </colorRange> <value>2800</value> <target>5000</target> </chart>
Code:
<chart palette="4" lowerLimit="0" upperLimit="18000" caption="** Summary **" subcaption="Planned - 15500 Produced - 13818 Efficiency - 89%" canvasLeftMargin="120" canvasRightMargin="40" showValue="1"> <colorRange> <color minValue="0" maxValue="15500" color="A6A6A6"></color> <color minValue="15500" maxValue="18000" color="E1E1E1"></color> </colorRange> <value>13818</value> <target>15500</target> </chart>
Comment