Highcharts - Grafico dati caricato Ajax

Qui, discuteremo un esempio di un grafico di dati caricato ajax. Per cominciare, effettueremo una chiamata ajax per caricare un file csv da Highcharts.Com utilizzando iljQuery.getJSON() e quando i dati vengono recuperati, popoleremo il grafico con i dati ricevuti e disegneremo il grafico.

Abbiamo compreso la maggior parte della configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts .

Importa data.js

Per lavorare con i dati ajax, importa il seguente script.

<script src = "https://code.highcharts.com/modules/data.js"></script>

Configurazioni

Vediamo ora di comprendere ulteriori configurazioni / passo compiuto.

xAxis

Configurare gli intervalli di tick in modo che siano basati su base settimanale sull'asse X.

var xAxis = {
   tickInterval: 7 * 24 * 3600 * 1000, // one week
   tickWidth: 0,
   gridLineWidth: 1,
   
   labels: {
      align: 'left',
      x: 3,
      y: -3
   }
};

yAxis

Configurare due assi sull'asse y.

var yAxis = [
   { // left y axis
      title: {
         text: null
      },
      labels: {
         align: 'left',
         x: 3,
         y: 16,
         format: '{value:.,0f}'
      },
      showFirstLabel: false
   },
   { // right y axis
      linkedTo: 0,
      gridLineWidth: 0,
      opposite: true,
      
      title: {
         text: null
      },
      labels: {
         align: 'right',
         x: -3,
         y: 16,
         format: '{value:.,0f}'
      },
      showFirstLabel: false
   }
];

plotOptions

plotOptions viene utilizzato per controllare la formattazione di varie parti del grafico come serie, marker su serie.

var plotOptions = {
   series: {
      cursor: 'pointer',
      point: {
         events: {
            click: function (e) {
               hs.htmlExpand(null, {
                  pageOrigin: {
                     x: e.pageX || e.clientX,
                     y: e.pageY || e.clientY
                  },
                  headingText: this.series.name,
                  maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x)
                     + ':<br/> ' + this.y + ' visits', width: 200
               });
            } 
         }
      },
      marker: {
         lineWidth: 1
      }
   }
}

Esempio

highcharts_line_ajax.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
      <script src = "https://code.highcharts.com/highcharts-more.js"></script>    
      <script src = "https://code.highcharts.com/modules/data.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Daily visits at www.highcharts.com'   
            };
            
            var subtitle = {
               text: 'Source: Google Analytics'
            };
            
            var xAxis = {
               tickInterval: 7 * 24 * 3600 * 1000, // one week
               tickWidth: 0,
               gridLineWidth: 1,
               
               labels: {
                  align: 'left',
                  x: 3,
                  y: -3
               }
            };
            
            var yAxis = [
               { // left y axis
                  title: {
                     text: null
                  },
                  labels: {
                     align: 'left',
                     x: 3,
                     y: 16,
                     format: '{value:.,0f}'
                  },
                  showFirstLabel: false
               }, 
               { // right y axis
                  linkedTo: 0,
                  gridLineWidth: 0,
                  opposite: true,
                  
                  title: {
                     text: null
                  },
                  labels: {
                     align: 'right',
                     x: -3,
                     y: 16,
                     format: '{value:.,0f}'
                  },
                  showFirstLabel: false
               }
            ];   
            
            var tooltip = {
               shared: true,
               crosshairs: true
            }
            
            var legend = {
               align: 'left',
               verticalAlign: 'top',
               y: 20,
               floating: true,
               borderWidth: 0
            };
            
            var plotOptions = {
               series: {
                  cursor: 'pointer',
                  point: {
                     events: {
                        click: function (e) {
                           hs.htmlExpand(null, {
                              pageOrigin: {
                                 x: e.pageX || e.clientX,
                                 y: e.pageY || e.clientY
                              },
                              headingText: this.series.name,
                              maincontentText: Highcharts.dateFormat(
                                 '%A, %b %e, %Y', this.x) +
                                 ':<br/> ' + this.y +
                                 ' visits', width: 200
                           });
                        }
                     }
                  },
                  marker: {
                     lineWidth: 1
                  }
               }
            }
            
            var series =  [
               {
                  name: 'All visits',
                  lineWidth: 4,
                  marker: {
                     radius: 4
                  }
               }, 
               {
                  name: 'New visitors'
               }
            ]
            
            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;
            json.plotOptions = plotOptions;
   
            $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename =
            analytics.csv&callback = ?', function (csv) {
               var data = {
                  csv: csv
               };
               json.data = data;
               $('#container').highcharts(json);
            });   
         });
      </script>
   </body>
   
</html>

Risultato

Verifica il risultato.

↰ Previous page