Tile Chart

HeatMap Matrix Chart

For Users and Developers:

Purpose:
This chart is used to map relation between two entities where the intersecting point between the variables on x and y axes can be denoted by a specific numerical value along with informative text. The numerical value should belong to some range (specific minimum and maximum). The value will be denoted by a color mapped to that particular value so that it’s easier to compare different values belonging to different ranges.

Example:
Suppose you have a list of assignment for a student. Once the student submits the assignment, it is reviewed by multiple reviewers. Each reviewer adds his/her own comments as review. After analyzing the comment of each reviewer for each submission, we get the tone of all the reviews (positive/negative/neutral). The tone is mapped from -1 to 1 with -1 denoting most critical negative review and 1 denoting the most positive review.

If you want to see all this information using a chart, then heatmap matrix chart can be very useful. You can specify your information in following json format.

If this flag is set to true, then the heatmap will show context text inside the boxes, else it will be available as a tooltip. Tooltip will also be available for long text irrespective of the value of this flag.

showCustomColorScheme

Set this flag to true if you want to provide only minimum and maximum color for the chart and let the chart service calculate in between colors for you. In this case, fill up all the values in the custom_color_scheme key. If this key is set to False, you will have to provide the color for each range of values.

tooltipColorScheme

This sets the background color for the tooltip box, available options are blue, red, aqua, black, leaf, purple, pink, orange. If not specified, default will be red.

custom_color_scheme

This specifies details about the custom color scheme as following:

minimum_value: This specifies the minimum value in your data (-1 in case of tone of reviews)

maximum_value: This specifies the maximum value in your data (+1 in case of tone of reviews)

minimum_color: Color corresponding to minimum_value

maximum_value: Color corresponding to maximum_value

total_intervals: The number of intervals you want to have between minimum and maximum values.

color_scheme

Array of ranges. Each range has its maximum and minimum value and color. If you have set custom_color_scheme as false, you will to pass all the ranges and their corresponding colors. Using color_scheme is recommended over custom color scheme to get greater control over the appearance of heatmap.

content

This is 2D Array consisting information about each box in the heatmap – which is an intersection of x and y values. Outer array contains rows and inner array contains columns for that particular row. Each element in the inner array has to be an object having text and value attributes, value being reflected in the color and text being shown as a tooltip and/or inside the boxes.