emprit

grafik

Dec 16th, 2012
152
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.30 KB | None | 0 0
  1. <html>
  2.     <head>
  3.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  4.         <script type="text/javascript">
  5. $(function () {
  6.     var chart;
  7.     $(document).ready(function() {
  8.         chart = new Highcharts.Chart({
  9.             chart: {
  10.                 renderTo: 'container',
  11.                 type: 'bar'
  12.             },
  13.             title: {
  14.                 text: 'Grafik Penilaian Pelamar'
  15.             },
  16.            
  17.             xAxis: {
  18.                 categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
  19.                 title: {
  20.                     text: 'Pelamar'
  21.                 }
  22.             },
  23.             yAxis: {
  24.                 min: 0,
  25.                 title: {
  26.                     text: '',
  27.                     align: 'high'
  28.                 },
  29.                 labels: {
  30.                     overflow: 'justify'
  31.                 }
  32.             },
  33.             tooltip: {
  34.                 formatter: function() {
  35.                     return ''+
  36.                         this.series.name +': '+ this.y +' millions';
  37.                 }
  38.             },
  39.             plotOptions: {
  40.                 bar: {
  41.                     dataLabels: {
  42.                         enabled: true
  43.                     }
  44.                 }
  45.             },
  46.             legend: {
  47.                 layout: 'vertical',
  48.                 align: 'right',
  49.                 verticalAlign: 'top',
  50.                 x: -100,
  51.                 y: 100,
  52.                 floating: true,
  53.                 borderWidth: 1,
  54.                 backgroundColor: '#FFFFFF',
  55.                 shadow: true
  56.             },
  57.             credits: {
  58.                 enabled: false
  59.             },
  60.            
  61.             series: [
  62.             {
  63.                 name: 'Year 1800',
  64.                 data: [107, 31, 635, 203, 2]
  65.             }, {
  66.                 name: 'Year 1900',
  67.                 data: [133, 156, 947, 408, 6]
  68.             }, {
  69.                 name: 'Year 2008',
  70.                 data: [973, 914, 4054, 732, 34]
  71.             }]
  72.         });
  73.     });
  74.    
  75. });
  76.         </script>
  77.     </head>
  78.     <body>
  79. <script src="../../js/highcharts.js"></script>
  80. <script src="../../js/modules/exporting.js"></script>
  81.  
  82. <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
  83.  
  84.     </body>
  85. </html>
Advertisement
Add Comment
Please, Sign In to add comment