Next
Update
Prev
Default

A matrix chart shows relationships between two or more variables in a data set in grid format. The matrix chart is formed through at least two variables, for the X- and Y-categories. If there is a third or fourth variable, colour or other another dimension can be added to the matrix to represent it.

The <Matrix2DChart> element tag is used to create a matrix chart in KoolChart, and the series element tag for the matrix chart is <Matrix2DSeries>.

This sample chart is to show how to create a "fill" type matrix chart.

...
<Matrix2DChart type="fill" ... >
  ...
  <series>
    <Matrix2DSeries xField="Data_x" yField="Data_y" zField="Data" ... />
  </series>
  ...
</Matrix2DChart>
...
function fillJsFunc(seriesId, index, param, values) {
  if(values[2] < 10)					
    return "#fae3d5";
  else if(values[2] >= 10 && values[2] < 20)
    return "#f0ba96";
  else if(values[2] >= 20)
    return "#ee7d33";
}

function labelJsFunc(seriesId, index, data, values) {
  return values[2] + " students";
}

<Matrix2DChart>

type The type attribute determines the drawing or fill type of the cell in the grid. The valid values are "renderer", "fill", "image" and "plot".

<Matrix2DSeries>

xField The xField attribute determines the field name of the horizontal axis ( horizontalAxis ).
yField The yField attribute determines the field name of the vertical axis ( verticalAxis ).
zField The zField attribute determines the field name of the data represented in the cell of the grid.

© 2017 KoolChart. All rights reserved.