Multiple Graphs on Tabs

[mahi2000]

On same page, I’ve implemented multiple graphs by using Tabs i.e. Tab 1, Tab 2, Tab 3… and the graph width is defined 100% and height is defined 250px however, if user interacts with Tabs, the width of the graph increases and graph displays outside the parent div.

Screenshot for reference
https://dl.dropboxusercontent.com/u/735356/GraphIssue.jpg

Please suggest how to handle this.

• This topic was modified 7 years, 10 months ago by mahi2000. Reason: Screenshot added

[Sanjoy]

@mahi2000,

The problem may be due to rendering the chart before even tab is displayed because of which dimensions for the chart are not calculated properly. You can use tab events to initialize and render the respective chart after the tab is displayed as shown in this code snippet.

$('#bs-tab2').on("shown.bs.tab",function(){
  chartTab2();
  $('#bs-tab2').off();
});

Please take a look at this JSFiddle for complete code.

If the problem still persists, please create a JSFiddle. So that we can look into it.

—-
Sanjoy Debnath
Team CanvasJS

[mahi2000]

Sanjoy, thanks for the reply. My graphs are dynamic and still I am finding the issue and also one more issue I’ve identified i.e. in mobile devices, some instances, graph is blanked. Say portrait view graph are displayed and if user switched to landscape view, graph is blanked.

[mahi2000]

Please let me know if there is any solution.

[Vishwas R]

@mahi2000,

Please refer to this JSFiddle for an example on rendering multiple dynamic charts in bootstrap tabs using bootstrap shown.bs.tab tab events.

Also, we checked the charts with multiple mobile devices and it seems to be working fine. Can you kindly create a JSFiddle reproducing the issue, so that we can look into the issue and help you out. Along with it, please provide the following information: Mobile Device, OS and its version, Browser and version.

—-
Vishwas R