CODEWITHSUNDEEP
javascripthighcharts
Bilberryfm
Bilberryfm

Reputation: 537

Cannot dynamically update highchart in javascript

Cannott dynamically update highchart.

I have highchart. When user clicks button, I would like to open modal window, that showing the same highchart, but with some fields updated (series and categories data).

What I did:

  1. Create object “options”

var options = {} ; - obj that holds all data for highcharts.

  1. Create main highchart with options:

    var chartWithTopCategories = new Highcharts.Chart(options);

  2. On click of the button open modal that has updated chart:

 $(‘#modalId’).on( "click", function() {  
    	options.xAxis.categories = listOfAllCategories;
        options.series.data = listOfAllValues;
        options.chart.renderTo = ‘div-id-inside-modal;
        console.log(options); //4.  All options updated successfully here
        // 5.Then I trying to create new highchart, using options below (I tried both):
        //$('div-id-inside-modal').highcharts(options); 
        var chart = new Highcharts.Chart(options); // ALL FiELDS ARE UPDATED< BUT NEW CHART IS NOT DISPLAYED. OLD ONE IS DISPLAYED INSTEAD
        chart.redraw(); // Tried with and without redraw
     }

So, the problem is that when I try to create new highchart inside opened modal, it is not creating new hoghchart with updated options, it is still rendering SAME highchart that was on page without modal. Even though if I console.log new highchart object, it HAS all fields with updated values

Upvotes: 0

Views: 71

Answers (1)

Bilberryfm
Bilberryfm

Reputation: 537

I found solution: This:

options.series.data = listOfAllValues;

Should be changed to this:

 options.series[0].data = listOfAllValues;

Upvotes: 0

Related Questions