I am currently working on generating a dynamic pie chart programmatically with the intention of transforming it into a reusable React Component. The main idea is to have an interactive pie chart where each slice expands into a full pie when clicked. I came across this tutorial on creating pie charts, and towards the end, there is some JS code that I attempted to implement. However, upon testing, I encountered an error message stating:
Uncaught Reference Error: $$ is not defined.https://i.stack.imgur.com/0fonJ.png
My assumption is that this issue is related to the fact that the code does not utilize jQuery and simply relies on Vanilla JS. Despite importing jQuery through a CDN, the same error persisted. After perusing through this Stack Overflow post, my speculation is that $$ may just be a type of variable naming convention.
Presented below is the content of the index.html file, which doesn't contain any groundbreaking elements.
<body>
<div class="pie">20%</div>
<div class="pie">60%</div>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script type="text/javascript">
$$('.pie').forEach(function(pie) {
var p = parseFloat(pie.textContent);
var NS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(NS, "svg");
var circle = document.createElementNS(NS, "circle");
var title = document.createElementNS(NS, "title");
circle.setAttribute("r", 16);
circle.setAttribute("cx", 16);
circle.setAttribute("cy", 16);
circle.setAttribute("stroke-dasharray", p + " 100");
svg.setAttribute("viewBox", "0 0 32 32");
title.textContent = pie.textContent;
pie.textContent = '';
svg.appendChild(title);
svg.appendChild(circle);
pie.appendChild(svg);
});
</script>
</body>
What could be causing this error? Is there a misunderstanding on my part? Could the tutorial I'm following be outdated or incorrect? Thank you!