FusionCharts - Charts in tooltips
Created using FusionCharts Suite XT - www.fusioncharts.com
by Gagan Sikri
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.powercharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!--
1) What question did we begin with
--- To show students report card for a particular week and to find which student as performed well
2) Where this chart used?
---Its used in education domain,and the goal is to student performance for the subject that they have opted for that week.
3) Did chart answered the question
This chart shows clear rating of a student in terms of image
4) How to compare his previous score
---Using tooltip.
-->
<div id="chart-container">FusionCharts will render here</div>CSS
/*[
{
"rowid": "Psychology",
"columnid": "Anil",
"value": "8.7",
"tlLabel":"9.1",
"showValue":"0"
},
{
"rowid": "Psychology",
"columnid": "Ajay",
"value": "8.5",
"tlLabel":"9.1",
"showValue":"0"
},
{
"rowid": "Psychology",
"columnid": "Arjun",
"showValue":"0",
"tlLabel":"9.1",
"value": "9.3"
},
{
"rowid": "Psychology",
"columnid": "Ashok",
"showValue":"0",
"tlLabel":"9.1",
"value": "9.7"
},
{
"rowid": "Psychology",
"columnid": "Bharath",
"showValue":"0",
"tlLabel":"9.1",
"value": "8"
},
{
"rowid": "Psychology",
"columnid": "Kaushik",
"showValue":"0",
"tlLabel":"9.1",
"value": "9"
},
{
"rowid": "Business Studies",
"columnid": "Anil",
"value": "9.2",
"tlLabel":"9.1",
...JavaScript
FusionCharts.ready(function () {
var salesHMChart = new FusionCharts({
type: 'heatmap',
renderAt: 'chart-container',
width: chart_width,
height: chart_height,
dataFormat: 'json',
dataSource: {
"chart": {
"theme" : "fint",
"caption": "Students Report Card",
"subcaption": "For October 2nd Week",
"xAxisName":"Students",
"yAxisName":"Class Name",
"showplotborder": "1",
"PlotfillAlpha" :"0",
"plotTooltext": "<div id='nameDiv' style='background:#ffffff'></div>",
"drawCustomLegendIcon":"1",
"legendBgAlpha":"0",
"legendIconSides":"3",
"canvasTopMargin":"50",
"canvasBottomMargin":"20",
"interactiveLegend":"0",
"labelYPadding":"20",
"valueFontColor":"#ffffff",
// "LabelPadding": "57",
"LabelPadding": "10",
"showLegend":"1",
"legendBorderAlpha":"0",
"xAxisLabelsOnTop": "1"
},
"annotations": {
"width": "900",
"height": "550",
"autoScale": "1",
"groups": [
{
"id": "student-images",
"items": annotation
}
]
},
"dataset": [
{
"data": actualData
}
],
"colorrange": {
"gradient": "0",
"minValue": "0",
"code": "#e24b1a",
"startLabel": "Poor",
"alpha":"0",
"endLabel": "Good",
"color": [
{
"code":...