Alignment problem of charts inside JQuery tabs

chanda shirisha · January 24, 2015

Hi,

I am using fusion charts trial V 3.4 version.

When am using charts inside my jquery tabs, chart inside first tab is aligning properly for remaining tabs chart width and height is breaking to half and data labels also not aligned properly.

Below am attaching the example chart for World with 8 regions map.

Please get me out of this issue.

Sanjukta · January 27, 2015

Hi,

I am using fusion charts trial V 3.4 version.

When am using charts inside my jquery tabs, chart inside first tab is aligning properly for remaining tabs chart width and height is breaking to half and data labels also not aligned properly.

Below am attaching the example chart for World with 8 regions map.

Please get me out of this issue.

Hi,

Could you please let us know the jQuery version you are using? Also, we would recommend you to upgrade to the latest version and use the latest jQuery files to see if this works.

In case this doesn't help, please mail us the sample so that we can test it.

Hope this helps.

chanda shirisha · January 28, 2015

Hi,

Thanks for quick response. I am using latest version of JQuery and am also upgraded to the latest version V3.6.0 of fusion charts.

Then also am facing the same issue when am using inside jquery tabs.

Please find below attached sample source code.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script type="text/javascript" src="/js/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="/js/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<!-- <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->
<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
  </head>
<body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab1</a></li>
    <li><a href="#tabs-2">Tab2</a></li>
    <li><a href="#tabs-3">Tab3</a></li>
  </ul>
  <div id="tabs-1">
  <div id="market-container1"></div>
<script>
FusionCharts.ready(function () {
    var revenueCompChart = new FusionCharts({
        type: 'mscombidy2d',
        renderAt: 'market-container1',
        id:'market1',
        width: '750',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Inventory by Product Categories",
                "bgcolor": "FFFFFF",
                "plotgradientcolor": "",
                "showalternatehgridcolor": "0",
                "showplotborder": "0",
                "divlinecolor": "CCCCCC",
                "showvalues": "0",
                "showcanvasborder": "0",
                "pyaxisname": "Cost of Inventory",
                "syaxisname": "Units in Inventory",
                "numberprefix": "$",
                "labeldisplay": "STAGGER",
                "slantlabels": "1",
                "canvasborderalpha": "0",
                "legendshadow": "0",
                "legendborderalpha": "0",
                "showborder": "0"
            },
            "categories": [
                {
                    "category": [
                        {
                            "label": "Seafood"
                        },
                        {
                            "label": "Beverages"
                        },
                        {
                            "label": "Condiments"
                        },
                        {
                            "label": "Dairy Products"
                        },
                        {
                            "label": "Confections"
                        },
                        {
                            "label": "Meat/Poultry"
                        },
                        {
                            "label": "Grains/Cereals"
                        },
                        {
                            "label": "Produce"
                        }
                    ]
                }
            ],
            "dataset": [
                {
                    "seriesname": "Cost of Inventory",
                    "color": "008ee4",
                    "data": [
                        {
                            "value": "13510"
                        },
                        {
                            "value": "12480"
                        },
                        {
                            "value": "12024"
                        },
                        {
                            "value": "11271"
                        },
                        {
                            "value": "10392"
                        },
                        {
                            "value": "5729"
                        },
                        {
                            "value": "5594"
                        },
                        {
                            "value": "3549"
                        }
                    ]
                },
                {
                    "seriesname": "Quantity",
                    "parentyaxis": "S",
                    "renderas": "Line",
                    "color": "f8bd19",
                    "data": [
                        {
                            "value": "701"
                        },
                        {
                            "value": "559"
                        },
                        {
                            "value": "507"
                        },
                        {
                            "value": "393"
                        },
                        {
                            "value": "386"
                        },
                        {
                            "value": "165"
                        },
                        {
                            "value": "258"
                        },
                        {
                            "value": "100"
                        }
                    ]
                }
            ]
        }
    });
    revenueCompChart.render();
});
</script>  </div>
  <div id="tabs-2">
  <div id="market-container2"></div>
