How to import the Chart.js library into an ASP file?

Asked

Viewed 211 times

0

I am trying to insert a chart with Chart.js into an ASP page (not ASP.NET). I saw some tutorials from Chart.js itself and found the following statement:

You can download the Latest version of Chart.js from the Github releases.

[...]

Chart.js can be installed via npm or Bower.

For npm:
npm install chart.js --save

[...]

Chart.js can be Integrated with Plain Javascript or with Different module loaders. The example in Below show how to load Chart.js in Script mode.
<script src="path/to/chartjs/dist/Chart.js"></script>.

So I interpreted that in "src" I need to put the path of the Chart.js file that I downloaded. So I pasted this file into the folder Library of my project. The file in which I want to insert a chart is the grafico_diario.asp, contained in the project root folder. So, in this ASP file, I put it like this:

However, the graph does not appear when I test it on the server. Can you tell me if I am importing the library correctly?

html asp chartjs

  • put the script tag on the Asp page where you will generate the chart, in src put the path where the Chart.js file is. show the error that appears in the browser console to know more details

1 answer

0

A test you could do is take the Chart CDN and include within the tags <head></head> your page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js">
</script>

And run a test, like this:

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }

  • As a result it would look like this: https://pste.eu/p/cFLG.html

Browser other questions tagged html asp chartjs

You are not signed in. Login or sign up in order to post.