Highcharts - Gráfico de dados carregados Ajax

Aqui, discutiremos um exemplo de gráfico de dados carregado em Ajax. Para começar, faremos uma chamada ajax para carregar um arquivo csv de Highcharts.Com usando ojQuery.getJSON() e quando os dados forem recuperados, preencheremos o gráfico com os dados recebidos e desenharemos o gráfico.

Nós entendemos a maior parte da configuração usada para desenhar um gráfico no capítulo Sintaxe de Configuração de Highcharts .

Importar data.js

Para trabalhar com dados ajax, importe o seguinte script.

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

Configurações

Vamos agora entender as configurações adicionais / etapas realizadas.

xAxis

Configure os intervalos de tique para serem baseados semanalmente no eixo X.

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

yAxis

Configure dois eixos no eixo 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 é usado para controlar a formatação de várias partes do gráfico, como série, marcador em série.

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
      }
   }
}

Exemplo

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>

Resultado

Verifique o resultado.

↰ Previous page