API tools faq
paste
edsheut

Full highchart example

edsheut
May 19th, 2016
193
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <title>MAIN TITLE</title>
  6.        
  7.         <!-- JAVASCRIPT INCLUSIONS -->
  8.         <script type="text/javascript" src="libs/jquery-1.10.1.js"></script>
  9.         <script type="text/javascript" src="libs/highcharts.js"></script>
  10.         <script src="libs/modules/exporting.js"></script>      
  11.        
  12.         <!-- SCRIPTS ZONES -->
  13.         <script>
  14.         //GLOBAL VARS TO MANAGE DATA
  15.         var charRight; // global
  16.         var charLeft; // global
  17.         var TempTxR = [0,0]; //old_tx,new_tx
  18.         var TempRxR = [0,0]; //old_rx,new_rx
  19.         var TempTxL = [0,0]; //old_tx,new_tx
  20.         var TempRxL = [0,0]; //old_rx,new_rx
  21.         var FlagFirstTimeR = 0;
  22.         var FlagFirstTimeL = 0;
  23.         var interval = 5;
  24.         var window = 20;
  25.         //FUNCTION TO REQUEST DATA     
  26.         function requestData(){
  27.             requestDataRight();
  28.             requestDataLeft();
  29.             setTimeout(requestData, interval*1000);
  30.         }
  31.         ///FUNCTION FOR RIGHT CHART
  32.         function requestDataRight() {
  33.             $.ajax({
  34.                 url: 'cgi-bin/JSON_A.pl', //FUNCTION TO POPULATE CHART
  35.                 success: function(point) {
  36.                     var series = charRight.series[0],
  37.                         shift = series.data.length > window; // shift if the series is longer than 20
  38.                     // dissect point
  39.                     var punto = eval(point);
  40.                     // Calculate difference between new and old points
  41.                     TempTxR[0] = TempTxR[1];
  42.                     TempTxR[1] = punto[1];
  43.                     TempRxR[0] = TempRxR[1];
  44.                     TempRxR[1] = punto[2];
  45.                     // Calculate delta
  46.                     var diff = (TempTxR[1] - TempTxR[0])/interval;
  47.                     var puntoSerieTx = [punto[0],diff];
  48.                     diff = (TempRxR[1] - TempRxR[0])/interval;
  49.                     var puntoSerieRx = [punto[0],diff];                
  50.                     // add the point
  51.                     if (FlagFirstTimeR == 0){                  
  52.                         FlagFirstTimeR = 1; //First point is off the scale =(
  53.                     }else{                 
  54.                         // add the point
  55.                         charRight.series[0].addPoint(puntoSerieTx, true, shift);
  56.                         charRight.series[1].addPoint(puntoSerieRx, true, shift);
  57.                     }
  58.                     // call it again after one second
  59.                     //setTimeout(requestData, 1000);   
  60.                 },
  61.                 cache: false
  62.             });
  63.         }
  64.         ///FUNCTION FOR LEFT CHART
  65.         function requestDataLeft() {
  66.             $.ajax({
  67.                 url: 'cgi-bin/JSON_B.pl',  //FUNCTION TO POPULATE CHART
  68.                 success: function(point) {
  69.                     var series = charLeft.series[0],
  70.                         shift = series.data.length > window; // shift if the series is longer than 20
  71.                     // dissect point
  72.                     var punto = eval(point);
  73.                     // Calculate difference between new and old points
  74.                     TempTxL[0] = TempTxL[1];
  75.                     TempTxL[1] = punto[1];
  76.                     TempRxL[0] = TempRxL[1];
  77.                     TempRxL[1] = punto[2];
  78.                     // Calculate delta
  79.                     var diff = (TempTxL[1] - TempTxL[0])/interval;
  80.                     var puntoSerieTx = [punto[0],diff];
  81.                     diff = (TempRxL[1] - TempRxL[0])/interval;
  82.                     var puntoSerieRx = [punto[0],diff];                
  83.                     // add the point
  84.                     if (FlagFirstTimeL == 0){                  
  85.                         FlagFirstTimeL = 1; //First point is off the scale =(
  86.                     }else{
  87.                         charLeft.series[0].addPoint(puntoSerieTx, true, shift);
  88.                         charLeft.series[1].addPoint(puntoSerieRx, true, shift);
  89.                     }
  90.                    
  91.                     // call it again after one second
  92.                     //setTimeout(requestData, 1000);   
  93.                 },
  94.                 cache: false
  95.             });
  96.         }
  97.        
  98.         $(document).ready(
  99.             function(){
  100.                 charRight = new Highcharts.Chart({
  101.                     //CHART OPTIONS
  102.                     chart: {
  103.                         renderTo: 'containerRight',
  104.                         defaultSeriesType: 'spline',
  105.                         events: {
  106.                             load: requestData
  107.                         }
  108.                     },
  109.                     //TITLE
  110.                     title: { text: 'SWITCH A'},
  111.                     //AXIS
  112.                     xAxis: {
  113.                         type: 'datetime',
  114.                         tickPixelInterval: 150,
  115.                         maxZoom: 20 * 1000
  116.                     },
  117.                     yAxis: {
  118.                         minPadding: 0.2,
  119.                         maxPadding: 0.2,
  120.                         title: { text: 'Frames per second'}
  121.                     },
  122.                     //TOOLTIP OPTIONS
  123.                     tooltip: {
  124.                         valueSuffix: 'Fps'
  125.                     },
  126.                     //DATA TO PLOT
  127.                     series: [{
  128.                         name: 'Tx',
  129.                         data: []
  130.                     },{
  131.                         name: 'Rx',
  132.                         data: []
  133.                     }]
  134.                 });
  135.                 //
  136.                 charLeft = new Highcharts.Chart({
  137.                     //CHART OPTIONS
  138.                     chart: {
  139.                         renderTo: 'containerLeft',
  140.                         defaultSeriesType: 'spline',
  141.                         events: {
  142.                             //load: requestData
  143.                         }
  144.                     },
  145.                     //TITLE
  146.                     title: { text: 'SWITCH B'},
  147.                     //AXIS
  148.                     xAxis: {
  149.                         type: 'datetime',
  150.                         tickPixelInterval: 150,
  151.                         maxZoom: 20 * 1000                     
  152.                     },
  153.                     yAxis: {
  154.                         minPadding: 0.2,
  155.                         maxPadding: 0.2,
  156.                         title: { text: 'Frames per second'}
  157.                     },
  158.                     //TOOLTIP OPTIONS
  159.                     tooltip: {
  160.                         valueSuffix: 'Fps'
  161.                     },
  162.                     //DATA TO PLOT
  163.                     series: [{
  164.                         name: 'Tx',
  165.                         data: []
  166.                     },{
  167.                         name: 'Rx',
  168.                         data: []
  169.                     }]
  170.                 });
  171.             }
  172.         );
  173.         </script>
  174.        
  175.         <!-- STYLE ZONES -->
  176.         <style>
  177.         .container {
  178.             margin:  10px auto;
  179.             width: 1000px;
  180.         }
  181.        
  182.         .container > div {
  183.             width: 50%;
  184.         }
  185.         .col1 {
  186.             float: left;
  187.         }
  188.         .col2 {
  189.             float: right;
  190.         }
  191.         </style>
  192.     </head>
  193.     <body>     
  194.         <div class="container">
  195.             <div class="col1" id="containerLeft" style="width: 500px; height: 300px; margin: 0 auto"></div>
  196.             <div class="col2" id="containerRight" style="width: 500px; height: 300px; margin: 0 auto"></div>
  197.                
  198.         </div>
  199.     </body>
  200. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!