? ????? Chart.js? ???? ??, ? ? ?? ??? ??? ??? ?????. ???? ?? ??? ?? ??? ?????. JS : ?? ?? ? ?? ?? (??? 2)? ??? ?? ? ?? ?? ?? (??? 3)? ?????.

?? ? ? ??? ????

?? ??? ? ??? ?? ???? ??? ? ??? ??? ???? ? ??????. ?? ??, ?? ??? ????? ?? ??, ?? ?? ? ?? ??? ?? ?? ???? ?? ?????? ???? ???? ? ??? ? ????.

?? ??? ?? ?? ?? ?? ??? ??? ???? ?? ?????. ?? ??? ? ??? ??? ???? ?? ??? ???? ??? ?? ??? ?? 0 ? ???? ?? ? ????. ?? 0 ????? ???? ??? ???? ??? ?????. ?????, ?? ?? ?? ???? ?? ? ????.

Chart.js??? type ?? pie ? ???? ?? ??? ?? ? ??? type ?? doughnut ?? ???? ? ??? ?? ? ????. ??? ? ??? ?? ???? ????.

 var piechart = ??? ?? (Votescanvas, {
    ?? : '??',
    ??? : VotesData,
    ?? : ChartOptions
});

var doughnutchart = ??? ?? (Votescanvas, {
    ?? : '??',
    ??? : VotesData,
    ?? : ChartOptions
});

2015 ? ?? 5 ? ?? ?? ??? ?? ?? ?? ??? (?? : 10 ? ?? ??)? ???? ?? ??? ??? ???.

 var data = {
    ?? : [
        "??? ????",
        "??? ??",
        "???",
        "UAE",
        "???"
    ],,
    ??? ?? : [
        {
            ??? : [133.3, 86.2, 52.2, 51.2, 50.2],
            ?? ??? : [
                "#ff6384",
                "#63ff84",
                "#84ff63",
                "#8463ff",
                "#6384ff"
            ]]
        }]
}; 

?? ?? ???? ?? ? ??? ? ??? cutout ? ?? ?? ??? ??? ?? ? ? ????. ??? ??? ?? ?? ?? ??? ?????. rotation ?? ???? ??? ?? ??? ??? ? ????. ????? circumference ?? ?? ???? ???? ??? ? ? ??? ???? ??? ??? ?? ????. ? ??? ?????? ??? ?????.

??? ?? ? ? ?? ?? ?????? ??? ? ? ????. animateRotate ?? ???? ??? ?? ?????? ?????? ??? ??? ? ????. ?????, animateScale ??? ?? ???? ? ???? ???? ???? ????? ??? ??? ?? ????. animateRotate ? ?? ????? true ??, animateScale ? ?? ????? false ???.

??? ??, backgroundColor , borderColor ? borderWidth ?? ???? ?? ??? ???? ???, ??? ?? ? ??? ??? ?? ?? ? ? ????. ?????, ??? ?? ??? ?? ?? ?? hoverBackgroundColor , hoverBorderColor ? hoverBorderWidth ?? ???? ?? ? ? ????.

??? ?? ???? ?? ? ???? ??? ?????. rotation ?? -90 ?? ??????. ?? ???? ?? ?? ???? 90? ?????.

 var oildata = {
  ?? : [ "??? ????", "???", "???", "UAE", "???"],
  ??? ?? : [
    {
      ??? : [133.3, 86.2, 52.2, 51.2, 50.2],
      Back
      BorderColor : "Black",
      Borderwidth : 2
    }
  ]]
};

var chartoptions = {
  ?? : -90,
  ? ?? : "45%",
  ???? : {
    ??: {
      ????? : True,
      ?? : "??",
      ??? : "2015 ? ?? ?? ????",
      ?? : {
        ?? : 32
      }
    },
    ??: {
      ?? : "??",
      ?? : "??"
    }
  },
  ????? : {
    Animaterotate : False,
    ????? ??? : ?????
  }
};

var donutchart = ??? ?? (OilCanvas, {
  ?? : "??",
  ??? : Oildata,
  ?? : ChartOptions
}); 

?? ??? ????

?? ??? ??? 3 ??? ???? ???? ???? ? ????? ( P1 , P2 , P3 ). ??? ??? ???? ? ?? ??? ???? ?? ?????. ?? ?? ? ?? ??? ??? (P1)? ????, ?? ?? ? ?? ??? ??? ( P2 )? ????, ?? ??? ? ?? ??? ??? ( P3 )? ?? ???? ? ?????.

