Standard deviation

Standard deviation is the measure of the variation or the dispersion of a set of data from the mean. It gives an idea of how spread out is the set of data from the mean. The more spread apart the data, the higher the deviation. To display the standard deviation, set showSD='1'. By default, the standard deviation is represented by a triangle icon in the dataplot.

This attribute can be used in all the three elements (<chart>, <dataset> and <set>).

A chart displaying the standard deviation is shown below:

In the above screenshot, the chart is displaying the standard deviation icons of each and every data plot. This icon is customizable about which we will discuss later.

The setting for the above chart is given below:

 
<chart caption='Visits to a Website' subCaption='In three years' showSD='1' SDIconSides='5' showValues='0'>
...
</chart>
{
  "chart":{
    "caption":"Visits to a Website",
    "subcaption":"In three years",
    "showsd":"1",
    "sdiconsides":"5",
    "showvalues":"0"
  }
  ...
}

In the above data, the showSD attribute is set to '1' in the <chart> element. So, all the data plots are displaying the standard deviation icon. The attribute SDIconSides is set to '5' to display the icon as a pentagon.

Show or hide individual standard deviation values

You may want to display the standard deviation icon of one dataset and hide the other. To do this, use the showSD attribute in the <dataset> element. A sample data is given below:

 
<chart caption='Visits to a Website' subCaption='In three years' showValues='0' SDIconSides='5'>
...
<dataset seriesName="January" lowerBoxColor='009FAA' upperboxColor='D4DFFF' mediancolor='FF0000' showSD='1'>
    <set value='60,133,35,67,89,137,259'/>
    <set value='139,67,75,114,39,67,191' />
    <set value='200,107,197,239,53,26,97' />
</dataset>

<dataset seriesName="February" lowerBoxColor='2A5F55' upperboxColor='D47F00'>
    <set value='160,303,125,137,169,107,39' />
    <set value='139,167,255,124,59,187,151' />
    <set value='60,137,157,209,153,126,277' />
</dataset>
</chart>

{
  "chart":{
    "caption":"Visits to a Website",
    "subcaption":"In three years",
    "showvalues":"0",
    "sdiconsides":"5"
  },
  ...
  "dataset":[{
      "seriesname":"January",
      "lowerboxcolor":"009FAA",
      "upperboxcolor":"D4DFFF",
      "mediancolor":"FF0000",
      "showsd":"1",
      "data":[{
          "value":"60,133,35,67,89,137,259"
        },
        {
          "value":"139,67,75,114,39,67,191"
        },
        {
          "value":"200,107,197,239,53,26,97"
        }
      ]
    },
    {
      "seriesname":"February",
      "lowerboxcolor":"2A5F55",
      "upperboxcolor":"D47F00",
      "data":[{
          "value":"160,303,125,137,169,107,39"
        },
        {
          "value":"139,167,255,124,59,187,151"
        },
        {
          "value":"60,137,157,209,153,126,277"
        }
      ]
    }
  ]
}

In the above XML, we have used the showSD attribute in only one of the <dataset>element. So, the chart will display the standard deviation icon for the dataplots declared in that <dataset> element. For rest of the dataplots the icon will not be displayed. The chart will look like as under:

You can also display the standard deviation icon selectively for any one set of data declared through the <set> elements. The sample data is given below:

<chart caption='Visits to a Website' subCaption='In three years' showValues='0' SDIconSides='5'>
...
<dataset seriesName="January" lowerBoxColor='2A5F55' upperboxColor='D47F00' mediancolor='FF0000' >
    <set value='60,133,35,67,89,137,259' showSD='1'/> 
    <set value='139,67,75,114,39,67,191' />
    <set value='200,107,197,239,53,26,97' showSD='1'/>
</dataset>
</chart>

