JS, HTML5 - PieChart not loading in

Question

im trying to loade a PieChart from my js file in to a div in the HTML code. But I can't get it to work except from when I have a script containing the js code in the HTML code. But I want to have the code separated.

Here is my code so far:

Index.html

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="Scripts\Chart.js"></script>
    <script type="text/javascript" src="Scripts\canvasjs.min.js"></script>
</head>
<body>
    <div>
        <div id="chartContainer" onload="LoadPieChart()" style="height: 300px; width: 300px; margin-left:auto; margin-right:auto; background-color:#323232;"></div>
    </div>
</body>

Chart.js

function LoadPieChart() {

        var chart = new CanvasJS.Chart("#chartContainer", {
            theme: "theme2",//theme1
            title: {
                text: "Stats"
            },
            legend: {
                verticalAlign: "bottom",
                horizontalAlign: "center"
            },
            data: [
            {
                // Change type to "bar", "splineArea", "area", "spline", "pie",etc.
                indexLabelFontSize: 20,
                indexLabelFontFamily: "Monospace",
                indexLabelFontColor: "darkgrey",
                indexLabelLineColor: "darkgrey",
                indexLabelPlacement: "outside",
                type: "pie",
                showInLegend: true,
                toolTipContent: "{y} - <strong>#percent%</strong>",
                dataPoints: [
                { label: "Stat1", y: 30, color: "#5877F5", exploded: true, legendText: "30%" },
                { label: "Stat2", y: 70, color: "#EB483F", legendText: "70%" }
                ]
            }
            ]
        });

        chart.render();

}

Or use the built in jQuery onload function http://learn.jquery.com/using-jquery-core/document-ready/ — Steve, Oct 16 '14 at 16:28
http://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div — Steve, Oct 16 '14 at 16:29

score 0 · Answer 1 · answered Oct 16 '14 at 17:19

I solved the problem like this:

<script type="text/javascript">
        window.onload = LoadChart;
</script>

HTML:

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="Scripts\Chart.js"></script>
    <script type="text/javascript" src="\Scripts\canvasjs.min.js"></script>

    <script type="text/javascript">
        window.onload = LoadChart;
    </script>
</head>
<body>
    <div>
        <div id="chartContainer" style="height: 300px; width: 300px; margin-left:auto; margin-right:auto;"></div>
    </div>
</body>
</html>

JS:

function LoadChart() {

    var chart = new CanvasJS.Chart("chartContainer", {
        theme: "theme2",//theme1
        title: {
            text: "Stats"
        },
        legend: {
            verticalAlign: "bottom",
            horizontalAlign: "center"
        },
        data: [
        {
            // Change type to "bar", "splineArea", "area", "spline", "pie",etc.
            indexLabelFontSize: 20,
            indexLabelFontFamily: "Monospace",
            indexLabelFontColor: "darkgrey",
            indexLabelLineColor: "darkgrey",
            indexLabelPlacement: "outside",
            type: "pie",
            showInLegend: true,
            toolTipContent: "{y} - <strong>#percent%</strong>",
            dataPoints: [
            { label: "Stat1", y: 30, color: "#5877F5", exploded: true, legendText: "30%" },
            { label: "Stat2", y: 70, color: "#EB483F", legendText: "70%" }
            ]
        }
        ]
    });

    chart.render();

JS, HTML5 - PieChart not loading in

Index.html

Chart.js

1 Answers1

HTML:

JS: