CODEWITHSUNDEEP
javascriptjqueryhighcharts
John Fred
John Fred

Reputation: 77

Using chart.update on a chart using renderTo

I declare a highcart function locally:

function render(){
  var Chart=null
  Chart = new Highcharts.Chart({
      chart: {
          renderTo: container,
          height: 400
      },
      title: {
          text: 'Chart.update'
      },

      subtitle: {
          text: 'Plain'
      },

      xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },

      series: [{
          type: 'column',
          colorByPoint: true,
          data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
          showInLegend: false
      }]
  });
}

Assuming I cannot alter the render() function, am I able to use the chart.update tool to change the properties?

Basically I'd like to recreate the functionality here, but for this example without altering the function.

Is this just like asking to access a local variable outside of the function or is it still defined somewhere globally?

Upvotes: 0

Views: 53

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

you have to define var chart=null at begging before the render function

Fiddle

Js

var chart = null
function render() {
  chart = new Highcharts.Chart({
    chart: {
      renderTo: container,
      height: 400
    },
    title: {
      text: 'Chart.update'
    },

    subtitle: {
      text: 'Plain'
    },

    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
      type: 'column',
      colorByPoint: true,
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
      showInLegend: false
    }]
  });
}
render()

function plain() {
  chart.update({
    chart: {
      inverted: false,
      polar: false
    },
    subtitle: {
      text: 'Plain'
    }
  });
}

function inverted() {
  chart.update({
    chart: {
      inverted: true,
      polar: false
    },
    subtitle: {
      text: 'Inverted'
    }
  });
}

function polar() {
  chart.update({
    chart: {
      inverted: false,
      polar: true
    },
    subtitle: {
      text: 'Polar'
    }
  });
}

Html 

<div id="container"></div>
<button id="plain" class="autocompare" onclick="plain()">Plain</button>
<button id="inverted" class="autocompare" onclick="inverted()">Inverted</button>
<button id="polar" class="autocompare" onclick="polar()">Polar</button>

Upvotes: 1

Related Questions