How to implement a gauge solid chart in JSF

Question

I'm new in JSF and I want to add a highchart solid gauge in my jsf page, but I implment the demo code and when I run it, it throws me this...

Error Parsing /index.xhtml: Error Traced[line: 185] El nombre de la entidad debe aparecer inmediatamente después de '&' en la referencia de entidades.
 javax.faces.view.facelets.FaceletException: Error Parsing /index.xhtml: Error Traced[line: 185] El nombre de la entidad debe aparecer inmediatamente después de '&' en la referencia de entidades.

this is the code of the index

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/highcharts-more.js"></script>

        <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

        <div style="width: 600px; height: 400px; margin: 0 auto">
            <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
            <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
        </div>
        <script type="text/javascript">
            $(function () {

                var gaugeOptions = {

                    chart: {
                        type: 'solidgauge'
                    },

                    title: null,

                    pane: {
                        center: ['50%', '85%'],
                        size: '140%',
                        startAngle: -90,
                        endAngle: 90,
                        background: {
                            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                            innerRadius: '60%',
                            outerRadius: '100%',
                            shape: 'arc'
                        }
                    },

                    tooltip: {
                        enabled: false
                    },

                    // the value axis
                    yAxis: {
                        stops: [
                            [0.1, '#55BF3B'], // green
                            [0.5, '#DDDF0D'], // yellow
                            [0.9, '#DF5353'] // red
                        ],
                        lineWidth: 0,
                        minorTickInterval: null,
                        tickAmount: 2,
                        title: {
                            y: -70
                        },
                        labels: {
                            y: 16
                        }
                    },

                    plotOptions: {
                        solidgauge: {
                            dataLabels: {
                                y: 5,
                                borderWidth: 0,
                                useHTML: true
                            }
                        }
                    }
                };

                // The speed gauge
                var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
                    yAxis: {
                        min: 0,
                        max: 200,
                        title: {
                            text: 'Speed'
                        }
                    },

                    credits: {
                        enabled: false
                    },

                    series: [{
                        name: 'Speed',
                        data: [80],
                        dataLabels: {
                            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                                   '<span style="font-size:12px;color:silver">km/h</span></div>'
                        },
                        tooltip: {
                            valueSuffix: ' km/h'
                        }
                    }]

                }));

                // The RPM gauge
                var chartRpm = Highcharts.chart('container-rpm', Highcharts.merge(gaugeOptions, {
                    yAxis: {
                        min: 0,
                        max: 5,
                        title: {
                            text: 'RPM'
                        }
                    },

                    series: [{
                        name: 'RPM',
                        data: [1],
                        dataLabels: {
                            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
                                   '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
                        },
                        tooltip: {
                            valueSuffix: ' revolutions/min'
                        }
                    }]

                }));

                // Bring life to the dials
                setInterval(function () {
                    // Speed
                    var point,
                        newVal,
                        inc;

                    if (chartSpeed) {
                        point = chartSpeed.series[0].points[0];
                        inc = Math.round((Math.random() - 0.5) * 100);
                        newVal = point.y + inc;

                        if (newVal < 0 || newVal > 200) {
                            newVal = point.y - inc;
                        }

                        point.update(newVal);
                    }

                    // RPM
                    if (chartRpm) {
                        point = chartRpm.series[0].points[0];
                        inc = Math.random() - 0.5;
                        newVal = point.y + inc;

                        if (newVal < 0 || newVal > 5) {
                            newVal = point.y - inc;
                        }

                        point.update(newVal);
                    }
                }, 2000);


            });
        </script>
    </h:body>
</html>

I don't know what I'm doing wrong, hope somebody can help me

Post your error in google: https://www.google.nl/search?q=El+nombre+de+la+entidad+debe+aparecer+inmediatamente+despu%C3%A9s+de+%27%26%27+en+la+referencia+de+entidades and look at the line number it gives (posting the english error will even give you more results. I therefor always suggest to run an english jdk) — Kukeltje, Nov 22 '16 at 19:08
Possible duplicate of [Why do ampersands (&) need to be encoded in JSF? Is there a way around this?](http://stackoverflow.com/questions/11086709/why-do-ampersands-need-to-be-encoded-in-jsf-is-there-a-way-around-this) — Kukeltje, Nov 22 '16 at 22:32

score 0 · Answer 1 · answered Nov 22 '16 at 21:51

0

JSF using Facelets is based on XML so the ampersands (&) are gonna be taken as an entity instead of the and conditional operator in java and most programming languages. so If you want to use it in your facelets you must change all the & with & which is the ampersand entity.

answered Nov 22 '16 at 21:51

Esteban Rincon

2,040
3
27
44

1

As can be found in the duplicate: http://stackoverflow.com/questions/11086709/why-do-ampersands-need-to-be-encoded-in-jsf-is-there-a-way-around-this It is good practice in StackOverflow to search for those and mark questions as such. Keeps SO 'clean' – Kukeltje Nov 22 '16 at 22:32

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

This problem is caused by not using CData. You should use CDATA for this

//<![CDATA[
   //javascript code
//]]>

what does mean CDATA What does <![CDATA[]]> in XML mean?

edited May 23 '17 at 12:30

Community

1
1

answered Nov 22 '16 at 22:18

Ömer Faruk Kurt

500
3
14

1

As can be found in the duplicate: http://stackoverflow.com/questions/11086709/why-do-ampersands-need-to-be-encoded-in-jsf-is-there-a-way-around-this. It is good practice in StackOverflow to search for those and mark questions as such. Keeps SO 'clean' – Kukeltje Nov 22 '16 at 22:32
wow you're right, this solved that error problem, now I don't know why it doesn't show me anything in the screen, you think I'm missing something?? – Oscnicvaz Nov 22 '16 at 22:47

How to implement a gauge solid chart in JSF

2 Answers2