Heat Map Chart Specification Sheet

<chart caption='Weekly Percentage' subCaption='In percentage'>

  <rows>
    <row id='Google' label='Google US'/>
    <row id='Yahoo' label='Yahoo US'/>
    <row id='Microsoft' label='Microsoft US'/>
  </rows>

  <columns>
    <column id='MON' label='Monday'/>
    <column id='TUE' label='Tuesday'/>
    <column id='WED' label='Wednesday'/>
    <column id='THU' label='Thursday'/>
    <column id='FRI' label='Friday'/>
  </columns>
	
<dataset>
          
     <set rowId='Yahoo' columnId='Mon' value='0' />
     <set rowId='Yahoo' columnId='Tue' value='71'/>
     <set rowId='Yahoo' columnId='Wed' value='70'/>
     <set rowId='Yahoo' columnId='Thu' value='3'/>
     <set rowId='Yahoo' columnId='Fri' value='79' />
	 
     <set rowId='Google' columnId='Mon' value='68'/>
     <set rowId='Google' columnId='Tue' value='5'/>
     <set rowId='Google' columnId='Wed' value='95'/>
     <set rowId='Google' columnId='Thu' value='-10'/>
     <set rowId='Google' columnId='Fri' value='55.98'/>

     <set rowId='Microsoft' columnId='Mon' value='98' />
     <set rowId='Microsoft' columnId='Tue' value='8'/>
     <set rowId='Microsoft' columnId='Wed' value='123'/>
     <set rowId='Microsoft' columnId='Thu' value='79'/>
     <set rowId='Microsoft' columnId='Fri' value='39'/>
	 
 </dataset>
	 
<colorRange mapbypercent='1' gradient='1' minValue='0' code='00CCFF' startLabel='Poor' endLabel='Good'>
    <color code ='66ADD9' maxValue='30' label='BAD'/>
    <color code ='F2CF63' maxValue='70' label='AVERAGE'/>
    <color code ='D99036' maxValue='100' />  	
	
</colorRange>

</chart>

{
  "chart":{
    "caption":"Weekly Percentage",
    "subcaption":"In percentage"
  },
  "rows":{
    "row":[{
        "id":"Google",
        "label":"Google US"
      },
      {
        "id":"Yahoo",
        "label":"Yahoo US"
      },
      {
        "id":"Microsoft",
        "label":"Microsoft US"
      }
    ]
  },
  "columns":{
    "column":[{
        "id":"MON",
        "label":"Monday"
      },
      {
        "id":"TUE",
        "label":"Tuesday"
      },
      {
        "id":"WED",
        "label":"Wednesday"
      },
      {
        "id":"THU",
        "label":"Thursday"
      },
      {
        "id":"FRI",
        "label":"Friday"
      }
    ]
  },
  "dataset":[{
      "data":[{
          "rowid":"Yahoo",
          "columnid":"Mon",
          "value":"0"
        },
        {
          "rowid":"Yahoo",
          "columnid":"Tue",
          "value":"71"
        },
        {
          "rowid":"Yahoo",
          "columnid":"Wed",
          "value":"70"
        },
        {
          "rowid":"Yahoo",
          "columnid":"Thu",
          "value":"3"
        },
        {
          "rowid":"Yahoo",
          "columnid":"Fri",
          "value":"79"
        },
        {
          "rowid":"Google",
          "columnid":"Mon",
          "value":"68"
        },
        {
          "rowid":"Google",
          "columnid":"Tue",
          "value":"5"
        },
        {
          "rowid":"Google",
          "columnid":"Wed",
          "value":"95"
        },
        {
          "rowid":"Google",
          "columnid":"Thu",
          "value":"-10"
        },
        {
          "rowid":"Google",
          "columnid":"Fri",
          "value":"55.98"
        },
        {
          "rowid":"Microsoft",
          "columnid":"Mon",
          "value":"98"
        },
        {
          "rowid":"Microsoft",
          "columnid":"Tue",
          "value":"8"
        },
        {
          "rowid":"Microsoft",
          "columnid":"Wed",
          "value":"123"
        },
        {
          "rowid":"Microsoft",
          "columnid":"Thu",
          "value":"79"
        },
        {
          "rowid":"Microsoft",
          "columnid":"Fri",
          "value":"39"
        }
      ]
    }
  ],
  "colorrange":{
    "mapbypercent":"1",
    "gradient":"1",
    "minvalue":"0",
    "code":"00CCFF",
    "startlabel":"Poor",
    "endlabel":"Good",
    "color":[{
        "code":"66ADD9",
        "maxvalue":"30",
        "label":"BAD"
      },
      {
        "code":"F2CF63",
        "maxvalue":"70",
        "label":"AVERAGE"
      },
      {
        "code":"D99036",
        "maxvalue":"100",
      }
    ]
  }
}

