HIghCharts GAUGE

Marco_Barradas
Marco_Barradas
Altair Employee
edited November 5 in Community Q&A
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

Categories