Search the Community

Showing results for tags 'page'.


More search options

  • Search By Tags

    Type tags separated by commas.

  • Search By Author

Content Type


Forums

  • Company Forums
    • Company News
  • Product Forums
    • FusionCharts XT
    • FusionWidgets XT
    • PowerCharts XT
    • FusionMaps XT
    • Collabion Charts for SharePoint
    • jQuery Plugin for FusionCharts
    • AngularJS plugin
    • ReactJS plugin
  • General Forums
    • FusionCharts Jobs and Consultation
    • FusionLounge

Found 1 result

  1. Hi, I'm trying to render more than one chart to my page, and whenever I do that, I'm facing a problem where only the first chart is fully interactive, namely hover and tooltip, work properly. But the next charts don't display hover and tooltip at all. Do you have any idea what might cause it? I use jquery to achieve that. Also, I get data from google sheets, so the charts will be updated whenever I change the numbers. HTML: <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script> <script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script> <title>Document</title> </head> <body> <div id="all-container" class = "container"></div> <div id="total-container" class = "container"></div> </body> CSS: .container { height: 500px } jQuery: // Charts // Allocation chart var spreadsheetId = "1IOF09DwPm8ifD5pLlmhHVnNC2F4PJvS3CjEpNo3T3A8", url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetId + "/od6/public/basic?alt=json"; $.get({ url: url, success: function(response) { var data = response.feed.entry, len = data.length, i = 0, parsedData = []; for (i = 0; i < len; i++) { parsedData.push({ label: data[i].title.$t, value: data[i].content.$t.replace('income: ', ''), }); } new FusionCharts({ type: 'Pie2D', renderAt: 'all-container', width: '100%', height: '100%', dataFormat: 'json', dataSource: { "chart": { "baseFontSize": "13", "caption": "Funds allocation", "subCaption": "", "numberPrefix": "€", "captionPadding": "50", "chartTopMargin": "", "legendIconScale": "2", "chartBottomMargin": "", "showBorder": "0", "decimals": "1", "theme": "fusion", "showLegend": "1", "use3DLighting": "0", "palettecolors": "#4a3e9b, #ab3494, #ea3973, #ff6946, #ffa600", "bgColor": "#ffffff", "legendBorderColor": "#ffffff", "legendShadow": "0", "chartTopMargin": "30", "chartBottomMargin": "30" }, "data": parsedData } }).render(); } }); // Total chart var spreadsheetIdd = "1QvCi5LJRBZr3pq4xXZArhaCSVmTpL9We0xBRXnCuRpk", urll = "https://spreadsheets.google.com/feeds/list/" + spreadsheetIdd + "/1/public/basic?alt=json"; $.get({ url: urll, success: function(response) { var data = response.feed.entry, len = data.length, i = 0, parsedData = []; for (i = 0; i < len; i++) { parsedData.push({ label: data[i].title.$t, value: data[i].content.$t.replace('balance: ', ''), }); } new FusionCharts({ type: 'area2d', renderAt: 'total-container', width: '80%', height: '100%', dataFormat: 'json', dataSource: { "chart": { "caption": "Total Portfolio Value", "baseFontSize": "13", "formatNumberScale": "0", "subCaption": "Since inception", "xAxisName": "Date", "yAxisName": "Value (In EUR)", "numberPrefix": "€", "showValues": "1", "theme": "fusion", "showHoverEffect": "1", "decimals": "3", "anchorHoverEffect": "1", "showToolTip": "1", "baseChartMessageFont":"", "palettecolors": "#57886c", }, "data": parsedData } }).render(); } });