pie.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. /*=========================================================================================
  2. File Name: pie.js
  3. Description: Chartjs pie chart
  4. ----------------------------------------------------------------------------------------
  5. Item Name: Robust - Responsive Admin Theme
  6. Version: 1.2
  7. Author: PIXINVENT
  8. Author URL: http://www.themeforest.net/user/pixinvent
  9. ==========================================================================================*/
  10. // Pie chart
  11. // ------------------------------
  12. $(window).on("load", function(){
  13. //Get the context of the Chart canvas element we want to select
  14. var ctx = $("#pie-chart");
  15. // Chart Options
  16. var chartOptions = {
  17. responsive: true,
  18. maintainAspectRatio: false,
  19. responsiveAnimationDuration:500,
  20. };
  21. // Chart Data
  22. var chartData = {
  23. labels: ["January", "February", "March", "April", "May"],
  24. datasets: [{
  25. label: "My First dataset",
  26. data: [65, 59, 80, 81, 56],
  27. backgroundColor: ["#99B898","#FECEA8","#FF847C","#E84A5F","#2A363B"],
  28. }, {
  29. label: "My Second dataset",
  30. data: [28, 48, 40, 19, 86],
  31. backgroundColor: ["#99B898","#FECEA8","#FF847C","#E84A5F","#2A363B"],
  32. }, {
  33. label: "My Third dataset - No bezier",
  34. data: [45, 25, 16, 36, 67],
  35. backgroundColor: ["#99B898","#FECEA8","#FF847C","#E84A5F","#2A363B"],
  36. }, {
  37. label: "My Fourth dataset",
  38. data: [17, 62, 78, 88, 26],
  39. backgroundColor: ["#99B898","#FECEA8","#FF847C","#E84A5F","#2A363B"],
  40. }]
  41. };
  42. var config = {
  43. type: 'pie',
  44. // Chart Options
  45. options : chartOptions,
  46. data : chartData
  47. };
  48. // Create the chart
  49. var pieChart = new Chart(ctx, config);
  50. });