BGBM BDI Projects / geo.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Folder "./v1.1" and "./v1.1_dev" added (new release version and development for the...
[geo.git] / edit_wp5_web_folder / v1.1_dev / Highcharts-2.1.6 / examples / column-rotated-labels.htm
diff --git a/edit_wp5_web_folder/v1.1_dev/Highcharts-2.1.6/examples/column-rotated-labels.htm b/edit_wp5_web_folder/v1.1_dev/Highcharts-2.1.6/examples/column-rotated-labels.htm
new file mode 100644 (file)
index 0000000..1913a3a
--- /dev/null
+++ b/edit_wp5_web_folder/v1.1_dev/Highcharts-2.1.6/examples/column-rotated-labels.htm
@@ -0,0 +1,117 @@
+<!DOCTYPE HTML>
+<html>
+       <head>
+               <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+               <title>Highcharts Example</title>
+               
+               
+               <!-- 1. Add these JavaScript inclusions in the head of your page -->
+               <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+               <script type="text/javascript" src="../js/highcharts.js"></script>
+               
+               <!-- 1a) Optional: add a theme file -->
+               <!--
+                       <script type="text/javascript" src="../js/themes/gray.js"></script>
+               -->
+               
+               <!-- 1b) Optional: the exporting module -->
+               <script type="text/javascript" src="../js/modules/exporting.js"></script>
+               
+               
+               <!-- 2. Add the JavaScript to initialize the chart on document ready -->
+               <script type="text/javascript">
+               
+                       var chart;
+                       $(document).ready(function() {
+                               chart = new Highcharts.Chart({
+                                       chart: {
+                                               renderTo: 'container',
+                                               defaultSeriesType: 'column',
+                                               margin: [ 50, 50, 100, 80]
+                                       },
+                                       title: {
+                                               text: 'World\'s largest cities per 2008'
+                                       },
+                                       xAxis: {
+                                               categories: [
+                                                       'Tokyo', 
+                                                       'Jakarta', 
+                                                       'New York', 
+                                                       'Seoul', 
+                                                       'Manila',
+                                                       'Mumbai',
+                                                       'Sao Paulo',
+                                                       'Mexico City',
+                                                       'Dehli',
+                                                       'Osaka',
+                                                       'Cairo',
+                                                       'Kolkata',
+                                                       'Los Angeles',
+                                                       'Shanghai',
+                                                       'Moscow',
+                                                       'Beijing',
+                                                       'Buenos Aires',
+                                                       'Guangzhou',
+                                                       'Shenzhen',
+                                                       'Istanbul'
+                                               ],
+                                               labels: {
+                                                       rotation: -45,
+                                                       align: 'right',
+                                                       style: {
+                                                                font: 'normal 13px Verdana, sans-serif'
+                                                       }
+                                               }
+                                       },
+                                       yAxis: {
+                                               min: 0,
+                                               title: {
+                                                       text: 'Population (millions)'
+                                               }
+                                       },
+                                       legend: {
+                                               enabled: false
+                                       },
+                                       tooltip: {
+                                               formatter: function() {
+                                                       return '<b>'+ this.x +'</b><br/>'+
+                                                                'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
+                                                                ' millions';
+                                               }
+                                       },
+                                       series: [{
+                                               name: 'Population',
+                                               data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18, 
+                                                       17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8, 
+                                                       11.7, 11.2],
+                                               dataLabels: {
+                                                       enabled: true,
+                                                       rotation: -90,
+                                                       color: '#FFFFFF',
+                                                       align: 'right',
+                                                       x: -3,
+                                                       y: 10,
+                                                       formatter: function() {
+                                                               return this.y;
+                                                       },
+                                                       style: {
+                                                               font: 'normal 13px Verdana, sans-serif'
+                                                       }
+                                               }                       
+                                       }]
+                               });
+                               
+                               
+                       });
+                               
+               </script>
+               
+       </head>
+       <body>
+               
+               <!-- 3. Add the container -->
+               <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
+               
+                               
+       </body>
+</html>