CODEWITHSUNDEEP
chart.js
user1104028
user1104028

Reputation: 393

ChartJS does not display when using local Chart.js file

I am having a problem getting Chart.js to display a Chart when using the Chart.min.js file that was installed as a result of using: npm install chart.js --save (However, if use the CDN supplied file - the chart will display)

To avoid putting paths into my code, I copied the Chart.min.js file from the install directory: ./node_modules/chart_js/dist/Chart.min.js to the directory where my web page is. Was this the right file to copy? Anyways, when I reload the App into the Browser, I get a blank display. There are no error messages at all.

However, if I instead use the CDN supplied file: <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>

Everything works. The Chart fully displays.

Here is the HTML file:

<html>
<head>
    <meta charset="utf-8"/>
    <title>Chart.js demo</title>
    <script src="Chart.min.js" </script>

</head>
<body>


    <h1>Chart.js Sample</h1>

    <canvas id="countries" width="600" height="400"></canvas>
        <script>
        var pieData = [
            {
                value: 20,
                color:"#878BB6"
            },
            {
                value : 40,
                color : "#4ACAB4"
            },
            {
                value : 10,
                color : "#FF8153"
            },
            {
                value : 30,
                color : "#FFEA88"
            }
        ];
        // Get the context of the canvas element we want to select
        var countries= document.getElementById("countries").getContext("2d");
        new Chart(countries).Pie(pieData);
    </script>
</body>
</html>

So, what am I doing wrong? Is there an issue with the download?

Appreciate any help with this!

I am running on Mac OS X 10.10.5 I have tried this using both the Safari and FireFox browsers, and have the same issue of the local Chart.min.js file not working.

Upvotes: 1

Views: 7959

Answers (2)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32879

You better use the latest syntax for creating your chart, instead of old one.

also, this is the correct directory where chart.js file resides, when installed through npm :

./node_modules/chart.js/dist/Chart.min.js

Here is the full code that works perfectly on Chrome, Firefox and Safari :

<html>

<head>
    <meta charset="utf-8" />
    <title>Chart.js demo</title>
    <script src="./node_modules/chart.js/dist/Chart.min.js"></script>
</head>

<body>
    <h1>Chart.js Sample</h1>
    <div class="chart-container" style="width: 600px; height: 400px">
        <canvas id="countries"></canvas>
    </div>

    <script>
        var pieData = {
            datasets: [{
                data: [20, 40, 10, 30],
                backgroundColor: ["#878BB6", "#4ACAB4", "#FF8153", "#FFEA88"]
            }]
        };

        // Get the context of the canvas element we want to select
        var countries = document.getElementById("countries").getContext("2d");
        new Chart(countries, {
            type: 'pie',
            data: pieData
        });
    </script>
</body>

</html>

Upvotes: 3

Naren Murali
Naren Murali

Reputation: 58071

I think the problem must be the improper closing of the script tag. See below.

Before:

 <script src="Chart.min.js" </script>

After:

 <script src="Chart.min.js"></script>

Here is a demo with a local Chart.min.js File for your reference!

JSFiddle Demo

Upvotes: 0

Related Questions