Menu
I'm trying to import this page to my JSF page which is gonna have database to get the data, to be more interactive.
So I did this:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<h:outputScript>
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
// Build the data arrays
var browserData = [];
var versionsData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
for (var j = 0; j < data[i].drilldown.data.length; j++) {
var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: 'Browser market share, April, 2011'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
innerSize: '60%',
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
}
}
}]
});
});
</h:outputScript>
</h:head>
<h:body>
<script type="text/javascript" src="../../resources/javascript/highchart/highcharts.js"></script>
<script type="text/javascript" src="../../resources/javascript/highchart/modules/exporting.js"></script>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</h:body>
</html>
But when I try to run gives me this error:
Error Parsing /showroom/report.xhtml: Error Traced[line: 71] The content of elements must consist of well-formed character data or markup.
The referred line is :
for (var i = 0; i < data.length; i++) {
I don't know what's wrong with this, I always import the HTML code to JSF and never happens this error.
How to solve this ?
734
This is not HTML code, this is JavaScript code. The JavaScript language has several operators which are special characters in XML (Facelets is a XHTML+XML based view technology), such as <, > and &. They needs to be escaped to <, > and & to prevent the XML parser from literally interpreting them as XML.
for (var i = 0; i < data.length; i++) {
An alternative is to wrap the entire JS code inside a <![CDATA[ ... ]]> block.
Better, however, is to put that JS code in its own JS file and include it by <h:outputScript>, e.g.
<h:outputScript name="global.js" />
Unrelated to the concrete problem, you're not taking benefit of JSF resource management. I'd suggest to replace
<script type="text/javascript" src="../../resources/javascript/highchart/highcharts.js"></script>
<script type="text/javascript" src="../../resources/javascript/highchart/modules/exporting.js"></script>
by
<h:outputScript name="javascript/highchart/highcharts.js" />
<h:outputScript name="javascript/highchart/modules/exporting.js" />
This way you don't need to fiddle with error prone URI-relative paths.
Update: as per comments, you'd like to pass some Java variables to the script file. You could do that by printing a Java object (which can be a javabean or a Map<String, Object>) as JSON object as if it is a global JS variable.
<h:outputScript>var data = ${bean.dataAsJson};</h:outputScript>
with e.g. (with help of Gson)
public String getDataAsJson() {
return gson.toJson(someBeanOrSomeMap);
}
(or just create the JSON object already during managed bean's (post)construction)
The script will be able to access it as data.someBeanPropertyOrMapKey.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
