HIghCharts GAUGE

MarcoBarradasMarcoBarradas Administrator, Employee, RapidMiner Certified Analyst, Member Posts: 272 Unicorn
edited November 2018 in Help
Hi I'm trying to use a Highchart Gauge, since it's not part of the standar deployment I create a process that writes the HTML.
Unfortunately it's not working.
I tried the same approach with a google gauge an it worked.
Can you help me?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<process version="6.4.000">
 <context>
   <input/>
   <output/>
   <macros/>
 </context>
 <operator activated="true" class="process" compatibility="6.4.000" expanded="true" name="Process">
   <process expanded="true">
     <operator activated="true" class="text:create_document" compatibility="6.4.001" expanded="true" height="60" name="Create Document" width="90" x="514" y="30">
       <parameter key="text" value="&lt;html&gt;&#10;&lt;head&gt;&#10;&lt;script src=&quot;https://myurl:8443/RA/static/javascript/jquery/plugins/jquery.desaturate.js&quot;&gt;&lt;/script&gt;&#10;&lt;script src=&quot;http://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;&#10;&lt;script src=&quot;http://code.highcharts.com/highcharts-more.js&quot;&gt;&lt;/script&gt;&#10;&lt;script src=&quot;http://code.highcharts.com/modules/solid-gauge.js&quot;&gt;&lt;/script&gt;&#10;&#9;&lt;script&gt;&#10;$(function () {&#10;    var gaugeOptions = {&#10;        chart: {&#10;            type: 'solidgauge'&#10;        },&#10;        title: null,&#10;        pane: {&#10;            center: ['50%', '85%'],&#10;            size: '140%',&#10;            startAngle: -90,&#10;            endAngle: 90,&#10;            background: {&#10;                backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.background2) || '#EEE',&#10;                innerRadius: '60%',&#10;                outerRadius: '100%',&#10;                shape: 'arc'&#10;            }&#10;        },&#10;        tooltip: {&#10;            enabled: false&#10;        },&#10;        // the value axis&#10;        yAxis: {&#10;            stops: [&#10;                [0.1, '#55BF3B'], // green&#10;                [0.5, '#DDDF0D'], // yellow&#10;                [0.9, '#DF5353'] // red&#10;            ],&#10;            lineWidth: 0,&#10;            minorTickInterval: null,&#10;            tickPixelInterval: 400,&#10;            tickWidth: 0,&#10;            title: {&#10;                y: -70&#10;            },&#10;            labels: {&#10;                y: 16&#10;            }&#10;        },&#10;        plotOptions: {&#10;            solidgauge: {&#10;                dataLabels: {&#10;                    y: 5,&#10;                    borderWidth: 0,&#10;                    useHTML: true&#10;                }&#10;            }&#10;        }&#10;    };&#10;&#10;    // The speed gauge&#10;    $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {&#10;        yAxis: {&#10;            min: 0,&#10;            max: 100,&#10;            title: {&#10;                text: 'Objetivo'&#10;            }&#10;        },&#10;        credits: {&#10;            enabled: false&#10;        },&#10;        series: [{&#10;            name: 'Speed',&#10;            data: [80],&#10;            dataLabels: {&#10;                format: '&lt;div style=&quot;text-align:center&quot;&gt;&lt;span style=&quot;font-size:25px;color:' +&#10;                    ((Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || 'black') + '&quot;&gt;{y}&lt;/span&gt;&lt;br/&gt;' +&#10;                       '&lt;span style=&quot;font-size:12px;color:silver&quot;&gt;km/h&lt;/span&gt;&lt;/div&gt;'&#10;            },&#10;            tooltip: {&#10;                valueSuffix: ' km/h'&#10;            }&#10;        }]&#10;&#10;    }));&#10;&#10;});&#10;&lt;/script&gt;&#10;&lt;/head&gt;&#10;&lt;body&gt;&#10;&lt;div style=&quot;width: 600px; height: 400px; margin: 0 auto&quot;&gt;&#10;&#9;&lt;div id=&quot;container-speed&quot; style=&quot;width: 300px; height: 200px; float: left&quot;&gt;&lt;/div&gt;&#10;&#9;&lt;div id=&quot;container-rpm&quot; style=&quot;width: 300px; height: 200px; float: left&quot;&gt;&lt;/div&gt;&#10;&#9;&lt;/div&gt;&#10;&lt;/body&gt;&#10;&lt;/html&gt;"/>
     </operator>
     <connect from_op="Create Document" from_port="output" to_port="result 1"/>
     <portSpacing port="source_input 1" spacing="0"/>
     <portSpacing port="sink_result 1" spacing="0"/>
     <portSpacing port="sink_result 2" spacing="0"/>
   </process>
 </operator>
</process>

Tagged:

Answers

Sign In or Register to comment.