Due to recent updates, all users are required to create an Altair One account to login to the RapidMiner community. Click the Register button to create your account using the same email that you have previously used to login to the RapidMiner community. This will ensure that any previously created content will be synced to your Altair One account. Once you login, you will be asked to provide a username that identifies you to other Community users. Email us at Community with questions.

HighCharts

Gonzo_MoraGonzo_Mora Member Posts: 2 Contributor I
edited November 2018 in Help
Hi I'm trying to use a Highchart with "Higchartt context menú" but when I use it in server the  "Higchartt context menú" disappears
Can you help me? 
<!DOCTYPE html>
<html>
<head>
<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>
	<script>
$(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: [
                [1000, '#DF5353'], // green55BF3B
                [5000, '#DDDF0D'], // yellow
                [8000, '#55BF3B'] // redDF5353
            ],
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                y: -70
            },
            labels: {
                y: 16
            }
        },
        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };

    // The speed gauge
    $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: 'Entregas en Tiempo'
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Speed',
            data: [77.770],
            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">kpi</span></div>'
            },
            tooltip: {
                valueSuffix: ' Cupones'
            }
        }]

    }));

});
</script>
</head>
<body>
<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>
</body>
</html>
Tagged:

Answers

  • Marco_BoeckMarco_Boeck Administrator, Moderator, Employee, Member, University Professor Posts: 1,996 RM Engineering
    Hi,

    I don't understand the question. Are you talking about the export functionality? http://www.highcharts.com/docs/export-module/export-module-overview
    If so, the HTML you posted does not contain the necessary code at all.

    Regards,
    Marco
  • Gonzo_MoraGonzo_Mora Member Posts: 2 Contributor I
    Hi!

    It´s right, I was talking about the export functionality.  I sent you the correct code,when  I use it in server this functionality disappears.

      
    <!DOCTYPE html>
    <html>
    <head>
    <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>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    	<script>
    $(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: [
                    [1000, '#DF5353'], // green55BF3B
                    [5000, '#DDDF0D'], // yellow
                    [8000, '#55BF3B'] // redDF5353
                ],
                lineWidth: 0,
                minorTickInterval: null,
                tickPixelInterval: 400,
                tickWidth: 0,
                title: {
                    y: -70
                },
                labels: {
                    y: 16
                }
            },
            plotOptions: {
                solidgauge: {
                    dataLabels: {
                        y: 5,
                        borderWidth: 0,
                        useHTML: true
                    }
                }
            }
        };

        // The speed gauge
        $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
            yAxis: {
                min: 0,
                max: 100,
                title: {
                    text: 'Entregas en Tiempo'
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Speed',
                data: [77.809],
                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">kpi</span></div>'
                },
                tooltip: {
                    valueSuffix: ' Cupones'
                }
            }]

        }));

    });
    </script>
    </head>
    <body>
    <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>
    </body>
    </html>
  • Marco_BoeckMarco_Boeck Administrator, Moderator, Employee, Member, University Professor Posts: 1,996 RM Engineering
    Hi,

    have you looked at what your browser debug tools (F12 in Chrome) say? There might be an error logged by HighCharts.

    Regards,
    Marco
Sign In or Register to comment.