HIghCharts GAUGE

MarcoBarradas

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>

Marco_Boeck

Hi,

you are missing JQuery. Add this to the scripts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Regards,
Marco

MarcoBarradas

I'm under Server 2.4 tried your suggestion and recieve a blank page.
I believe maybe I'm calling twice the highcharts library, Is there a way to call the library that RapidMiner Server has locally?
My other theory it has something related to https, my server is configured using a certificate.
Thanks.

Marco_Boeck

Hi,

Note that the order of script imports is important - it won't work in the wrong order. This order works for me:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://www.mlganalitica.mx:8443/RA/static/javascript/jquery/plugins/jquery.desaturate.js"></script>
<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>

If you want to use the shipped versions (gauge is not part of the shipped version), you can use these imports:

<script src="/static/javascript/html5/highcharts/jquery-1.8.2.min.js"></script>
<script src="/static/javascript/html5/highcharts/highcharts.js"></script>
<script src="/static/javascript/html5/highcharts/highcharts-more.js"></script>
<script src="/static/javascript/html5/highcharts/modules/exporting.js"></script>
<script src="/static/javascript/html5/highcharts/modules/no-data-to-display.js"></script>

Note that your document has to be in an iframe to prevent it from having access to the (very outdated) JQuery version which is part of the regular Server web pages.

Regards,
Marco

MarcoBarradas

Thanks the answer helped a lot, now I can use the Gauge.
Could you please edit the url of my server on your response? =D

Best Regards.