{
  "chart":{
    "caption":"Visits to a Website",
    "subcaption":"In three years",
    "showvalues":"0",
    "sdiconsides":"5"
  },
  ...
  "dataset":[{
      "seriesname":"January",
      "lowerboxcolor":"2A5F55",
      "upperboxcolor":"D47F00",
      "mediancolor":"FF0000",
      "data":[{
          "value":"60,133,35,67,89,137,259",
          "showsd":"1"
        },
        {
          "value":"139,67,75,114,39,67,191"
        },
        {
          "value":"200,107,197,239,53,26,97",
          "showsd":"1"
        }
      ]
    }
  ]
}

In the above XML, we have set the showSD attribute to '1' in the first and third <set> elements within the <dataset> element. So, the chart will display the standard deviation icon only for the first and the third dataplot. The chart will look like as under:

The attributes used to customize the standard deviation icon are given below:
Attribute Name Type Range Description
SDIconShape String   Specifies the shape of the icon. There are two options - polygon and spoke.
SDIconRadius Number   Specifies the radius of the standard deviation icon.
SDIconSides Number   Specifies the number of sides for the icon. If the SDIconShape is set as polygon, then the shape of the icon will depend on the number of sides. For example, 3 sides will display a triangle, 8 will display a circle.
SDIconColor Hex code   Sets the color of the standard deviation icon.
SDIconAlpha Number 0-100 Sets the transparency of the standard deviation icon.
 
Standard deviation Connectors

For multiple dataplots, you can draw a line to connect the standard deviation icons of each dataplot. The attribute drawSDConnector is set to '1' to connect all the icons of the dataplots. This attribute can be used in <chart> and <dataset> elements. The color of the connecting line will be same as the color of the standard deviation icon.

A chart with standard deviation connectors will look like as under:

Connect Null data

If you set the showSD attribute in any of the <set> element to '0', the chart will not display the standard deviation icon of that particular set of data. In this case, the missing standard deviation is considered as null data. Consequently, the standard deviation connectors will skip this null data.

An example of this situation is shown below:

<chart caption='Visits to a Website' subCaption='In three years' drawSDConnector='1' SDIconSides='5'>
...
<dataset seriesName="January" lowerBoxColor='2A5F55' upperboxColor='D47F00' mediancolor='FF0000'>
    <set value='60,133,35,67,89,137,259' showSD='1'/>
    <set value='139,67,75,114,39,67,191' showSD='1'/>
    <set value='200,107,197,239,53,26,97' showSD='0'/>
    <set value='210,117,187,219,73,96,171' showSD='1'/> 
    <set value='230,107,157,259,93,116,191' showSD='1'/>
</dataset>
</chart>
{
  "chart":{
    "caption":"Visits to a Website",
    "subcaption":"In three years",
    "drawsdconnector":"1",
    "sdiconsides":"5"
  },
  ...
  "dataset":[{
      "seriesname":"January",
      "lowerboxcolor":"2A5F55",
      "upperboxcolor":"D47F00",
      "mediancolor":"FF0000",
      "data":[{
          "value":"60,133,35,67,89,137,259",
          "showsd":"1"
        },
        {
          "value":"139,67,75,114,39,67,191",
          "showsd":"1"
        },
        {
          "value":"200,107,197,239,53,26,97",
          "showsd":"0"
        },
        {
          "value":"210,117,187,219,73,96,171",
          "showsd":"1"
        },
        {
          "value":"230,107,157,259,93,116,191",
          "showsd":"1"
        }
      ]
    }
  ]
}

In the above XML:

  • The showSD attribute is set to '0' in the third <set> element to hide the standard deviation icon
  • The drawSDConnector is set to '1' to connect the icons

The standard deviation connector in the above chart is drawn as a discontinuous line.

You can opt to ignore the null data and draw a continuous connector. To achieve this, set connectNullData attribute to '1'. In our above example, the chart will draw the line connecting the Standard Deviation icons of the first, second and the fourth, fifth dataplots skipping the third dataplot. This attribute can only be used in the <chart> element.

The chart will look like as under: