FusionCharts API-Event: dataplotClick
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<div id="chart-container">FusionCharts will render here</div>
<div>
<div id="chart-container1">FusionCharts will render here</div>
<div>
CSS
body {
padding: 5px;
margin: 0 auto;
}
#header {
display: none;
}
#indicatorDiv {
width: 500px;
font-family:'Arial', 'Helvetica';
font-size: 14px;
}
p {
margin-top: 20px;
margin-bottom: 20px;
}
#attrs-table {
text-align: center;
width: 500px;
}
.parameter-name, .parameter-value {
width: 250px;
font-weight: bold;
text-align: center;
float: left;
}
.title, .value {
float:left;
width: 230px;
height: 20px;
background: #fff;
padding: 5px 10px;
}
.title {
clear: left;
}
.title:nth-child(4n+1), .value:nth-child(4n+2) {
background: rgb(0, 117, 194);
color: #fff;
}
.value {
word-wrap: break-word;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
JavaScript
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'heatmap',
renderAt: 'chart-container',
width: '550',
height: '270',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Top Smartphone Ratings",
"subcaption": "By Features",
"xAxisName":"Features",
"yAxisName":"Model",
"showplotborder": "1",
"xAxisLabelsOnTop": "1",
"plottooltext":"<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;' >$rowLabel :</div>{br}Rating : <b>$dataValue</b>{br}$columnLabel : <b>$tlLabel</b>{br}<b>$trLabel</b>",
//Cosmetics
"baseFontColor" : "#333333",
"baseFont" : "Helvetica Neue,Arial",
"captionFontSize" : "14",
"subcaptionFontSize" : "14",
"subcaptionFontBold" : "0",
"showBorder" : "0",
"bgColor" : "#ffffff",
"showShadow" : "0",
"usePlotGradientColor" :"0",
"canvasBgColor" : "#ffffff",
"canvasBorderAlpha" : "0",
"legendBgAlpha" : "0",
"legendBorderAlpha" : "0",
"legendShadow" : "0",
"legendItemFontSize" : "10",
"legendItemFontColor" : "#666666",
"toolTipColor" : "#ffffff",
"toolTipBorderThickness" : "0",
"toolTipBgColor" : "#000000",
"toolTipBgAlpha" : "80",
"toolTipBorderRadius" : "2",
"toolTipPadding" : "5",
},
"dataset": [
{
"data": [
{
"rowid": "Samsung Galaxy S5",
...