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 Team Lead Software Engineering Moderator, Employee, Member, University Professor Posts: 1,768   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 Team Lead Software Engineering Moderator, Employee, Member, University Professor Posts: 1,768   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.