Options

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

  • Options
    Marco_BoeckMarco_Boeck Administrator, Moderator, Employee, Member, University Professor Posts: 1,993 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
  • Options
    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>
  • Options
    Marco_BoeckMarco_Boeck Administrator, Moderator, Employee, Member, University Professor Posts: 1,993 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.