spiderweb chart resizes axis after calling series.setData - Javascript highcharts

Javascript examples for highcharts:Chart Axis

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Axis

Description

spiderweb chart resizes axis after calling series.setData

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
var chart;//from   www .  j  a  va 2  s .  c  o  m
var flagIn = 1;
var options, series2, title2;
$(function () {
    options = {
        chart: {
            renderTo: 'container',
            polar: true,
            type: 'line'
        },
        title: {
            text: 'Open, Unresolved Work Items',
            x: -80
        },
        pane: {
            size: '80%'
        },
        xAxis: {
            categories: ['Person 1', 'Person 2', 'Person 3', 'Person 4', 'Person 5'],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },
        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },
        tooltip: {
            shared: true,
            valuePrefix: ''
        },
        legend: {
            align: 'right',
            verticalAlign: 'top',
            y: 100,
            layout: 'vertical'
        },
        series: [{
            name: 'Work Item Count',
            data: [14, 10, 1, 7, 17],
            pointPlacement: 'on',
            type: 'area'
        }]
    }
    chart = new Highcharts.Chart(options);
    setInterval("callMeMaybe()", 2000);
});
function callMeMaybe() {
    flagIn++;
    series2 = [{
        name: flagIn+' time called',
        data: [Math.floor(Math.random() * 11), Math.floor(Math.random() * 11), Math.floor(Math.random() * 11), Math.floor(Math.random() * 11), Math.floor(Math.random() * 11)],
        pointPlacement: 'on',
        type: 'area'
    }];
    title2 = {
        text: 'Updated for '+flagIn+" time",
        x: -80
    };
    options.series = series2;
    options.title = title2;
    chart = new Highcharts.Chart(options);
    console.log("update");
}

      </script> 
   </head> 
   <body> 
      <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/exporting.js"></script> 
      <div id="container" style="height: 400px"></div> 
      <button id="button">Set new data</button>  
   </body>
</html>

Related Tutorials