JavaScript Equalizer ChartMonitor Data Usage

VIEW MORE EQUALIZER CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
An equalizer chart displays vertical bars that look like music equalizer (same size of bars and spaces are repeatedly displayed). To create an equalizer chart using KoolChart's JavaScript charting library, the <Equalizer2DChart> and <Equalizer2DSeries> elements must be set in Layout. The yField attribute on the <Equalizer2DSeries> element must be set to the field name where the data value exists, as the size of the data is displayed on the vertical axis (Y-axis).
<Equalizer2DSeries yField="value" >

var chartData = [
{"branch":"Atlanta","value":31.06},
{"branch":"Los Angeles","value":31.06},
{"branch":"Seattle","value":31.06},
{"branch":"Chicago","value":10.19},
{"branch":"New Jersey","value":20.14},
{"branch":"San Jose","value":32.04},
{"branch":"Phoenix","value":61.8}
];
In this JavaScript chart example, one <Equalizer2DSeries> element is set, and the htmlJsFunction attribute is set to a JavaScript function name (userFunction) in order to display an alarm when the Y-axis value is over 70.
<Equalizer2DChart showDataTips="true" columnWidthRatio="0.46">
...
<series>
<Equalizer2DSeries yField="value" htmlJsFunction="userFunction">
...
</Equalizer2DSeries>
</series>
...
</Equalizer2DChart>


<style type="text/css">
.data_overflow {
color:#fff;
width:83px;
height:83px;
font-size:11px;
font-weight:bold;
text-align:center;
padding-top:34px;
background:url(https://www.koolchart.com/demo/KoolChart/Assets/Images/overflow.png) no-repeat;
background-position:center;
background-size:100% 100%;
box-sizing:border-box;
}
</style>

function userFunction(id, index, data, values) {
var value = values[1];

if (value > 70) {
return {
content : "OVERFLOW",
className : "data_overflow"
};
}
return;
}