Adix182

Hover and Tooltip not working when more than one chart on a page

Recommended Posts

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();
  }
});

 

Edited by Adix182

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now