Chart	Data	Others
Chart Image Chart Objects Functional Attributes Titles and Axis Names Chart Cosmetics Plot Cosmetics Divisional Lines/Grids Paddings and Margins Tool-tip	Sample XML Data <rows> --> <row> <columns> --> <column> <dataset> --> <set> element <colorRange> element <color> element	Legend Number Formatting Font Properties

Object Name	Description	Features Supported	Animation Parameters Supported
BACKGROUND	BACKGROUND refers to the entire background of the chart.	Animation Shadow Glow Bevel Blur	_alpha _x _y _xScale _yScale
CANVAS	In 2D Charts, CANVAS refers to the area in which the actual chart is plotted. It is represented by a bounded rectangle.	Animation Shadow Glow Bevel Blur	_alpha _x _y _xScale _yScale
CAPTION	CAPTION refers to the heading of the chart.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
DATAXLABELS	DATAXLABELS refer to the x-axis labels of the data.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
DATAYLABELS	DATAYLABELS refer to the y-axis labels of the data.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
DATAPLOT	DATAPLOT refers to the actual plot of the chart. For example, in Column 2D chart, columns are referred to as DATAPLOT. In Pie chart, it is the pies. In Bubble chart, it is the bubbles and so on.	Animation Shadow Glow Bevel Blur	_alpha _x _y _xScale _yScale
HOVERPLOT	HOVERPLOT refers to the visual effect which appears when the mouse cursor is hovered on the data plots.	Animation Shadow Glow Bevel Blur	_alpha _x _y _xScale _yScale
DATAVALUES	DATAVALUES refer to the plot values, that is, value of each data (line, column, bar, pie etc.), which is displayed beside the data plot.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
HDIVLINES	HDIVLINES are horizontal lines running through the canvas. Each divisional line signifies a smaller unit of the entire y-axis thus aiding the users in interpreting the chart.	Animation Shadow Glow Bevel Blur	_alpha _y _xScale
VDIVLINES	VDIVLINES are vertical lines running through the canvas. Each divisional line signifies a smaller unit of the entire x-axis thus aiding the users in interpreting the chart.	Animation Shadow Glow Bevel Blur	_alpha _x _xScale
HGRID	HGRID refers to alternate color bands between two successive horizontal divisional lines.	Animation Shadow Glow Bevel Blur	_alpha _y _xScale _yScale
VGRID	VGRID refers to alternate color bands between two successive vertical divisional lines.	Animation Shadow Glow Bevel Blur	_alpha _x _xScale _yScale
LEGEND	LEGEND is the object in which the series names of all data-sets show up.	Animation Font Shadow Glow Bevel Blur	_alpha
SUBCAPTION	SUBCAPTION refers to the sub-heading of the chart.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
TOOLTIP	TOOLTIP refers to the tool tip shown when mouse is hovered over the data plots.	Font
XAXISNAME	XAXISNAME refers to the x-axis title of the chart.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
YAXISNAME	YAXISNAME refers to the y-axis title of the chart.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
TLDATAVALUES	TLDATAVALUES refer to the label or value which is displayed on the top-left corner of the data plots.	Animation Shadow Glow Bevel Blur	_alpha _x _y
TRDATAVALUES	TRDATAVALUES refer to the label or value which is displayed on the top-right corner of the data plots.	Animation Shadow Glow Bevel Blur	_alpha _x _y
BLDATAVALUES	BLDATAVALUES refer to the label or value which is displayed on the bottom-left corner of the data plots.	Animation Shadow Glow Bevel Blur	_alpha _x _y
BRDATAVALUES	BRDATAVALUES refer to the label or value which is displayed on the bottom-right corner of the data plots.	Animation Shadow Glow Bevel Blur	_alpha _x _y
Back to top

Attribute Name	Type	Range	Description
animation	Boolean	0/1	This attribute gives you the option to control animation in your charts. If you do not want to animate any part of the chart, set this as 0.
palette	Number	1-5	Each chart has 5 pre-defined color palettes which you can choose from. Each palette renders the chart in a different color theme. Valid values are 1-5.
paletteColors	String	List of hex color codes separated by comma	While the palette attribute allows to select a palette theme that applies to chart background, canvas, font and tool-tips, it does not change the colors of data items (that is, column, line, pie etc.). Using paletteColors attribute, you can specify your custom list of hex colors for the data items. The list of colors have to be separated by comma, for example, <chart paletteColors='FF0000,0372AB,FF5904...'>. The chart will cycle through the list of specified colors and then render the data plot accordingly. To use the same set of colors throughout all your charts in a web application, you can store the list of palette colors in your application globally and then provide the same in each chart XML.
showAboutMenuItem	Boolean	0/1	Setting this to 1 shows up a custom context menu in the chart, which can be customized to show your text and can be linked to your Url. For example, you can set the context menu of the chart to include "About your company name" and then link to your company home page. By default, the chart shows "About FusionCharts" when right clicked.
aboutMenuItemLabel	String		The menu item label for the custom context menu item.
aboutMenuItemLink	String	URL	Link for the custom context menu item. You can specify the link in FusionCharts Link Format to be able to open the same in new window, pop-ups, frames or as JavaScript links.
showLabels	Boolean	0/1	It sets the configuration whether the x-axis labels will be displayed or not.
xAxislabelDisplay	String	AUTO Since v 3.2 WRAP STAGGER ROTATE or NONE	Using this attribute, you can customize the alignment of data labels (x-axis labels). There are 5 options: AUTO, WRAP, STAGGER, ROTATE or NONE. By default, this attribute is set to AUTO mode which means that the alignment of the data labels is determined automatically depending on the size of the chart. WRAP wraps the label text if it is too long to fit in one line. ROTATE rotates the labels vertically. STAGGER divides the labels into multiple lines.
maxLabelWidthPercent	Numeric	In Pixels	Restricts the maximum space allotted for the y-axis data labels with respect to the chart's width. If a data label is longer than the specified percentage width then it will either be wrapped or get truncated, subject to the availability of vertical space. Unnecessary space is not reserved for the labels. If all the labels are shorter than the specified maximum width, this value is not applied.
useEllipsesWhenOverflow	Boolean	0/1	When enabled in auto mode, long data labels are truncated by adding ellipses to prevent them from overflowing the chart background. The default value is 1.
trType	String		Specifies the type of data provided in the top-right label. This value is displayed in the tool tip.
tlType	String		Specifies the type of data provided in the top-left label. This value is displayed in the tool tip.
brType	String		Specifies the type of data provided in the bottom-right label. This value is displayed in the tool tip.
blType	String		Specifies the type of data provided in the bottom-left label. This value is displayed in the tool tip.
showTooltipforWrappedLabels	Boolean	0/1	When the labels of the chart are too lengthy, the chart truncates them and displays a part of the label. In this situation, this attribute shows a tooltip displaying the complete label when the mouse is hovered on the shortened labels.
rotatexAxisLabels	Boolean	0/1	This attribute lets you set whether the data labels would show up as rotated labels on the chart.
slantxAxisLabels	Boolean	0/1	If you have opted to show rotated labels on chart, this attribute lets you set the configuration whether the labels would show as slanted labels or fully vertical ones.
xAxislabelStep	Number	1 or above	By default, all the labels are displayed on the chart. However, if you have a set of streaming data (like name of months or days of week), you can opt to show every n-th label for better clarity. This attribute just lets you do so. It allows to display every n(th) x-axis label.
yAxislabelStep	Number	1 or above	By default, all the labels are displayed on the y axis of the chart. However, if you have a set of streaming data (like name of months or days of week), you can opt to show every n-th label for better clarity. This attribute just lets you do so. It allows to display every n(th) x-axis label.
showYaxisLabels	Boolean	0/1	This attribute is used to show or hide y axis or the row labels.
showXaxisLabels	Boolean	0/1	This attribute is used to show or hide the x axis or the column labels.
staggerxAxisLines	Number	2 or above	If you have opted for STAGGER mode as labelDisplay, using this attribute you can control how many lines to stagger the label to. By default, all labels are displayed in a single line.
showValues	Boolean	0/1	Sets the configuration whether data values would be displayed along with the data plot on chart.
rotateValues	Boolean	0/1	If you have opted to show data values, you can rotate them using this attribute.
showLimits	Boolean	0/1	Whether to show chart limit values.
showDivLineValues	Boolean	0/1	Whether to show div line values.
showShadow	Boolean	0/1	Whether to show shadows for dataplot.
rotateYAxisName	Boolean	0/1	If you do not wish to rotate y-axis name, set this as 0. It specifically comes to use when you have special characters (UTF8) in your y-axis name that do not show up in rotated mode.
yAxisNameWidth	Number	(In Pixels)	If you opt to not rotate y-axis name, you can choose a maximum width that will be applied to y-axis name.
clickURL	String		The entire chart can now act as a hotspot. Use this Url to define the hotspot link for the chart. The link can be specified in FusionCharts Link Format.
defaultAnimation	Boolean	0/1	By default, each chart animates some of its elements. If you wish to switch off the default animation patterns, you can set this attribute to 0. It can be particularly useful when you want to define your own animation patterns using Styles feature.
interactiveAnimationDuration	Number		Sets the duration of the animation that takes place when the legends are used to show or hide dataplots.
mapByCategory	Boolean	0/1	Allows you to render a category based heat map chart.
showHoverEffect	Boolean	0/1	Sets a style effect on the dataplots when the mouse is hovered on the dataplots. By default, it shows a bevel effect.
plotFillAlpha	Numeric	0-100	Sets the transparency of all the dataplots in the chart.
unescapeLinks	Boolean	0/1	Internally the chart decodes a Url that you set as link. Before invoking the link it again encodes the Url. If you are passing multilingual characters via a Url or do not want this decode-encode mechanism to be handled by chart you can set,unescapeLinks='0'.
showPrintMenuItem	Boolean	0/1	When you right click on the chart it shows a context menu. This attribute allows you to show or hide the "Print" option in the context menu.
centerYaxisName Since v 3.2.1	Boolean	0/1	This attribute when set to '1', allows you to align the y-axis name with respect to the height of the chart. When set to '0', the y-axis name is aligned with respect to the height of the canvas.
xAxisLabelsOnTop Since v 3.3.3	Boolean	0/1	This attribute when set to '1', allows you to display the x-axis labels on top of the chart canvas.
Back to top

Attribute Name	Type	Description
caption	String	Caption of the chart.
subCaption	String	Sub-caption of the chart.
xAxisName	String	x-axis title of the chart.
yAxisName	String	y-axis title of the chart.
Back to top

Attribute Name	Type	Range	Description
showBorder	Boolean	0/1	Whether to show a border around the chart or not.
borderColor	Color		Border color of the chart.
borderThickness	Number	In Pixels	Border thickness of the chart.
borderAlpha	Number	0-100	Border alpha of the chart.
bgColor	Color		This attribute sets the background color for the chart. You can set any hex color code as the value of this attribute. To specify a gradient as background color, separate the hex color codes of each color in the gradient using comma. Example: FF5904,FFFFFF. Remember to remove # and any spaces in between. See Advanced Charting > Using Gradients for more details.
bgAlpha	Number	0-100	Sets the alpha (transparency) for the background. If you have opted for gradient background, you need to set a list of alpha(s) separated by comma. See Advanced Charting > Using Gradients for more details.
bgRatio	Number	0-100	If you have opted for a gradient background, this attribute lets you set the ratio of each color constituent. See Advanced Charting > Using Gradients for more details.
bgAngle	Number	0-360	Angle of the background color, in case of a gradient. See Advanced Charting > Using Gradients for more details.
bgImage Since v3.2.1 or bgSWF - deprecated	String		To place any image (JPG/PNG/GIF) or Flash movie (SWF) as background of the chart, enter the (path and) name of the background image or SWF file. It should be in the same domain as the chart. Loading of Flash movie is deprecated and is not supported by JavaScript charts.
bgImageAlpha Since v3.2.1 or bgSWFAlpha - deprecated	Number	0-100	Helps you specify the opacity for the loaded background image or Flash movie. Loading of Flash movie is deprecated and is not supported by JavaScript charts.
bgImageDisplayMode Since v3.2.1	String	stretch, tile, fit, fill, center, none	Helps you specify the mode in which the background image is to be displayed. Stretch - disproportionately sets the full image on the chart area Tile - the image is repeated as a pattern on the entire chart area Fit - fits the image proportionately on the chart area Fill -proportionately fills the entire chart area with the image Center - the image is positioned at the center of the chart area None - Default mode. None of the above modes are applied For more details click here.
bgImageValign Since v3.2.1	String	left, center, right	Helps you to vertically align the background image.
bgImageHalign Since v3.2.1	String	left, center, right	Helps you to horizontally align the background image.
bgImageScale Since v3.2.1	Number	0-300	Helps you magnify the background image.This attribute will only work when the attribute bgImageDisplayMode is set to none, center or tile.
canvasBgColor	Color		Sets canvas background color. For Gradient effect, enter colors separated by comma.
canvasBgAlpha	Number		Sets alpha for canvas background. For gradient, enter alpha list separated by commas.
canvasBgRatio	Number	0-100	Helps you specify canvas background ratio for gradients.
canvasBgAngle	Number		Helps you specify canvas background angle in case of gradient.
canvasBorderColor	Color		Lets you specify canvas border color.
canvasBorderThickness	Number	0-5	Lets you specify canvas border thickness.
canvasBorderAlpha	Number	0-100	Lets you control transparency of canvas border.
showVLineLabelBorder	Boolean	0/1	If you have opted to show a label for any of your vLines in the chart, you can collectively configure whether to show border for all such labels using this attribute. If you want to show label border for just a particular vLine, you can over-ride this value by specifying border configuration for that specific vLine.
logoURL	String	Url	You can load an external logo (JPEG/PNG/SWF) on the chart once it has rendered. This attribute lets you specify the Url of the same. Owing to Flash Player security settings, you can only specify logo that are on the sub-domain as the SWF file of the chart.
logoPosition	String	TL, TR, BL, BR, CC	Where to position the logo on the chart: TL - Top-left TR - Top-right BR - Bottom right BL - Bottom left CC - Center of screen
logoAlpha	Number	0-100	Once the logo has loaded on the chart, you can configure its opacity using this attribute.
logoScale	Number	0-300	You can also change the scale of externally loaded logo at run-time by specifying a value for this parameter.
logoLink	String	Url	If you want to link the logo to an external URL, specify the link in this attribute. The link can be in FusionCharts Link Format, allowing you to link to new windows, pop-ups, frames etc.
Back to top

