<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"type": "heatmap",
"title": {
"text": "Heat Map Scrolling",
"adjust-layout": true
},
"scale-x": {
"zooming": true,
"zoom-to": [0, 30]
},
"scroll-x": {
"bar": {
"background-color": "#ffe6e6 #ff6666",
"border-left": "1px solid red",
"border-right": "1px solid red",
"border-top": "1px solid red",
"border-bottom": "1px solid red",
//"height":"10%"
},
"handle": {
"background-color": "red",
"border-radius": "5px",
}
},
"scale-y": {
"zooming": true,
"zoom-to": [0, 5]
},
"scroll-y": {
"bar": {
"background-color": "#ffe6e6 #ff6666",
"border-left": "1px solid red",
"border-right": "1px solid red",
"border-top": "1px solid red",
"border-bottom": "1px solid red",
//"width":"3%"
},
"handle": {
"background-color": "red",
"border-radius": "5px",
}
},
"plotarea": {
"adjust-layout": true
},
"plot": {
"aspect": "brightness"
},
"series": [{
"values": [59, 15, 5, 30, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 49, 23, 14, 51, 46, 21, 63, 24, 12, 42, 31, 33, 25, 12, 15, 23, 45, 12, 37, 31, 35, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21, 15, 59, 60, 61, 15, 79, 11, 21, 6, 19, 3, 28, 17, 34, 5, 20, 13, 15, 16, 31, 90, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60]
},
{
"values": [34, 32, 87, 65, 9, 17, 40, 12, 17, 22, 13, 42, 46, 27, 42, 33, 17, 63, 47, 42, 51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 41, 23, 32, 31, 17, 90, 19, 50, 39, 12, 49, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31, 12, 23, 26, 35, 54, 34, 35, 36, 37, 38, 23, 18, 48, 54, 52, 56, 60, 70, 43, 62, 71, 42, 46, 27, 42, 33, 17, 63, 47, 42, 51, 71, 23, 51, 29, 20, 43, 50, 12, 15, 35]
},
{
"values": [90, 19, 50, 39, 12, 49, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31, 12, 23, 26, 35, 54, 34, 35, 36, 37, 38, 23, 18, 48, 54, 52, 56, 60, 70, 43, 62, 59, 15, 5, 30, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 49, 23, 14, 51, 46, 21, 63, 24, 12, 42, 31, 33, 25, 12, 15, 35, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 49, 17, 34, 5, 20, 13, 62, 59, 15]
},
{
"values": [23, 45, 12, 37, 31, 35, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21, 15, 59, 60, 61, 15, 79, 11, 21, 6, 19, 3, 28, 17, 34, 5, 20, 13, 15, 16, 31, 34, 32, 87, 65, 9, 17, 40, 12, 17, 22, 13, 42, 46, 27, 42, 33, 17, 63, 47, 42, 51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 41, 23, 32, 31, 35, 31, 51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 87, 65, 9, 17, 40, ]
},
{
"values": [59, 15, 5, 30, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 49, 23, 14, 51, 46, 21, 63, 24, 12, 42, 31, 33, 25, 12, 15, 23, 45, 12, 37, 31, 35, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21, 15, 59, 60, 61, 15, 79, 11, 21, 6, 19, 3, 28, 17, 34, 5, 20, 13, 15, 16, 31, 90, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 25, 12, 15, 23, 45, 12, 37, 20, 15]
},
{
"values": [34, 32, 87, 65, 9, 17, 40, 12, 17, 22, 13, 42, 46, 27, 42, 33, 17, 63, 47, 42, 51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 41, 23, 32, 31, 17, 90, 19, 50, 39, 12, 49, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31, 12, 23, 26, 35, 54, 34, 35, 36, 37, 38, 23, 18, 48, 54, 52, 56, 60, 70, 43, 62, 71, 46, 27, 42, 33, 17, 63, 47, 42, 51, 59, 12, 15, 29, 31, 52, 52, 32, 41, 23, 15]
},
{
"values": [90, 19, 50, 39, 12, 49, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31, 12, 23, 26, 35, 54, 34, 35, 36, 37, 38, 23, 18, 48, 54, 52, 56, 60, 70, 43, 62, 59, 15, 5, 30, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 49, 23, 14, 51, 46, 21, 63, 24, 12, 42, 31, 33, 25, 12, 15, 35, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31, 43, 62, 71, 46, 27, 42]
},
{
"values": [23, 45, 12, 37, 31, 35, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21, 15, 59, 60, 61, 15, 79, 11, 21, 6, 19, 3, 28, 17, 34, 5, 20, 13, 15, 16, 31, 34, 32, 87, 65, 9, 17, 40, 12, 17, 22, 13, 42, 46, 27, 42, 33, 17, 63, 47, 42, 51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 41, 23, 32, 31, 35, 31, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21, 15, 59, 60, 3, 28, 17]
},
{
"values": [39, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 49, 23, 14, 51, 46, 21, 63, 24, 12, 42, 31, 33, 25, 12, 15, 23, 45, 12, 37, 31, 35, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21, 15, 59, 60, 61, 15, 79, 11, 21, 6, 19, 3, 59, 15, 5, 30, 60, 99, 28, 33, 34, 51, 12, 30, 15, 28, 17, 34, 5, 20, 13, 15, 16, 31, 90, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 50, 59, 60]
},
{
"values": [27, 42, 33, 17, 63, 47, 42, 51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 41, 23, 32, 31, 17, 90, 19, 50, 39, 12, 49, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31, 12, 23, 26, 35, 54, 34, 35, 36, 37, 38, 23, 18, 48, 54, 52, 56, 60, 70, 43, 62, 71, 42, 46, 27, 42, 33, 17, 63, 47, 42, 51, 71, 23, 51, 29, 20, 43, 34, 32, 87, 65, 9, 17, 40, 12, 17, 22, 13, 42, 46, 50, 12, 15, 35]
},
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
</script>
</body>
</html>
var myConfig = {
"type": "heatmap",
"title": {
"text": "Heat Map Scrolling",
"adjust-layout": true
},
"scale-x": {
"zooming": true,
"zoom-to": [0, 30]
},
"scroll-x": {
"bar": {
"background-color": "#ffe6e6 #ff6666",
"border-left": "1px solid red",
"border-right": "1px solid red",
"border-top": "1px solid red",
"border-bottom": "1px solid red",
//"height":"10%"
},
"handle": {
"background-color": "red",
"border-radius": "5px",
}
},
"scale-y": {
"zooming": true,
"zoom-to": [0, 5]
},
"scroll-y": {
"bar": {
"background-color": "#ffe6e6 #ff6666",
"border-left": "1px solid red",
"border-right": "1px solid red",
"border-top": "1px solid red",
"border-bottom": "1px solid red",
//"width":"3%"
},
"handle": {
"background-color": "red",
"border-radius": "5px",
}
},
"plotarea": {
"adjust-layout": true
},
"plot": {
"aspect": "brightness"
},
"series": [{
"values": [59, 15, 5, 30, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 49, 23, 14, 51, 46, 21, 63, 24, 12, 42, 31, 33, 25, 12, 15, 23, 45, 12, 37, 31, 35, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21, 15, 59, 60, 61, 15, 79, 11, 21, 6, 19, 3, 28, 17, 34, 5, 20, 13, 15, 16, 31, 90, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60]
},
{
"values": [34, 32, 87, 65, 9, 17, 40, 12, 17, 22, 13, 42, 46, 27, 42, 33, 17, 63, 47, 42, 51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 41, 23, 32, 31, 17, 90, 19, 50, 39, 12, 49, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31, 12, 23, 26, 35, 54, 34, 35, 36, 37, 38, 23, 18, 48, 54, 52, 56, 60, 70, 43, 62, 71, 42, 46, 27, 42, 33, 17, 63, 47, 42, 51, 71, 23, 51, 29, 20, 43, 50, 12, 15, 35]
},
{
"values": [90, 19, 50, 39, 12, 49, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31, 12, 23, 26, 35, 54, 34, 35, 36, 37, 38, 23, 18, 48, 54, 52, 56, 60, 70, 43, 62, 59, 15, 5, 30, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 49, 23, 14, 51, 46, 21, 63, 24, 12, 42, 31, 33, 25, 12, 15, 35, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 49, 17, 34, 5, 20, 13, 62, 59, 15]
},
{
"values": [23, 45, 12, 37, 31, 35, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21, 15, 59, 60, 61, 15, 79, 11, 21, 6, 19, 3, 28, 17, 34, 5, 20, 13, 15, 16, 31, 34, 32, 87, 65, 9, 17, 40, 12, 17, 22, 13, 42, 46, 27, 42, 33, 17, 63, 47, 42, 51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 41, 23, 32, 31, 35, 31, 51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 87, 65, 9, 17, 40, ]
},
{
"values": [59, 15, 5, 30, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 49, 23, 14, 51, 46, 21, 63, 24, 12, 42, 31, 33, 25, 12, 15, 23, 45, 12, 37, 31, 35, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21, 15, 59, 60, 61, 15, 79, 11, 21, 6, 19, 3, 28, 17, 34, 5, 20, 13, 15, 16, 31, 90, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 25, 12, 15, 23, 45, 12, 37, 20, 15]
},
{
"values": [34, 32, 87, 65, 9, 17, 40, 12, 17, 22, 13, 42, 46, 27, 42, 33, 17, 63, 47, 42, 51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 41, 23, 32, 31, 17, 90, 19, 50, 39, 12, 49, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31, 12, 23, 26, 35, 54, 34, 35, 36, 37, 38, 23, 18, 48, 54, 52, 56, 60, 70, 43, 62, 71, 46, 27, 42, 33, 17, 63, 47, 42, 51, 59, 12, 15, 29, 31, 52, 52, 32, 41, 23, 15]
},
{
"values": [90, 19, 50, 39, 12, 49, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31, 12, 23, 26, 35, 54, 34, 35, 36, 37, 38, 23, 18, 48, 54, 52, 56, 60, 70, 43, 62, 59, 15, 5, 30, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 49, 23, 14, 51, 46, 21, 63, 24, 12, 42, 31, 33, 25, 12, 15, 35, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31, 43, 62, 71, 46, 27, 42]
},
{
"values": [23, 45, 12, 37, 31, 35, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21, 15, 59, 60, 61, 15, 79, 11, 21, 6, 19, 3, 28, 17, 34, 5, 20, 13, 15, 16, 31, 34, 32, 87, 65, 9, 17, 40, 12, 17, 22, 13, 42, 46, 27, 42, 33, 17, 63, 47, 42, 51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 41, 23, 32, 31, 35, 31, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21, 15, 59, 60, 3, 28, 17]
},
{
"values": [39, 15, 71, 23, 51, 29, 20, 43, 50, 59, 60, 61, 49, 23, 14, 51, 46, 21, 63, 24, 12, 42, 31, 33, 25, 12, 15, 23, 45, 12, 37, 31, 35, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21, 15, 59, 60, 61, 15, 79, 11, 21, 6, 19, 3, 59, 15, 5, 30, 60, 99, 28, 33, 34, 51, 12, 30, 15, 28, 17, 34, 5, 20, 13, 15, 16, 31, 90, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 50, 59, 60]
},
{
"values": [27, 42, 33, 17, 63, 47, 42, 51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 41, 23, 32, 31, 17, 90, 19, 50, 39, 12, 49, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31, 12, 23, 26, 35, 54, 34, 35, 36, 37, 38, 23, 18, 48, 54, 52, 56, 60, 70, 43, 62, 71, 42, 46, 27, 42, 33, 17, 63, 47, 42, 51, 71, 23, 51, 29, 20, 43, 34, 32, 87, 65, 9, 17, 40, 12, 17, 22, 13, 42, 46, 50, 12, 15, 35]
},
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});