CODEWITHSUNDEEP
javascriptjqueryhighcharts
Simone Baldoni
Simone Baldoni

Reputation: 127

highcharts error #13 histogram

I've copied just the code in Highcharts demo, but this histogram does not appear and console says: "Highcharts error #13: www.highcharts.com/errors/13". It seems to have forgotten something, but i don't know what... Please help. Thanks!

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js></script>
<script>
var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 
4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2, 
3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3, 
3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3, 
2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3, 
2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3, 
2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6, 3.2, 
2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 
3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7, 3.2, 
3.3, 3, 2.5, 3, 3.4, 3];

Highcharts.chart('container', {
    title: {
    text: 'Highcharts Histogram'
},
xAxis: [{
    title: { text: 'Data' }
}, {
    title: { text: 'Histogram' },
    opposite: true
}],

yAxis: [{
    title: { text: 'Data' }
}, {
    title: { text: 'Histogram' },
    opposite: true
}],

series: [{
    name: 'Histogram',
    type: 'histogram',
    xAxis: 1,
    yAxis: 1,
    baseSeries: 's1',
    zIndex: -1
}, {
    name: 'Data',
    type: 'scatter',
    data: data,
    id: 's1',
    marker: {
        radius: 1.5
    }
}]
});
</script>
<div id="container" height="400px" width="800px"></div>

Upvotes: 2

Views: 360

Answers (2)

kmc059000
kmc059000

Reputation: 3067

It works in JSFiddle https://jsfiddle.net/dgdcnmwx/

First, the HTML you posted is invalid HTML. Your second script is missing a closing ". The div's id has invisible white space characters. There is no html element, etc.

Your HTML should look like this:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
    </head>
    <body>
    <div id="container" height="400px " width="800px "></div> 
    </body>
    <script>
        var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 
        4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2, 
        3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3, 
        3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3, 
        2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3, 
        2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3, 
        2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6, 3.2, 
        2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 
        3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7, 3.2, 
        3.3, 3, 2.5, 3, 3.4, 3];

        Highcharts.chart('container', {
            title: {
            text: 'Highcharts Histogram'
        },
        xAxis: [{
            title: { text: 'Data' }
        }, {
            title: { text: 'Histogram' },
            opposite: true
        }],

        yAxis: [{
            title: { text: 'Data' }
        }, {
            title: { text: 'Histogram' },
            opposite: true
        }],

        series: [{
            name: 'Histogram',
            type: 'histogram',
            xAxis: 1,
            yAxis: 1,
            baseSeries: 's1',
            zIndex: -1
        }, {
            name: 'Data',
            type: 'scatter',
            data: data,
            id: 's1',
            marker: {
                radius: 1.5
            }
        }]
        });
    </script>
</html>

Upvotes: 1

Herohtar
Herohtar

Reputation: 5613

The only problem I see is that you are missing a double quote in your second <script> tag. Otherwise, it seems to work fine.

var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 
4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2, 
3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3, 
3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3, 
2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3, 
2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3, 
2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6, 3.2, 
2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 
3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7, 3.2, 
3.3, 3, 2.5, 3, 3.4, 3];

Highcharts.chart('container', {
    title: {
    text: 'Highcharts Histogram'
},
xAxis: [{
    title: { text: 'Data' }
}, {
    title: { text: 'Histogram' },
    opposite: true
}],

yAxis: [{
    title: { text: 'Data' }
}, {
    title: { text: 'Histogram' },
    opposite: true
}],

series: [{
    name: 'Histogram',
    type: 'histogram',
    xAxis: 1,
    yAxis: 1,
    baseSeries: 's1',
    zIndex: -1
}, {
    name: 'Data',
    type: 'scatter',
    data: data,
    id: 's1',
    marker: {
        radius: 1.5
    }
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
<div id="container" height="400px" width="800px"></div>

Upvotes: 2

Related Questions