How can i run a javascript/Canvas script twice on one page?

Question

I am using this the following code to display a graph on my page:

<div class="container">
  <div>
    <canvas id="canvas"></canvas>
  </div>
</div>

<script>
var lineChartData = {
    labels: [$chartmonths],
    datasets: [{
        fillColor: "rgba(220,220,220,0)",
        strokeColor: "rgba(142,250,0,1)",
        pointColor: "rgba(142,250,0,1)",
        data: [$chartwinrate]
    }, {
        fillColor: "rgba(151,187,205,0)",
        strokeColor: "rgba(0,191,255,1)",
        pointColor: "rgba(0,191,255,1)",
        data: [$chartroi]
    }]

}

Chart.defaults.global.animationSteps = 100;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,160,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;

var ctx = document.getElementById("canvas").getContext("2d");
var LineChartDemo = new Chart(ctx).Line(lineChartData, {
    pointDotRadius: 8,
    bezierCurve: true,
    scaleShowVerticalLines: true,
    scaleGridLineColor: "white"
});

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

It works, however i would like to display another graph, i have tried using the same code but adding container ID's and changing the canvas ID but it doesnt seem to work:

   <div class="container" id="second">
      <div>
        <canvas id="canvas"></canvas>
      </div>
    </div>

Ony the first graph is displayed, how do i run this multiple times on one page?

Ion · Accepted Answer · 2019-12-15 19:39:03Z

1

You have to change the ID of the canvas element too <canvas id="second-canvas"></canvas>

Then you could change this line document.getElementById('second-canvas') Ideally you would encapsulate the canvas creation code so that it receives the ID of the element.

answered Dec 15, 2019 at 19:39

Ion

1,30214 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can i run a javascript/Canvas script twice on one page?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related