<script>
FusionCharts.ready(function () {
    var revenueCompChart = new FusionCharts({
        type: 'pie2d',
        renderAt: 'market-container2',
        id:'market2',
        width: '750',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Sales Per Employee for 2014",
                "palette": "2",
                "animation": "1",
                "formatnumberscale": "1",
                "decimals": "0",
                "numberprefix": "$",
                "pieslicedepth": "30",
                "startingangle": "125",
                "showBorder": "0"
            },
            "data": [
                {
                    "label": "Leverling",
                    "value": "100524",
                    "issliced": "1"
                },
                {
                    "label": "Fuller",
                    "value": "87790",
                    "issliced": "1"
                },
                {
                    "label": "Davolio",
                    "value": "81898",
                    "issliced": "0"
                },
                {
                    "label": "Peacock",
                    "value": "76438",
                    "issliced": "0"
                },
                {
                    "label": "King",
                    "value": "57430",
                    "issliced": "0"
                },
                {
                    "label": "Callahan",
                    "value": "55091",
                    "issliced": "0"
                },
                {
                    "label": "Dodsworth",
                    "value": "43962",
                    "issliced": "0"
                },
                {
                    "label": "Suyama",
                    "value": "22474",
                    "issliced": "0"
                },
                {
                    "label": "Buchanan",
                    "value": "21637",
                    "issliced": "0"
                }
            ]
        }
    });
    revenueCompChart.render();
});
</script>
  </div>
  <div id="tabs-3">
  <div id="market-container3"></div>
   <script>
FusionCharts.ready(function () {
    var revenueCompChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'market-container3',
        id:'market3',
        width: '750',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Half Yearly Revenue Analysis",
                "yaxisname": "Revenue",
                "numberprefix": "$",
                "yaxismaxvalue": "250000",
                "showborder": "0",
                "theme": "fint"
            },
            "data": [
                {
                    "label": "Jul",
                    "value": "150000",
                    "tooltext": "Occupancy: 67%{br}Revenue:$150k{br}3 conferences hosted!"
                },
                {
                    "label": "Aug",
                    "value": "130000",
                    "tooltext": "Occupancy: 64%{br}Revenue:$130k{br}Lean summer period!"
                },
                {
                    "label": "Sep",
                    "tooltext": "Occupancy: 44%{br}Revenue: $80k{br}Reason: Renovating the Lobby",
                    "value": "95000"
                },
                {
                    "label": "Oct",
                    "value": "170000",
                    "tooltext": "Occupancy: 73%{br}Revenue:$170k{br}Anniversary Discount: 25%"
                },
                {
                    "label": "Nov",
                    "value": "155000",
                    "tooltext": "Occupancy: 70%{br}Revenue:$155k{br}2 conferences cancelled!"
                },
                {
                    "label": "Dec",
                    "value": "230000",
                    "tooltext": "Occupancy: 95%{br}Revenue:$230k{br}Crossed last year record!"
                }
            ]
        }
    });
    revenueCompChart.render();
});
</script>
  </div>
</div>
 
</body>
</html>

Thanks & Regards,

Shirisha

Sanjukta · February 2, 2015

Hi,

Thanks for quick response. I am using latest version of JQuery and am also upgraded to the latest version V3.6.0 of fusion charts.

Then also am facing the same issue when am using inside jquery tabs.

Please find below attached sample source code.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script type="text/javascript" src="/js/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="/js/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<!-- <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->
<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
  </head>
<body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab1</a></li>
    <li><a href="#tabs-2">Tab2</a></li>
    <li><a href="#tabs-3">Tab3</a></li>
  </ul>
  <div id="tabs-1">
  <div id="market-container1"></div>
