Options

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

  • Options
    Marco_BoeckMarco_Boeck Administrator, Moderator, Employee, Member, University Professor Posts: 1,993 RM Engineering
    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
  • Options
    MarcoBarradasMarcoBarradas Administrator, Employee, RapidMiner Certified Analyst, Member Posts: 272 Unicorn
    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.
  • Options
    Marco_BoeckMarco_Boeck Administrator, Moderator, Employee, Member, University Professor Posts: 1,993 RM Engineering
    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
  • Options
    MarcoBarradasMarcoBarradas Administrator, Employee, RapidMiner Certified Analyst, Member Posts: 272 Unicorn
    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.
Sign In or Register to comment.