About Highcharts embedding problem extjs

 

Ext.onReady (function () {
var sss = '$ {jsonStr}';
var json1 = $. parseJSON (sss);
var json = eval (json1);
var cg = json.baobiao [0]. orgName;
var liftNum = json.baobiao [0]. liftNum;
var badNum = json.baobiao [0]. badNum;
var failureRate = json.baobiao [0]. failureRate;
var failureTime = json.baobiao [0]. failureTime;
var failure = json.baobiao [0]. failure;
var chart = new Highcharts.Chart ();


var tabs = new Ext.TabPanel ({
renderTo: 'liftFailureReportInfoTb', 

activeTab: 0, 

items: [{
html: '

</ div> ', 

afterRender: function () {
$ ("# Container"). Highcharts ({
chart: {
renderTo: 'container', / / ​​DIV's ID 

defaultSeriesType: 'column' / / Display Type: columnar 

}, 

title: {
text: 'Report' / / Title 

}, 

xAxis: {/ / X-axis naming 

categories: cg, 

labels: {
formatter: function () {
var s = this.value;
if (s.length <= 6) {
return '' + s + '</ label>';
} Else 

{
return '' + s.substring (0,6) + '... </ label> ';
} 

} 

} 

}, 

yAxis: {/ / Y axis named 

min: 0, / / ​​Min 

title: {
text: 'description (Taiwan)' / / Y axis description 

} 

}, 

credits: {
enabled: false 

}, 

tooltip: {/ / Display the element name 

formatter: function () {
if (this.series.name == "failure rate") 

{
return '' + this.series.name + '</ b> 
' + 

this.x + ':' + this.y;
} 

else if (this.series.name == "number of failures") 

{
return '' + this.series.name + '</ b> 
' + 

this.x + ':' + this.y + 'times';
} 

else if (this.series.name == "Fault Frequency") 

{
return '' + this.series.name + '</ b> 
' + 

this.x + ':' + this.y + 'times / Taiwan';
} 

else 

{
return '' + this.series.name + '</ b> 
' + 

this.x + ':' + this.y + 'table';
} 

} 

}, 

plotOptions: {
column: {
pointPadding: 0.2, 

borderWidth: 0 

} 

}, 

series:
[

{
name: 'number', 

data: liftNum 

},
{
name: 'number', 

data: badNum 

},
{
name: 'failure rate', 

data: failureRate 

}, 

{
name: 'failure times', 

data: failureTime 

}, 

{
name: 'fault frequencies', 

data: failure 

} 

] 

}) 

} 

}] 

}) 

} 

page

 



 </ div>
</ Body>

front of the variable data from the backstage pass over,
cite some of the main js
jquery-1.4.min.js
highcharts.js
jquery.min.js
page refreshes the data can not be displayed at JS wrong, what 80,020,101 or something, totally do not understand, just getting started with extjs, also requested the god to help look
Ext is version 3.2, highcharts is 2.3.3
------ Solution ------------------------- -------------------
highchart have come out it?
------ For reference only -------------------------------------- -
resolved, is to see the upstairs of the post, but some changes, stickers sharing under the bar

 

var sss = '$ {jsonStr}';
var json1 = $. parseJSON (sss);
var json = eval (json1);
var cg = json.baobiao [0]. orgName;
var liftNum = json.baobiao [0]. liftNum;
var badNum = json.baobiao [0]. badNum;
var failureRate = json.baobiao [0]. failureRate;
var failureTime = json.baobiao [0]. failureTime;
var failure = json.baobiao [0]. failure;
Ext.onReady (function () {
function createReport () 

{
var chart;
chart = new Highcharts.Chart ({
chart: {
renderTo: 'container', / / ​​DIV's ID 

defaultSeriesType: 'column' / / Display Type: columnar 

}, 

title: {
text: 'elevator malfunction report' / / Title 

}, 

xAxis: {/ / X-axis naming 

categories: cg, 

labels: {
formatter: function () {
var s = this.value;
if (s.length <= 6) {
return '' + s + '</ label>';
} Else 

{
return '' + s.substring (0,6) + '... </ label> ';
} 

} 

} 

}, 

yAxis: {/ / Y axis named 

min: 0, / / ​​Min 

title: {
text: 'description (Taiwan)' / / Y axis description 

} 

}, 

credits: {
enabled: false 

}, 

tooltip: {/ / Display the element name 

formatter: function () {
if (this.series.name == "elevator failure rate") 

{
return '' + this.series.name + '</ b> 
' + 

this.x + ':' + this.y;
} 

else if (this.series.name == "number of failures") 

{
return '' + this.series.name + '</ b> 
' + 

this.x + ':' + this.y + 'times';
} 

else if (this.series.name == "Fault Frequency") 

{
return '' + this.series.name + '</ b> 
' + 

this.x + ':' + this.y + 'times / Taiwan';
} 

else 

{
return '' + this.series.name + '</ b> 
' + 

this.x + ':' + this.y + 'table';
} 

} 

}, 

plotOptions: {
column: {
pointPadding: 0.2, 

borderWidth: 0 

} 

}, 

series:
[

{
name: 'Elevators', 

data: liftNum 

},
{
name: 'failure Elevators', 

data: badNum 

},
{
name: 'Elevator failure rate', 

data: failureRate 

}, 

{
name: 'failure times', 

data: failureTime 

}, 

{
name: 'fault frequencies', 

data: failure 

} 

] 

});
} 

var tabs = new Ext.Panel ({
renderTo: 'liftFailureReportInfoTb', 

items: [{
html: '

</ div> ', 

afterRender: function () {
createReport ();
} 

}] 

}) 

}) 

</ Script>
</ HEAD>


 </ div>
</ Body>
</ HTML>
</ Pre>