0

I use plugin jquery flot http://www.flotcharts.org/ and bootstrap tabs

When I put div to generate flot in tab which is now not vissible and wanted to generate him in $(document).ready(function(){}) in console show me error:

Invalid dimensions for plot, width = 0, height = 280

JavaScript code:

$(document).ready(function(){
    var chart_plot_01_settings = {...}, arr_data1 = ..., arr_data2 = ...;
    $.plot( $("#chart"), [ arr_data1, arr_data2 ],  chart_plot_01_settings );
})
Kamil Wyremski
  • 41
  • 7
  • can you add some code. so it will be easy to understand and answer. – Mujthaba Ibrahim Jul 26 '17 at 13:04
  • Possible duplicate of [Uncaught Invalid dimensions for plot, width = null, height = null for flot charts api](https://stackoverflow.com/questions/21719522/uncaught-invalid-dimensions-for-plot-width-null-height-null-for-flot-chart) – Raidri Jul 26 '17 at 13:07
  • I find solution! I should change to: $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { $.plot( $("#chart"), [ arr_data1, arr_data2 ], chart_plot_01_settings ); }) After this plot will be paint after change tab:) Thank you for help! – Kamil Wyremski Jul 26 '17 at 17:22
  • @KamilWyremski If found solution create a answer and post code there rather than code in comments –  Jul 26 '17 at 22:16
  • @wolfgang1983 - ok, thank you for info! – Kamil Wyremski Jul 27 '17 at 06:26

1 Answers1

0

I finded solution! I should change my code to: 

$(document).ready(function(){
    var chart_plot_01_settings = {...}, arr_data1 = ..., arr_data2 = ...;
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
        $.plot( $("#chart"), [ arr_data1, arr_data2 ], chart_plot_01_settings ); 
    }) 
})

After this plot will be paint after user change tab - thank you for help!

Kamil Wyremski
  • 41
  • 7