The Altair Community is migrating to a new platform to provide a better experience for you. In preparation for the migration, the Altair Community is on read-only mode from October 28 - November 6, 2024. Technical support via cases will continue to work as is. For any urgent requests from Students/Faculty members, please submit the form linked here

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-RapidMiner, 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-RapidMiner, 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.