Skip to main content
Formato Código
Origen Enlace
Juan Pinzón
  • 9.3k
  • 20
  • 54
  • 84
$(function () {

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

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);
    }
});
});

});

$(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);
    }
});

});

$(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);
    }
});
});
Origen Enlace

Porque no me trae la grafica?

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.