CODEWITHSUNDEEP
javascriptasp.nethighchartsgauge
Lars
Lars

Reputation: 13

Highcharts gauge not shown

I'm new to using HighCharts.

I have a problem that the first Gauge disappears when I have more than one on the page.

This example works fine:

<%@ Page Language="C#" AutoEventWireup="true" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        HighChart test
    </title>  
    <script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/highcharts/4.1.5/highcharts.js"></script>
    <script src="Scripts/highcharts/4.1.5/highcharts-more.js"></script>
    <script src="Scripts/highcharts/4.1.5/modules/solid-gauge.js"></script>    
</head>

<body style="background-color: lightgrey">
    <form runat="server">
        <div id="gauge1" style="width: 300px; height: 200px; float: left; margin: 10px;" data-highcharts-chart="0"></div>
    </form>
    <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: [
                        [0.3, '#DF5353'], // red
                        [0.5, '#DDDF0D'], // yellow
                        [0.8, '#55BF3B'] // green
                    ],
                    lineWidth: 0,
                    minorTickInterval: null,
                    tickPixelInterval: 400,
                    tickWidth: 0,
                    title: {
                        y: -70
                    },
                    labels: {
                        y: 16
                    }
                },

                plotOptions: {
                    solidgauge: {
                        dataLabels: {
                            y: 5,
                            borderWidth: 0,
                            useHTML: true
                        }
                    }
                }
            };

            // The 1 gauge
            $('#gauge1').highcharts(Highcharts.merge(gaugeOptions, {
                yAxis: {
                    min: 0,
                    max: 100,
                    title: {
                        text: 'Gauge 1'
                    }
                },

                credits: {
                    enabled: false
                },

                series: [{
                    name: 'Gauge 1',
                    data: [0],
                    dataLabels: {
                        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}&nbsp;%</span></div>'
                    },
                    tooltip: {
                        valueSuffix: ' %'
                    }
                }]

            }));

            // Bring to life 
            setInterval(function () {
                setValue('#gauge1');
            }, 2000);

            function setValue(div) {
                var chart = $(div).highcharts(), point, newVal, inc;

                if (chart) {
                    point = chart.series[0].points[0];
                    inc = Math.round((Math.random() - 0.5) * 100);
                    newVal = point.y + inc;

                    if (newVal < 0 || newVal > 100) {
                        newVal = point.y - inc;
                    }

                    point.update(newVal);
                }
            }
        });
    </script>
</body>
</html>

But when I add another Gauge the first one disappears:

<%@ Page Language="C#" AutoEventWireup="true" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        HighChart test
    </title>  
    <script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/highcharts/4.1.5/highcharts.js"></script>
    <script src="Scripts/highcharts/4.1.5/highcharts-more.js"></script>
    <script src="Scripts/highcharts/4.1.5/modules/solid-gauge.js"></script>    
</head>

<body style="background-color: lightgrey">
    <form runat="server">
        <div id="gauge1" style="width: 300px; height: 200px; float: left; margin: 10px;" data-highcharts-chart="0"></div>
        <div id="gauge2" style="width: 300px; height: 200px; float: left; margin: 10px;" data-highcharts-chart="0"></div>
    </form>
    <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: [
                        [0.3, '#DF5353'], // red
                        [0.5, '#DDDF0D'], // yellow
                        [0.8, '#55BF3B'] // green
                    ],
                    lineWidth: 0,
                    minorTickInterval: null,
                    tickPixelInterval: 400,
                    tickWidth: 0,
                    title: {
                        y: -70
                    },
                    labels: {
                        y: 16
                    }
                },

                plotOptions: {
                    solidgauge: {
                        dataLabels: {
                            y: 5,
                            borderWidth: 0,
                            useHTML: true
                        }
                    }
                }
            };

            // The 1 gauge
            $('#gauge1').highcharts(Highcharts.merge(gaugeOptions, {
                yAxis: {
                    min: 0,
                    max: 100,
                    title: {
                        text: 'Gauge 1'
                    }
                },

                credits: {
                    enabled: false
                },

                series: [{
                    name: 'Gauge 1',
                    data: [0],
                    dataLabels: {
                        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}&nbsp;%</span></div>'
                    },
                    tooltip: {
                        valueSuffix: ' %'
                    }
                }]

            }));

            // The 2 gauge
            $('#gauge2').highcharts(Highcharts.merge(gaugeOptions, {
                yAxis: {
                    min: 0,
                    max: 100,
                    title: {
                        text: 'Gauge 2'
                    }
                },

                credits: {
                    enabled: false
                },

                series: [{
                    name: 'Gauge 2',
                    data: [0],
                    dataLabels: {
                        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}&nbsp;%</span></div>'
                    },
                    tooltip: {
                        valueSuffix: ' %'
                    }
                }]

            }));

            // Bring to life 
            setInterval(function () {
                setValue('#gauge1');
                setValue('#gauge2');
            }, 2000);

            function setValue(div) {
                var chart = $(div).highcharts(), point, newVal, inc;

                if (chart) {
                    point = chart.series[0].points[0];
                    inc = Math.round((Math.random() - 0.5) * 100);
                    newVal = point.y + inc;

                    if (newVal < 0 || newVal > 100) {
                        newVal = point.y - inc;
                    }

                    point.update(newVal);
                }
            }
        });
    </script>
</body>
</html>

Anyone got a idea what I'm doing wrong.

Here are links to JSFiddle

Example 1 - https://jsfiddle.net/eszygfjb/1/

Example 2 - https://jsfiddle.net/2cfpL019/

Upvotes: 1

Views: 1879

Answers (1)

Martin Schneider
Martin Schneider

Reputation: 3268

Its because you are setting the data-highcharts-chart-Attribute on both div-elements to the same value. As far as I know this is used internally by Highcharts to determine the order in which you can access the individual charts in the Highcharts.charts-Array.

By setting them both to index zero you are basically overwriting the object instance of the first chart when you are creating the second. Just remove these attributes and both gauges display just fine.

<div id="gauge1" style="width: 300px; height: 200px; float: left; margin: 10px;"></div>
<div id="gauge2" style="width: 300px; height: 200px; float: left; margin: 10px;"></div>

Upvotes: 4

Related Questions