? ?? ??? ???? ??? ??? ??? ??? ?? ???? ?????. ?? ??? ??? ??? ?????. ?, ????? ?? ??? ? ?? ??? ??? ??? ???? ????? ???????.

Chart.js?? type ?? ?? bubble ? ???? ?? ??? ?? ? ????. ??? ?? ??? ??? ??? ????.

 var bubblechart = ??? ?? (Popcanvas, {
    ?? : '??',
    ??? : popdata,
    ?? : ChartOptions
});

?? ??? ???? ?? ?? ??? ??? ? ???. ??? ???? ?? ???? ????????. ??? ???? ???? ??? ?? ?? ?????? ??????.

 {
    ??:<number> ,,,
    ??:<number> ,,,
    ?? ??:<number>
}</number></number></number>

?? ??? ?? ?? ??? ??? ???? ?? ??? ??? ?? ?????? ???? ????.

?? ??, ?? ??? ?? ??? ??? ??? ?? ????? ?????. ??? ?? ???? ???? ????. ??? ??? ?? ??? ??? ?? ?? ????. ? ?? ???? ??? ??? ?? ???? ???? ? ???? ??? ?? ??? ????.

?? ?? ????? ?? ??? ?? ????? ?? ?? ??? ??? ???.

 var popdata = {
  ??? ?? : [
    {
      ??? : [ "?? ??"],
      ??? : [
        {x : 100, y : 0, r : 10},
        {x : 60, y : 30, r : 20},
        {x : 40, y : 60, r : 25},
        {x : 80, y : 80, r : 30},
        {x : 20, y : 30, r : 25},
        {x : 0, y : 100, r : 5}
      ],,
      BackgroundColor : "#FF9966"
    }
  ]]
};

??? ??? ?? ?? ???? ???? ??? (80, 80)? ?? ?? (0, 100)? ?? ?? 36 ????.

?? ?? ?? ??? ????? backgroundColor , borderColor ? borderWidth ?? ?? ???? ???, ??? ?? ? ??? ???? ??? ??? ?? ? ? ????. ?????, hoverBackgroundColor , hoverBorderColor ? hoverBorderWidth ?? ???? ?? ?? ??, ?? ??? ?? ? ?? ??? ??? ??? ?? ????.

hoverRadius ?? ???? ??? ? ? ?? ??? ?? ? ?? ??? ??? ?? ????. ? ??? ??? ??? ??? ?? ?? ?? ?? ? ??? ??????. ?? ??? ??? 10?? hoverRadius 5? ???? ??? ??? ??? 15???.

 var popdata = {
  ??? ?? : [
    {
      ??? : [ "?? ??"],
      ??? : [
        {x : 100, y : 0, r : 10},
        {x : 60, y : 30, r : 20},
        {x : 40, y : 60, r : 25}
      ],,
      BackgroundColor : "#9966ff",
      HoverbackgroundColor : "#fffff",
      HoverborderColor : "#9966ff",
      Hoverborderwidth : 5,
      Hoverradius : 5
    },
    {
      ??? : [ "?? ??"],
      ??? : [
        {x : 80, y : 80, r : 30},
        {x : 20, y : 30, r : 25},
        {x : 0, y : 100, r : 5}
      ],,
      BackgroundColor : "#ff6600",
      HoverbackgroundColor : "#fffff",
      HoverborderColor : "#ff6600",
      Hoverborderwidth : 5,
      Hoverradius : 5
    }
  ]]
};

var chartoptions = {
  ???? : {
    ??: {
      ????? : True,
      ?? : "??",
      ??? : "?? ?????? ??? ?",
      ?? : {
        ?? : 20
      }
    },
    ??: {
      ?? : "??",
      ?? : "??"
    }
  },
  ???? : {
    ?? : 20
  }
};

?? ?? ??? ?? ?? ??? ?????.

??

? ?????? Chart.js?? ?? ??? ? ?? ?? ??? ?????. ?? ???? ????? ?? ??? ?? ??? ???? ?? ?? ?? ?? ?? ???? ??? ?? ? ? ??????. ?? ??????? ??? ?? ??? ?? ???? ???? ??? ????.

? ??? Chart.js : Pie, Donut ? Bubble Charts? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!