Configuring the Five Summary Numbers

The 'five-number summary' principle is used to plot data on the box and whisker charts. This principle helps to provide a statistical summary for a given set of numbers. It gives information about the range (minimum and maximum numbers), the center (median), and the spread (upper and lower quartiles) for the set of values provided.

FusionCharts Suite XT allows you to customize the five summary numbers and their deviations plotted on a box and a whisker chart according to your requirement.

In this section, you will be shown how you can:

  • Show/hide the five summary numbers

  • Customize the median

  • Customize the upper and lower quartiles (Q1 and Q3)

  • Customizing the minimum and maximum numbers (lower and upper whiskers)

Showing/Hiding the Five Summary Numbers

A box and whisker chart with three of the five summary numbers - the minimum and maximum numbers and the median - shown looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to show/hide the five summary numbers:

Attribute Name Description
showValues It is used to specify whether the five summary numbers will be shown on the box and whisker chart. Setting this attribute to 0 will hide them, setting it to 1 (default) will show them.
showMinValues It is used to specify whether the minimum value (or the lower limit) for each data plot will be shown. Setting this attribute to 0 will hide the minimum values, setting it to 1 (default) will show them. This attribute will work only when "showValues”: "1”.
showMaxValues It is used to specify whether the maximum value (or the upper limit) for each data plot will be shown. Setting this attribute to 0 will hide the maximum values, setting it to 1 (default) will show them. This attribute will work only when ”showValues”: “1”.
showMedianValue It is used to specify whether the median value will be shown. Setting this attribute to 0 will hide the median value, setting it to 1 (default) will show it. This attribute will work only when ”showValues”: “1”.
showQ1Values It is used to specify whether the lower quartile value will be shown or hidden. Setting this attribute to 1 will show the value, setting it to 0 (default) will hide it. This attribute will work only when ”showValues”: “1”.
showQ3Values It is used to specify whether the upper quartile value will be shown or hidden. Setting this attribute to 1 will show the value, setting it to 0 (default) will hide it. This attribute will work only when ”showValues”: “1”.

The data structure needed to render the above chart is given below:

...

To selectively show the summary numbers on the chart. To do this, you will need to set the showValues attribute to 1, set the required attributes to the value (0 or 1) that will show them, set the remaining attributes to the value (0 or 1) that will hide them. For example, if you want to show only the minimum values, use the code snippet shown below:

{
    "chart": {
        "caption": "Visits to a Website",
        "subcaption": "In three years",
        "showQ1Values": "0",
        "showQ3Values": "0",
        "showMedianValues": "0",
        "showMinValues": "1",
        "showMaxValues": "1"
    }
}

You can also configure the box and whisker chart to show all five summary numbers at once. To do this you can use the code snippet shown below:

{
    "chart": {
        "caption": "Visits to a Website",
        "subcaption": "In three years",
        "showQ1values": "1",
        "showQ3values": "1",
        "showMedianValues": "1",
        "showMinValues": "1",
        "showMaxValues": "1"
    }
}

Customizing the Median (Q2)

The median for a set of numbers is represented by a line at the center of the box plot. The median acts as the separator between the upper and lower quartile boxes.

Given below is a brief description of the attributes used to customize the median:

Attribute Name Description
medianColor It is used to specify the hex code of the color that will be used to render the median line.
medianThickness It is used to specify the thickness of the median line.
medianAlpha It is used to specify the transparency of the median line. This attribute takes values between 0 (transparent) and 100 (opaque).

All these attributes can be used with the chart, dataset, and the data objects, depending on the requirement.

Customizing the Upper and Lower Quartiles (Q1 and Q3)

The quartiles of a set of data are spread as two boxes, separated by the median. The roof of the upper quartile box represents the exact value of the upper quartile (Q3) . The base of the lower quartile box represents the exact value of the lower quartile (Q1).

Given below is a brief description of the attributes used to customize the quartile points and the boxes.

Attribute Name Description
upperQuartileColor It is used to specify the hex code of the color that will be used to render the line that represents the exact value of the upper quartile. This line is the roof of the upper quartile box.
upperQuartileThickness It is used to specify the thickness of the upper quartile line.
upperQuartileAlpha It is used to specify the transparency of the upper quartile line. This attribute takes values between 0 (transparent) and 100 (opaque).
lowerQuartileColor It is used to specify the hex code of the color that will be used to render the line that represents the exact value of the lower quartile. This line is the roof of the lower quartile box.
lowerQuartileThickness It is used to specify the thickness of the lower quartile line.
lowerQuartileAlpha It is used to specify the transparency of the lower quartile line. This attribute takes values between 0 (transparent) and 100 (opaque).
upperBoxColor It is used to specify the hex code of the color that will be used to render the upper quartile box.
upperBoxAlpha It is used to specify the transparency of the upper quartile box. This attribute takes values between 0 (transparent) and 100 (opaque).
lowerBoxColor It is used to specify the hex code of the color that will be used to render the lower quartile box.
lowerBoxAlpha It is used to specify the transparency of the lower quartile box. This attribute takes values between 0 (transparent) and 100 (opaque).
upperBoxBorderColor It is used to specify the hex code of the color that will be used to render the two sides of the upper quartile box.
upperBoxBorderAlpha It is used to set the transparency of the two sides of the upper quartile box. This attribute takes values between 0 (transparent) and 100 (opaque).
upperBoxBorderThickness It is used to specify the thickness of the two sides of the upper quartile box.
lowerBoxBorderColor It is used to specify the hex code of the color that will be used to render the two sides of the lower quartile box.
lowerBoxBorderAlpha It is used to set the transparency of the two sides of the lower quartile box. This attribute takes values between 0 (transparent) and 100 (opaque).
lowerBoxBorderThickness It is used to specify the thickness of the two sides of the lower quartile box.

Customizing the Minimum and Maximum Numbers (Lower and Upper Whiskers)

The chart displays the biggest number of a set of values as the upper whisker and the smallest number of the set as the lower whisker.

Given below is a brief description of the attributes used to customize the whiskers:

Attribute Name Description
upperWhiskerColor It is used to specify the hex code of the color that will be used to render the upper whisker of the data plot.
upperWhiskerThickness It is used to specify the thickness of the upper whisker of the data plot.
upperWhiskerAlpha It is used to specify the transparency of the upper whisker of the data plot. This attribute takes values between 0 (transparent) and 100 (opaque).
lowerWhiskerColor It is used to specify the hex code of the color that will be used to render the lower whisker of the data plot.
lowerWhiskerThickness It is used to specify the thickness of the lower whisker of the data plot.
lowerWhiskerAlpha It is used to specify the transparency of the lower whisker of the data plot. This attribute takes values between 0 (transparent) and 100 (opaque).
whiskersLimitsWidthRatio It is used to specify the width of the whiskers in percentage with respect to the width of the box plot.

There! You have now seen how you can customize how the five summary numbers are rendered on the box and whisker chart.