Advertisement
Guest User

Untitled

a guest
Jan 19th, 2014
314
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <title>Highcharts Example</title>
  6.  
  7.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  8.         <script type="text/javascript">
  9.        
  10. function getDataFilename(str){
  11.     point = str.lastIndexOf("file=")+4;
  12.  
  13.     tempString = str.substring(point+1,str.length)
  14.     if (tempString.indexOf("&") == -1){
  15.     return(tempString);
  16.     }
  17.     else{
  18.         return tempString.substring(0,tempString.indexOf("&"));
  19.     }
  20.        
  21. }
  22.  
  23. query  = window.location.search;
  24.  
  25. var dataFilePath = "data/"+getDataFilename(query);
  26.        
  27. $(function () {
  28.  
  29.     // Register a parser for the American date format used by Google
  30.     Highcharts.Data.prototype.dateFormats['m/d/Y'] = {
  31.         regex: '^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2})$',
  32.         parser: function (match) {
  33.             return Date.UTC(+('20' + match[3]), match[1] - 1, +match[2]);
  34.         }
  35.     };
  36.  
  37.     // Get the CSV and create the chart
  38.     $.get(dataFilePath, function (csv) {
  39.        
  40.         $('#container').highcharts({
  41.  
  42.             data: {
  43.                 csv: csv
  44.             },
  45.  
  46.             title: {
  47.                 text: 'Daily visits at www.highcharts.com'
  48.             },
  49.  
  50.             subtitle: {
  51.                 text: 'Source: Google Analytics'
  52.             },
  53.  
  54.             xAxis: {
  55.                 type: 'datetime',
  56.                 tickInterval: 7 * 24 * 3600 * 1000, // one week
  57.                 tickWidth: 0,
  58.                 gridLineWidth: 1,
  59.                 labels: {
  60.                     align: 'left',
  61.                     x: 3,
  62.                     y: -3
  63.                 }
  64.             },
  65.  
  66.             yAxis: [{ // left y axis
  67.                 title: {
  68.                     text: null
  69.                 },
  70.                 labels: {
  71.                     align: 'left',
  72.                     x: 3,
  73.                     y: 16,
  74.                     formatter: function() {
  75.                         return Highcharts.numberFormat(this.value, 0);
  76.                     }
  77.                 },
  78.                 showFirstLabel: false
  79.             }, { // right y axis
  80.                 linkedTo: 0,
  81.                 gridLineWidth: 0,
  82.                 opposite: true,
  83.                 title: {
  84.                     text: null
  85.                 },
  86.                 labels: {
  87.                     align: 'right',
  88.                     x: -3,
  89.                     y: 16,
  90.                     formatter: function() {
  91.                         return Highcharts.numberFormat(this.value, 0);
  92.                     }
  93.                 },
  94.                 showFirstLabel: false
  95.             }],
  96.  
  97.             legend: {
  98.                 align: 'left',
  99.                 verticalAlign: 'top',
  100.                 y: 20,
  101.                 floating: true,
  102.                 borderWidth: 0
  103.             },
  104.  
  105.             tooltip: {
  106.                 shared: true,
  107.                 crosshairs: true
  108.             },
  109.  
  110.             plotOptions: {
  111.                 series: {
  112.                     cursor: 'pointer',
  113.                     point: {
  114.                         events: {
  115.                             click: function() {
  116.                                 hs.htmlExpand(null, {
  117.                                     pageOrigin: {
  118.                                         x: this.pageX,
  119.                                         y: this.pageY
  120.                                     },
  121.                                     headingText: this.series.name,
  122.                                     maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
  123.                                         this.y +' visits',
  124.                                     width: 200
  125.                                 });
  126.                             }
  127.                         }
  128.                     },
  129.                     marker: {
  130.                         lineWidth: 1
  131.                     }
  132.                 }
  133.             },
  134.  
  135.             series: [{
  136.                 name: 'All visits',
  137.                 lineWidth: 4,
  138.                 marker: {
  139.                     radius: 4
  140.                 }
  141.             }, {
  142.                 name: 'New visitors'
  143.             }]
  144.         });
  145.     });
  146.  
  147. });
  148.  
  149.  
  150.         </script>
  151.     </head>
  152.     <body>
  153. <script src="http://cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.7/highcharts.js"></script>
  154. <script src="http://cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.7/modules/data.js"></script>
  155. <script src="http://cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.7/modules/exporting.js"></script>
  156.  
  157. <!-- Additional files for the Highslide popup effect -->
  158. <script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
  159. <script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
  160. <link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
  161.  
  162. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  163.  
  164.     </body>
  165. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement