Dynamic Matrix Chart Plugin With jQuery - matrixChart.js

matrixChart.js is a jQuery plugin that helps you generate a dynamic, customizable matrix chart to visualize the relationships between two or more items in grid format.

How to use it:

1. Load the stylesheet chart.css and JavaScript jquery.matrixchart.js in the html document.

<link rel="stylesheet" href="css/chart.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.matrixchart.js"></script>

2. Create a container to place the generated matrix chart.

<div id="chart">
  
</div>

3. Initialize the plugin on the container element and specify an array of matrix data as follows:

$("#chart").matrixchart({
  matrixDatas : [
    {
        "EmpId": 1,
        "name": "Employee 1",
        "image": "1.jpg",
        "pocketAxisValue":{"x": 1, "y": 2}
    },
    {
        "EmpId": 2,
        "name": "Employee 2",
        "image": "2.jpg",
        "pocketAxisValue":{"x": 3, "y": 4}
    },
    {
        "EmpId": 3,
        "name": "Employee 3",
        "image": "3.jpg",
        "pocketAxisValue":{"x": 5, "y": 6}
    }
    ...
  ]
});

4. There are a few options which can be used to customize the matrix chart as per your needs.

$("#chart").matrixchart({
  height: 500,
  width: 500,
  noOfxLevels:5,
  noOfyLevels:5,
  xlabels: ['X1', 'X2', 'X3', 'X4', 'X5'],
  ylabels: ['Y1', 'Y2', 'Y3', 'Y4', 'Y5'],
  xAxisName:"X",
  yAxisName:"Y",
  HSBhStart: 0,
  HSBhEnd: 161,
  valuepocketHeight:48,
  valuepocketwidth:96,
  xAxisIcon:"l",
  yAxisIcon:"j",
});

---

This awesome jQuery plugin is developed by mansubarna. For more Advanced Usages, please check the demo page or visit the official website.