<script>
FusionCharts.ready(function () {
    var revenueCompChart = new FusionCharts({
        type: 'mscombidy2d',
        renderAt: 'market-container1',
        id:'market1',
        width: '750',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Inventory by Product Categories",
                "bgcolor": "FFFFFF",
                "plotgradientcolor": "",
                "showalternatehgridcolor": "0",
                "showplotborder": "0",
                "divlinecolor": "CCCCCC",
                "showvalues": "0",
                "showcanvasborder": "0",
                "pyaxisname": "Cost of Inventory",
                "syaxisname": "Units in Inventory",
                "numberprefix": "$",
                "labeldisplay": "STAGGER",
                "slantlabels": "1",
                "canvasborderalpha": "0",
                "legendshadow": "0",
                "legendborderalpha": "0",
                "showborder": "0"
            },
            "categories": [
                {
                    "category": [
                        {
                            "label": "Seafood"
                        },
                        {
                            "label": "Beverages"
                        },
                        {
                            "label": "Condiments"
                        },
                        {
                            "label": "Dairy Products"
                        },
                        {
                            "label": "Confections"
                        },
                        {
                            "label": "Meat/Poultry"
                        },
                        {
                            "label": "Grains/Cereals"
                        },
                        {
                            "label": "Produce"
                        }
                    ]
                }
            ],
            "dataset": [
                {
                    "seriesname": "Cost of Inventory",
                    "color": "008ee4",
                    "data": [
                        {
                            "value": "13510"
                        },
                        {
                            "value": "12480"
                        },
                        {
                            "value": "12024"
                        },
                        {
                            "value": "11271"
                        },
                        {
                            "value": "10392"
                        },
                        {
                            "value": "5729"
                        },
                        {
                            "value": "5594"
                        },
                        {
                            "value": "3549"
                        }
                    ]
                },
                {
                    "seriesname": "Quantity",
                    "parentyaxis": "S",
                    "renderas": "Line",
                    "color": "f8bd19",
                    "data": [
                        {
                            "value": "701"
                        },
                        {
                            "value": "559"
                        },
                        {
                            "value": "507"
                        },
                        {
                            "value": "393"
                        },
                        {
                            "value": "386"
                        },
                        {
                            "value": "165"
                        },
                        {
                            "value": "258"
                        },
                        {
                            "value": "100"
                        }
                    ]
                }
            ]
        }
    });
    revenueCompChart.render();
});
</script>  </div>
  <div id="tabs-2">
  <div id="market-container2"></div>
<script>
FusionCharts.ready(function () {
    var revenueCompChart = new FusionCharts({
        type: 'pie2d',
        renderAt: 'market-container2',
        id:'market2',
        width: '750',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Sales Per Employee for 2014",
                "palette": "2",
                "animation": "1",
                "formatnumberscale": "1",
                "decimals": "0",
                "numberprefix": "$",
                "pieslicedepth": "30",
                "startingangle": "125",
                "showBorder": "0"
            },
            "data": [
                {
                    "label": "Leverling",
                    "value": "100524",
                    "issliced": "1"
                },
                {
                    "label": "Fuller",
                    "value": "87790",
                    "issliced": "1"
                },
                {
                    "label": "Davolio",
                    "value": "81898",
                    "issliced": "0"
                },
                {
                    "label": "Peacock",
                    "value": "76438",
                    "issliced": "0"
                },
                {
                    "label": "King",
                    "value": "57430",
                    "issliced": "0"
                },
                {
                    "label": "Callahan",
                    "value": "55091",
                    "issliced": "0"
                },
                {
                    "label": "Dodsworth",
                    "value": "43962",
                    "issliced": "0"
                },
                {
                    "label": "Suyama",
                    "value": "22474",
                    "issliced": "0"
                },
                {
                    "label": "Buchanan",
                    "value": "21637",
                    "issliced": "0"
                }
            ]
        }
    });
    revenueCompChart.render();
});
</script>
  </div>
  <div id="tabs-3">
  <div id="market-container3"></div>
   <script>
FusionCharts.ready(function () {
    var revenueCompChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'market-container3',
        id:'market3',
        width: '750',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Half Yearly Revenue Analysis",
                "yaxisname": "Revenue",
                "numberprefix": "$",
                "yaxismaxvalue": "250000",
                "showborder": "0",
                "theme": "fint"
            },
            "data": [
                {
                    "label": "Jul",
                    "value": "150000",
                    "tooltext": "Occupancy: 67%{br}Revenue:$150k{br}3 conferences hosted!"
                },
                {
                    "label": "Aug",
                    "value": "130000",
                    "tooltext": "Occupancy: 64%{br}Revenue:$130k{br}Lean summer period!"
                },
                {
                    "label": "Sep",
                    "tooltext": "Occupancy: 44%{br}Revenue: $80k{br}Reason: Renovating the Lobby",
                    "value": "95000"
                },
                {
                    "label": "Oct",
                    "value": "170000",
                    "tooltext": "Occupancy: 73%{br}Revenue:$170k{br}Anniversary Discount: 25%"
                },
                {
                    "label": "Nov",
                    "value": "155000",
                    "tooltext": "Occupancy: 70%{br}Revenue:$155k{br}2 conferences cancelled!"
                },
                {
                    "label": "Dec",
                    "value": "230000",
                    "tooltext": "Occupancy: 95%{br}Revenue:$230k{br}Crossed last year record!"
                }
            ]
        }
    });
    revenueCompChart.render();
});
</script>
  </div>