Attributes of <row> element
Attribute Name	Type	Range	Description
Id	Number/String		Allows you to specify a unique Id for the rows. This id is used in the <set> element to place the data values in the pre-defined position.
Label	String		Allows you to specify a label for the rows. If you do not specify the label the unique id will be displayed as the label for the rows in the chart.
showLabel	String		Allows you to show or hide the label of a particular row.
Back to top

Attributes of <column> element
Attribute Name	Type	Range	Description
Id	Number/String		Allows you to specify a unique Id for the columns. This id is used in the <set> element to place the data values in the pre-defined position.
Label	String		Allows you to specify a label for the columns. If you do not specify the label the unique id will be displayed as the label for the rows in the chart.
showLabel	String		Allows you to show or hide the label of a particular column.
Back to top

Attributes of <set> element
Attribute Name	Type	Range	Description
rowId	String		Specifies the position of the row where the data it is to be placed in the chart. If the <rows> element is used then it is mandatory to use the same id which is defined in the <row> element by the Id attribute.
ColumnId	String		Specifies the position of the column where the data it is to be placed in the chart. If the <columns> element is used then it is mandatory to use the same id which is defined in the <column> element by the Id attribute.
colorRangeLabel	String		This attribute is used to provide the color-range label which is defined in the <color> element of <colorRange> element. It is used only in category based heat map chart.
value	Number		This attribute allows you to display a value at the center of a data plot.
displayValue	Number/String		Allows you to display any numeric value or string at the center of the dataplot. The settings of this attribute overwrites the settings of the value attribute when both are used at the same time.
tlLabel	Number/String		This attribute allows you to display a label on the top-left corner of a data plot.
trLabel	Number/String		This attribute allows you to display a label on the top-right corner of a data plot.
blLabel	Number/String		This attribute allows you to display a label on the bottom-left corner of a data plot.
brLabel	Number/String		This attribute allows you to display a label on the bottom-left corner of a data plot.
color	Color	Hex Code	In Heat map chart, if you wish to highlight a particular cell, you can specify it's color at "set" level using this attribute. This attribute accepts hex color codes without #.
link	String		You can define links for individual data items. That enables the end user to click on data items (columns, lines, bars etc.) and drill down to other pages. To define the link for data items, use the link attribute. You can define links that open in same window, new window, pop-up window or frames. Please see "Drill Down Charts > FusionCharts Link format" for more information. Also, you need to Url Encode all the special characters (like ? and &) present in the link.
toolText	String		By default, Heat map chart shows the value or display value as tool tip text for that data item. It also includes all the values provided through trLabel, tlLabel, brlabel and bllabel attributes along with the values of trType, tlType, brType and blType attributes. Click here to see how a default tool tip looks like when all the above attributes are provided. But, if you want to display more information or if you want to provide customized information for the data item as tool tip, you can use this attribute to specify the same.
showValue	Boolean	0/1	You can individually opt to show or hide values of individual data items using this attribute. This value over-rides the data-set level value.
alpha	Number	0-100	For Multi-series charts, you can define the alpha of data-sets at dataset level. However, if you wish to highlight a particular data element, you can specify its alpha at "set" level using this attribute.
Back to top