JavaScript Matrix Chart

VIEW MORE MATRIX CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
A matrix chart shows relationships between two or more variables in a data set in grid format. To create a matrix chart using KoolChart's JavaScript charting library, the <Matrix2DChart> and <Matrix2DSeries> elements must be set in Layout.

In this JavaScript chart example, three <Matrix2DSeries> elements (Below Target, Target, Exceeded Target) are defined within a <Matrix2DChart> element.
<Matrix2DSeries xField="Data1_x" yField="Data1_y" zField="Data1" displayName="City A" ... />
<Matrix2DSeries xField="Data2_x" yField="Data2_y" zField="Data2" displayName="City B" ... />
<Matrix2DSeries xField="Data3_x" yField="Data3_y" zField="Data3" displayName="City C" ... />

var chartData = [
{"Data1_x":1.5,"Data1_y":2.5,"Data1":4,"Data2_x":1.5,"Data2_y":3.5,"Data2":5,"Data3_x":1.5,"Data3_y":4.5,"Data3":6},
{"Data1_x":2.5,"Data1_y":4.5,"Data1":2,"Data2_x":2.5,"Data2_y":1.5,"Data2":6,"Data3_x":2.5,"Data3_y":0.5,"Data3":6},
...
...
...
];