5

Buenas Tardes Estoy realizando una gráfica con js y ya tengo la gráfica a la hora de mostrarla no se visualiza Este es script

$(function () {
var tope = 100;
var acum = 73;
$('#container').highcharts({

    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },

    title: {
        text: 'Ventas'
    },

    pane: {
        startAngle: -160,
        endAngle: 160,
        background: [{
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#FFF'],
                    [1, '#333']
                ]
            },
            borderWidth: 0,
            outerRadius: '109%'
        }, {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#333'],
                    [1, '#FFF']
                ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            // default background
        }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: tope*1.2,

        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: 'x $10 Mill'
        },
        plotBands: [{
            from: 0,
            to: tope*.2,
            color: '#DF5353' // rojo
        },{
            from: tope*.2,
            to: tope*.4,
            color: '#FE9A2E' // rojo
        }, {
            from: tope*.4,
            to: tope*.75,
            color: '#DDDF0D' // naranja
        }, {
            from: tope*.75,
            to: tope,
            color: '#55BF3B' // Amarillo
        }, {
            from: tope,
            to: tope*1.2,
            color: '#58D3F7' // Verde
        }]
    },

    series: [{
        name: 'Acum',
        data: [acum],
        tooltip: {
            valueSuffix: ''
        }
    }]

},
// Add some life
function (chart) {
    if (!chart.renderer.forExport) {
        setInterval(function () {
            var point = chart.series[0].points[0],
                newVal,
                inc = Math.round((Math.random() - 0.5) * 20);

            //newVal = point.y + inc;
            newVal = acum;
            if (newVal < 0 || newVal > tope*1.2) {
                newVal = point.y - inc;
            }

            point.update(newVal);

        }, 3000);
    }
});
});

¿Cual puede ser el Error, Porque no me funciona? Agradecería mucho algo de ayuda.

3
  • Cuales librerias esta usando?
    – Byron
    Commented el 29 sept. 2016 a las 22:40
  • 1
    Byron, el OP está usando highcharts. @CristianDagnover, decir "no funciona" no ayuda en nada. Debes agregar más datos, por ejemplo si ya viste la consola del navegador en busca de errores, etc. Cuando preguntes trata de seguir este esquema.
    – gugadev
    Commented el 29 sept. 2016 a las 22:49
  • 1
    correcto pero highcharts, al igual que muchas librería, no consta solo de un js. como podes verificar en es cdn, esta librería tiene bastantes archivos. code.highcharts.com
    – Byron
    Commented el 29 sept. 2016 a las 22:58

1 respuesta 1

5

Lo único que te falta es incluir el archivo highcharts-more.js, o quizás tengas referenciada una versión antigua, pero así funciona bien para mi:

$(function () {
var tope = 100;
var acum = 73;
$('#container').highcharts({

    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },
    title: {
        text: 'Ventas'
    },
    pane: {
        startAngle: -160,
        endAngle: 160,
        background: [{
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#FFF'],
                    [1, '#333']
                ]
            },
            borderWidth: 0,
            outerRadius: '109%'
        }, {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#333'],
                    [1, '#FFF']
                ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            // default background
        }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: tope*1.2,

        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: 'x $10 Mill'
        },
        plotBands: [{
            from: 0,
            to: tope*.2,
            color: '#DF5353' // rojo
        },{
            from: tope*.2,
            to: tope*.4,
            color: '#FE9A2E' // rojo
        }, {
            from: tope*.4,
            to: tope*.75,
            color: '#DDDF0D' // naranja
        }, {
            from: tope*.75,
            to: tope,
            color: '#55BF3B' // Amarillo
        }, {
            from: tope,
            to: tope*1.2,
            color: '#58D3F7' // Verde
        }]
    },

    series: [{
        name: 'Acum',
        data: [acum],
        tooltip: {
            valueSuffix: ''
        }
    }]

},
// Add some life
function (chart) {
    if (!chart.renderer.forExport) {
        setInterval(function () {
            var point = chart.series[0].points[0],
                newVal,
                inc = Math.round((Math.random() - 0.5) * 20);

            //newVal = point.y + inc;
            newVal = acum;
            if (newVal < 0 || newVal > tope*1.2) {
                newVal = point.y - inc;
            }

            point.update(newVal);

        }, 3000);
    }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container"></div>

Como recomendación, debes siempre verificar por ti mismo la consola de errores, ya que claramente reportaba el error 17.

7
  • 1
    Si no estás seguro de la causa del problema ni de su solución y tengas sospechas como ésta, por favor, escríbelas como comentario. Puedes copiar tu respuesta y pegarla como comentario y luego eliminar ésta respuesta.
    – gugadev
    Commented el 29 sept. 2016 a las 22:50
  • 1
    Gracias por su comentario, pero con los insumos suministrados, logre reproducir error, en la consola indicaba código 17, este debería ser un lugar de aprendizaje, cordial, pero es común que en SO no se acoja bien a los nuevos usuarios
    – Byron
    Commented el 29 sept. 2016 a las 22:57
  • 4
    Byron, los nuevos usuarios son bienvenidos. El sitio tiene su propia cultura y el espacio Tu Respuesta está destinado para aquellos aportes que plantean una solución al problema original. Leyendo tu aporte, veo que plantea una solución, pero está redactado de manera que pareciera que pide una aclaración al usuario, y no como una respuesta que plantea una solución. Mi sugerencia es que sea editado para reflejar la solución.
    – jachguate
    Commented el 29 sept. 2016 a las 23:34
  • 1
    Es más, voy a editarlo yo, y si no estás de acuerdo con la edición, puedes revertirla.
    – jachguate
    Commented el 29 sept. 2016 a las 23:34
  • 1
    Gracias @jachguate, definitivamente queda mucho mas claro.
    – Byron
    Commented el 30 sept. 2016 a las 14:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.