</div>
 
</body>
</html>

Thanks & Regards,

Shirisha

Hi Shirisha,

We tested your code and it seems that the CSS is messing up the chart dimensions.

Hence, we would recommend you to provide the fixed width and height in the chart divs and set 100% width and height for each chart in the code.

Please check with the attached modified sample for your reference.

Hope this helps.

Chart_TabIssues.zip

chanda shirisha · February 4, 2015

Hi,

The Solution has helped me for resolving the alignment issue in website. But when am trying to access the SVG data by using

svg:FusionCharts('id').getSVGString() and converting it to image by using ImageMagick library, still am facing the alignment issue on generated chart image.

I am using ImageMagick 6.5.4-7 version for converting SVG chart data to image and the generated image background color is coming as grey and other styles

font weight, font family also not working on generated image by using SVG even when I set the chart background color to white and other styles as well.

But when I am using Highcharts SVG data to convert as image with ImageMagick the image is coming properly with all the styles what I mentioned in chart.

Please help me to get me out of this.

Thanks & Regards,

Ch.Shirisha.

Sanjukta · February 4, 2015

Hi,

The Solution has helped me for resolving the alignment issue in website. But when am trying to access the SVG data by using

svg:FusionCharts('id').getSVGString() and converting it to image by using ImageMagick library, still am facing the alignment issue on generated chart image.

I am using ImageMagick 6.5.4-7 version for converting SVG chart data to image and the generated image background color is coming as grey and other styles

font weight, font family also not working on generated image by using SVG even when I set the chart background color to white and other styles as well.

But when I am using Highcharts SVG data to convert as image with ImageMagick the image is coming properly with all the styles what I mentioned in chart.

Please help me to get me out of this.

Thanks & Regards,

Ch.Shirisha.chart1.png

Hi Shirisha,

Could you please save the string as SVG file and open it in the browser so that we can confirm if the issue with SVG string or the 3rd party converter?

Awaiting your response.

chanda shirisha · February 4, 2015

Hi,

The background color is coming properly when am trying to print svg data. But when am trying to access the SVG data of chart which is there inside jquery

tabs, still am facing the alignment issue of the chart.

Below I am attaching the image and source code.

In the below example when I click on GetSvg button am taking the second tab chart svg data and printing. But its not coming properly without loading charts

inside second tabs and third tabs.

Chart_TabIssues (2).zip

Please get me out of this issue.

Thanks & Regards,

Ch.Shirisha.

Sanjukta · February 6, 2015

Hi,

The background color is coming properly when am trying to print svg data. But when am trying to access the SVG data of chart which is there inside jquery

tabs, still am facing the alignment issue of the chart.

Below I am attaching the image and source code.

In the below example when I click on GetSvg button am taking the second tab chart svg data and printing. But its not coming properly without loading charts

inside second tabs and third tabs.

chart2.png

Chart_TabIssues (2).zip

Please get me out of this issue.

Thanks & Regards,

Ch.Shirisha.

Hi Shirisha,

Please mail us at [email protected] with your sample and reference to the Forum post so that we can take this up with priority.

We are looking into this and shall revert to you shortly.

Thank you for your continued patience.

Sign In

Alignment problem of charts inside JQuery tabs

Recommended Posts

chanda shirisha

Share this post

Link to post

Share on other sites

Sanjukta

Share this post

Link to post

Share on other sites

chanda shirisha

Share this post

Link to post

Share on other sites

Sanjukta

Share this post

Link to post

Share on other sites

chanda shirisha

Share this post

Link to post

Share on other sites

Sanjukta

Share this post

Link to post

Share on other sites

chanda shirisha

Share this post

Link to post

Share on other sites

Sanjukta

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity