Styjun

Defense against attacks using dictionaries

Can pay be witheld for hours cleaning up after closing time?

What professions would a medieval village with a population of 100 need?

(Why) May a Beit Din refuse to bury a body in order to coerce a man into giving a divorce?

Don't understand MOSFET as amplifier

Why my earth simulation is slower than the reality?

How to specify and fit a hybrid machine learning - linear model

Why were movies shot on film shot at 24 frames per second?

Is "stainless" a bulk or a surface property of stainless steel?

Why doesn't the Falcon-9 first stage use three legs to land?

!I!n!s!e!r!t! !n!b!e!t!w!e!e!n!

Can you grapple/shove with the Hunter Ranger's Whirlwind Attack?

How would one country purchase another?

How to create a summation symbol with a vertical bar?

Are illustrations in novels frowned upon?

How to "know" if I have a passion?

How to avoid using System.String with Rfc2898DeriveBytes in C#

Is it safe to remove the bottom chords of a series of garage roof trusses?

A second course in the representation theory

Why we don't have vaccination against all diseases which are caused by microbes?

Is a butterfly one or two animals?

To "hit home" in German

Was Switzerland really impossible to invade during WW2?

Efficient way of generating a random number of N (less than 64) bits with exactly M bits equal to one

amCharts4: Collapsed charts becoming blank after related interactivity

Same ID's in jQuery TabsExtJS 4.1 - Pie chart refreshShowing HighCharts in A JQuery Mobile applicationHow do you refresh the whole page when I click on a tab on the page?Highcharts: picking points in one chart and have the same points highlight in other chartsButtons not working on subsequent tabs to redraw chart in HighchartsHighcharts - Getting chart on click eventAmcharts : small (sometimes 0px) chart height on page load (in default tab)Not getting the same charts between google charts and amcharts4Update Amcharts4 chart dynamically using vue js

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I have six charts in a page, three gauges and three XY charts.
The 3 gauge charts are always visible, while the XY charts are collapsed by default.

On page load, all the charts are correctly drawn, whether they are collapsed or not. But if I refresh all charts, for instance after changing a datepicker value, all the collapsed charts become white.

How can I avoid this? Is there a command to invalidate chart size, or just redraw it when div is resized?

EDIT:

I was able to reproduce a similar behaviour with tabs: on page load all the tabs are correctly shown, but if I click a refresh button to redraw charts, the tabs not currently visible become blank.

You can check here: https://jsfiddle.net/giulia_pinnisi/cqoz5vbg/13/

draw_chart("chart1", data1);
draw_chart("chart2", data2);
draw_chart("chart3", data3);

$('#refresh_button').click(function() 
 draw_chart("chart1", data1);
 draw_chart("chart2", data2);
 draw_chart("chart3", data3);
);

Thank you very much

Giulia

javascript amcharts amcharts4

share|improve this question

edited May 26 at 11:26

Samuel Philipp

7,77299 gold badges1818 silver badges3636 bronze badges

asked Mar 27 at 15:08

GiulyGiuly

1033 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Can you post your code? Is the datepicker your own creation?
  
  – MarsAndBack
  Mar 27 at 15:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No, it's a date range picker: daterangepicker.com. The code is a little bit long and I won't paste it here, anyway the steps are: on datepicker selection change, call a function date_changed() which calls a list of function, like loadPerformanceRatio(..) who makes an ajax call to get the values to draw on my charts.
  
  – Giuly
  Mar 27 at 16:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Giuly - Code would really help. SO recommends providing an MVCE; a simplified version of your setup that reproduces would help get a sense of how you're updating/drawing everything.
  
  – xorspark
  Mar 28 at 22:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I just added an example of a different but similar situation
  
  – Giuly
  Apr 16 at 7:48
  

  
  
  
  

add a comment | 

1

I have six charts in a page, three gauges and three XY charts.
The 3 gauge charts are always visible, while the XY charts are collapsed by default.

On page load, all the charts are correctly drawn, whether they are collapsed or not. But if I refresh all charts, for instance after changing a datepicker value, all the collapsed charts become white.

How can I avoid this? Is there a command to invalidate chart size, or just redraw it when div is resized?

EDIT:

I was able to reproduce a similar behaviour with tabs: on page load all the tabs are correctly shown, but if I click a refresh button to redraw charts, the tabs not currently visible become blank.

You can check here: https://jsfiddle.net/giulia_pinnisi/cqoz5vbg/13/

draw_chart("chart1", data1);
draw_chart("chart2", data2);
draw_chart("chart3", data3);

$('#refresh_button').click(function() 
 draw_chart("chart1", data1);
 draw_chart("chart2", data2);
 draw_chart("chart3", data3);
);

Thank you very much

Giulia

javascript amcharts amcharts4

share|improve this question

edited May 26 at 11:26

Samuel Philipp

7,77299 gold badges1818 silver badges3636 bronze badges

asked Mar 27 at 15:08

GiulyGiuly

1033 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Can you post your code? Is the datepicker your own creation?
  
  – MarsAndBack
  Mar 27 at 15:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No, it's a date range picker: daterangepicker.com. The code is a little bit long and I won't paste it here, anyway the steps are: on datepicker selection change, call a function date_changed() which calls a list of function, like loadPerformanceRatio(..) who makes an ajax call to get the values to draw on my charts.
  
  – Giuly
  Mar 27 at 16:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Giuly - Code would really help. SO recommends providing an MVCE; a simplified version of your setup that reproduces would help get a sense of how you're updating/drawing everything.
  
  – xorspark
  Mar 28 at 22:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I just added an example of a different but similar situation
  
  – Giuly
  Apr 16 at 7:48
  

  
  
  
  

add a comment | 

I have six charts in a page, three gauges and three XY charts.
The 3 gauge charts are always visible, while the XY charts are collapsed by default.

On page load, all the charts are correctly drawn, whether they are collapsed or not. But if I refresh all charts, for instance after changing a datepicker value, all the collapsed charts become white.

How can I avoid this? Is there a command to invalidate chart size, or just redraw it when div is resized?

EDIT:

I was able to reproduce a similar behaviour with tabs: on page load all the tabs are correctly shown, but if I click a refresh button to redraw charts, the tabs not currently visible become blank.

You can check here: https://jsfiddle.net/giulia_pinnisi/cqoz5vbg/13/

draw_chart("chart1", data1);
draw_chart("chart2", data2);
draw_chart("chart3", data3);

$('#refresh_button').click(function() 
 draw_chart("chart1", data1);
 draw_chart("chart2", data2);
 draw_chart("chart3", data3);
);

Thank you very much

Giulia

javascript amcharts amcharts4

share|improve this question

edited May 26 at 11:26

Samuel Philipp

7,77299 gold badges1818 silver badges3636 bronze badges

asked Mar 27 at 15:08

GiulyGiuly

1033 bronze badges

draw_chart("chart1", data1);
draw_chart("chart2", data2);
draw_chart("chart3", data3);

$('#refresh_button').click(function() 
 draw_chart("chart1", data1);
 draw_chart("chart2", data2);
 draw_chart("chart3", data3);
);

share|improve this question

edited May 26 at 11:26

Samuel Philipp

7,77299 gold badges1818 silver badges3636 bronze badges

asked Mar 27 at 15:08

GiulyGiuly

1033 bronze badges

share|improve this question

edited May 26 at 11:26

Samuel Philipp

7,77299 gold badges1818 silver badges3636 bronze badges

asked Mar 27 at 15:08

GiulyGiuly

1033 bronze badges

edited May 26 at 11:26

Samuel Philipp

7,77299 gold badges1818 silver badges3636 bronze badges

edited May 26 at 11:26

Samuel Philipp

7,77299 gold badges1818 silver badges3636 bronze badges

asked Mar 27 at 15:08

GiulyGiuly

1033 bronze badges

asked Mar 27 at 15:08

GiulyGiuly

1033 bronze badges

1 Answer
1

active

oldest

votes

0

You need to dispose the chart if you want to re-instantiate it.

chart.dispose();

Check the updated example: https://jsfiddle.net/hosfrcd8/

share|improve this answer

answered Apr 23 at 4:47

DarlessonDarlesson

2,47111 gold badge1414 silver badges1919 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I discovered that I was trying to create a new chart in the same container over existing one. That is not right way to do it. The old SVG is overwritten, but all the variables, event handlers, helper elements remain, and quite possible causing all kinds of issues. As you said, to overwrite a chart I have to call dispose() on its object first. Better yet, if someone needs to just update data of the charts, you can reuse same objects, and just set their data property.
  
  – Giuly
  May 9 at 8:50
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55380502%2famcharts4-collapsed-charts-becoming-blank-after-related-interactivity%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You need to dispose the chart if you want to re-instantiate it.

chart.dispose();

Check the updated example: https://jsfiddle.net/hosfrcd8/

share|improve this answer

answered Apr 23 at 4:47

DarlessonDarlesson

2,47111 gold badge1414 silver badges1919 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I discovered that I was trying to create a new chart in the same container over existing one. That is not right way to do it. The old SVG is overwritten, but all the variables, event handlers, helper elements remain, and quite possible causing all kinds of issues. As you said, to overwrite a chart I have to call dispose() on its object first. Better yet, if someone needs to just update data of the charts, you can reuse same objects, and just set their data property.
  
  – Giuly
  May 9 at 8:50
  

  
  
  
  

add a comment | 

0

You need to dispose the chart if you want to re-instantiate it.

chart.dispose();

Check the updated example: https://jsfiddle.net/hosfrcd8/

share|improve this answer

answered Apr 23 at 4:47

DarlessonDarlesson

2,47111 gold badge1414 silver badges1919 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I discovered that I was trying to create a new chart in the same container over existing one. That is not right way to do it. The old SVG is overwritten, but all the variables, event handlers, helper elements remain, and quite possible causing all kinds of issues. As you said, to overwrite a chart I have to call dispose() on its object first. Better yet, if someone needs to just update data of the charts, you can reuse same objects, and just set their data property.
  
  – Giuly
  May 9 at 8:50
  

  
  
  
  

add a comment | 

You need to dispose the chart if you want to re-instantiate it.

chart.dispose();

Check the updated example: https://jsfiddle.net/hosfrcd8/

share|improve this answer

answered Apr 23 at 4:47

DarlessonDarlesson

2,47111 gold badge1414 silver badges1919 bronze badges

chart.dispose();

share|improve this answer

answered Apr 23 at 4:47

DarlessonDarlesson

2,47111 gold badge1414 silver badges1919 bronze badges

answered Apr 23 at 4:47

DarlessonDarlesson

2,47111 gold badge1414 silver badges1919 bronze badges

answered Apr 23 at 4:47

DarlessonDarlesson

2,47111 gold badge1414 silver badges1919 bronze badges