interactive-pie.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. /*=========================================================================================
  2. File Name: interactive-pie.js
  3. Description: Flot interactive 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. // Interactive pie chart
  11. // ------------------------------
  12. $(window).on("load", function(){
  13. var options = {
  14. series: {
  15. pie: {
  16. show: true
  17. }
  18. },
  19. grid: {
  20. hoverable: true,
  21. clickable: true
  22. },
  23. colors: ['#99B898', '#FECEA8', '#FF847C', '#E84A5F', '#2A363B', '#6C5B7B']
  24. };
  25. var data = [
  26. { label: "Series1", data: 50},
  27. { label: "Series2", data: 70},
  28. { label: "Series3", data: 60},
  29. { label: "Series4", data: 90},
  30. { label: "Series5", data: 80},
  31. { label: "Series6", data: 110}
  32. ];
  33. var placeholder = $("#interactive-pie-chart");
  34. $.plot(placeholder, data, options);
  35. placeholder.bind("plothover", function(event, pos, obj) {
  36. if (!obj) {
  37. return;
  38. }
  39. var percent = parseFloat(obj.series.percent).toFixed(2);
  40. $("#hover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label + " (" + percent + "%)</span>");
  41. });
  42. placeholder.bind("plotclick", function(event, pos, obj) {
  43. if (!obj) {
  44. return;
  45. }
  46. percent = parseFloat(obj.series.percent).toFixed(2);
  47. alert("" + obj.series.label + ": " + percent + "%");
  48. });
  49. });