charts/canvas/examples/26-some-common-options-across-all-chart-types/chart-with-animation.html

   1 <!DOCTYPE HTML>\r
   2 <html>\r
   3 \r
   4 <head>\r
   5         <script type="text/javascript">\r
   6                 window.onload = function () {\r
   7                         var chart = new CanvasJS.Chart("chartContainer",\r
   8                         {\r
   9                                 title: {\r
  10                                         text: "Gaming Consoles Sold in 2012"\r
  11                                 },\r
  12                                 animationEnabled: true,\r
  13                                 animationDuration: 2000,\r
  14                                 legend: {\r
  15                                         verticalAlign: "bottom",\r
  16                                         horizontalAlign: "center"\r
  17                                 },\r
  18                                 data: [\r
  19                                 {\r
  20                                         indexLabelFontSize: 20,\r
  21                                         indexLabelFontFamily: "Monospace",\r
  22                                         indexLabelFontColor: "darkgrey",\r
  23                                         indexLabelLineColor: "darkgrey",\r
  24                                         indexLabelPlacement: "outside",\r
  25                                         type: "pie",\r
  26                                         showInLegend: true,\r
  27                                         toolTipContent: "{y} - <strong>#percent%</strong>",\r
  28                                         dataPoints: [\r
  29                                                 { y: 4181563, legendText: "PS 3", indexLabel: "PlayStation 3" },\r
  30                                                 { y: 2175498, legendText: "Wii", indexLabel: "Wii" },\r
  31                                                 { y: 3125844, legendText: "360", exploded: true, indexLabel: "Xbox 360" },\r
  32                                                 { y: 1176121, legendText: "DS", indexLabel: "Nintendo DS" },\r
  33                                                 { y: 1727161, legendText: "PSP", indexLabel: "PSP" },\r
  34                                                 { y: 4303364, legendText: "3DS", indexLabel: "Nintendo 3DS" },\r
  35                                                 { y: 1717786, legendText: "Vita", indexLabel: "PS Vita" }\r
  36                                         ]\r
  37                                 }\r
  38                                 ]\r
  39                         });\r
  40                         chart.render();\r
  41                 }\r
  42         </script>\r
  43         <script src="../../canvasjs.min.js"></script>\r
  44         <title>CanvasJS Example</title>\r
  45 </head>\r
  46 <body>\r
  47         <div id="chartContainer" style="height: 400px; width: 100%;"></div>\r
  48 </body>\r
  49 </html>\r