Implemented chart do not show

Published 6 months ago by MatusVrsansky

I try to implement chart to my project, according to example from the - https://stackoverflow.com/questions/45980436/chart-js-link-to-other-page-when-click-on-specific-section-in-chart/47506304?noredirect=1#comment81968297_47506304 , but my chart does not show... do I do something wrong, someone know, how to solve it, please??

my view:

<!DOCTYPE html>
<head>


</head>

<body>
<script>
var canvasP = document.getElementById("pieChart");
var ctxP = canvasP.getContext('2d');
var myPieChart = new Chart(ctxP, {
   type: 'pie',
   data: {
      labels: ["Värde 1", "Värde 2", "Värde 3", "Värde 4", "Värde 5", "Värde 6", "Värde 7"],
      datasets: [{
         data: [1, 5, 10, 20, 50, 70, 50],
         backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"],
         hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"]
      }]
   },
   options: {
      legend: {
         display: true,
         position: "right"
      }
   }
});

canvasP.onclick = function(e) {
   var slice = myPieChart.getElementAtEvent(e);
   if (!slice.length) return; // return if not clicked on slice
   var label = slice[0]._model.label;
   switch (label) {
      // add case for each label/slice
      case 'Värde 5':
         alert('clicked on slice 5');
         window.open('www.example.com/foo');
         break;
      case 'Värde 6':
         alert('clicked on slice 6');
         window.open('www.example.com/bar');
         break;
      // add rests ...
   }
}
</script>



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

</body>
</html>

Dry7
Dry7
6 months ago (151,680 XP)

@MatusVrsansky try to transfer the library and canvas above the code

<!DOCTYPE html>
<head>


</head>

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="pieChart"></canvas>
<script>
var canvasP = document.getElementById("pieChart");
var ctxP = canvasP.getContext('2d');
var myPieChart = new Chart(ctxP, {
   type: 'pie',
   data: {
      labels: ["Värde 1", "Värde 2", "Värde 3", "Värde 4", "Värde 5", "Värde 6", "Värde 7"],
      datasets: [{
         data: [1, 5, 10, 20, 50, 70, 50],
         backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"],
         hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"]
      }]
   },
   options: {
      legend: {
         display: true,
         position: "right"
      }
   }
});

canvasP.onclick = function(e) {
   var slice = myPieChart.getElementAtEvent(e);
   if (!slice.length) return; // return if not clicked on slice
   var label = slice[0]._model.label;
   switch (label) {
      // add case for each label/slice
      case 'Värde 5':
         alert('clicked on slice 5');
         window.open('www.example.com/foo');
         break;
      case 'Värde 6':
         alert('clicked on slice 6');
         window.open('www.example.com/bar');
         break;
      // add rests ...
   }
}
</script>




</body>
</html>
Dry7
Dry7
6 months ago (151,680 XP)

@MatusVrsansky or use window.onload

<script>
window.onload = function() {
    var canvasP = document.getElementById("pieChart");
var ctxP = canvasP.getContext('2d');
var myPieChart = new Chart(ctxP, {
   type: 'pie',
   data: {
      labels: ["Värde 1", "Värde 2", "Värde 3", "Värde 4", "Värde 5", "Värde 6", "Värde 7"],
      datasets: [{
         data: [1, 5, 10, 20, 50, 70, 50],
         backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"],
         hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"]
      }]
   },
   options: {
      legend: {
         display: true,
         position: "right"
      }
   }
});

canvasP.onclick = function(e) {
   var slice = myPieChart.getElementAtEvent(e);
   if (!slice.length) return; // return if not clicked on slice
   var label = slice[0]._model.label;
   switch (label) {
      // add case for each label/slice
      case 'Värde 5':
         alert('clicked on slice 5');
         window.open('www.example.com/foo');
         break;
      case 'Värde 6':
         alert('clicked on slice 6');
         window.open('www.example.com/bar');
         break;
      // add rests ...
   }
}
  };
</script>
MatusVrsansky

Unbelievable, it is working :) ,, great, finally, thanks so much,, and Can I ask you something else??? I am newbie in JavaScript, and need to finish my project to school.

I need to create something like '.percentage:.1f' on each Label of my chart, do you know, how to implement it, please??


var canvasP = document.getElementById("pieChart");
var ctxP = canvasP.getContext('2d');
var myPieChart = new Chart(ctxP, {
   type: 'pie',
   //tooltip: { pointFormat: '{data.labels}: <b>{point.percentage:.1f}%</b>'},
   
   title: { text: 'Mychart'},
   data: {
      labels: ["Fakulta prírodných Vied", "Fakulta stredoeurópskych Štúdií", "Filozofická fakulta", "Pedagogická fakulta", "Fakulta sociál.vied a zdravotníctva"],
      datasets: [{
         data: [45, 5, 10, 20, 52],
         backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2"],
         hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4"]
      }]
   },
   options: {
      legend: {
        
         position: "right"
      }
   }
});

Please sign in or create an account to participate in this conversation.