JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height:400px"></div>
JavaScript
$(function() {
// Before creating a pictograph, you need to specify how many grids along the
// inverted y-axis
// These control how pack between the images on both horizontal and vertical
// direction
var yGrids = 50;
var xGrids = 1;
/**
* @method This method is call to fill in the series array. The method should be
* called for each category and should be called before creating the chart.
* @param {object} config - general configuration how the icons should be laid out
* @param {object} name - the name display along with the icons on x-axis
* @param {object} dataArr - can be a single array of pictograph value or an array
* of arrays of pictograph values. A pictograph array is [ value, "url(./image.png)" ]
*
* @example This create a pictograph of 'Adam' showing continuous icons
* of 5 oranges and 3 apples:
*
* var series = [];
* var config = {
* max: 25, // max number of icons display in each row
* row: 0, // row index on x-axis
* // This build up the cateogries when building the pictograph
* xCategories: []
* };
*
* // Create the first group of icons
* series.concat(createPictoPoints(config, 'Adam',
* [ [ 5, 'url(./orange.png)' ], [ 3, 'url(./apple.png)' ] ]));
*/
var createPictoPoints = function(config, name, dataArray) {
var limit = config.max,
y = 0;
var row = config.row;
var seriesArray = [];
config.xCategories[row] = name;
var categoryArray = dataArray;
if (!$.isArray(dataArray[0]) && $.isNumeric(dataArray[0])) {
categoryArray = [dataArray];
}
for (var i = 0; i < categoryArray.length; i++) {
var value = categoryArray[i][0];
var icon = categoryArray[i][1];
var quit = false;
for (var x = 0; x < value;) {
var newRow = [];
...