CODEWITHSUNDEEP
javascriptphpjqueryhighcharts
swchen
swchen

Reputation: 783

highcharts can't work in website

I'm a new by in javascript. I want to plot a stack bar chart by using highcharts in my website. I copy the demo code here, then paste it in my php localhost, but there's no highcharts in my website. what's the problem?

code↓

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#container").highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
        series: [{
            name: 'John',
            data: [9, 10, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [8, 5, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [7, 7, 4, 2, 5]
        }]
    });
});
</script>

</head>

<body>
  <h2 align="center">HighCharts.js demo</h2>
  Where's the plot?<br>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>

Upvotes: 0

Views: 85

Answers (1)

odai
odai

Reputation: 190

Just change the script that invokes jquery and make it load before the highcharts. This is necessary because Highcharts is built on top of jquery and without it loaded before the highcharts source, it will cause errors.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>

Upvotes: 1

Related Questions