<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
#myChart-wrapper {
margin: auto;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE DATA
// -----------------------------
let flowers = {
traits: ['sepalLength', 'sepalWidth', 'petalLength', 'petalWidth'],
species: ['setosa', 'versicolor', 'virginica'],
values: [{
sepalLength: 5.1,
sepalWidth: 3.5,
petalLength: 1.4,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 4.9,
sepalWidth: 3.0,
petalLength: 1.4,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 4.7,
sepalWidth: 3.2,
petalLength: 1.3,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 4.6,
sepalWidth: 3.1,
petalLength: 1.5,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.0,
sepalWidth: 3.6,
petalLength: 1.4,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.4,
sepalWidth: 3.9,
petalLength: 1.7,
petalWidth: 0.4,
species: 'setosa'
},
{
sepalLength: 4.6,
sepalWidth: 3.4,
petalLength: 1.4,
petalWidth: 0.3,
species: 'setosa'
},
{
sepalLength: 5.0,
sepalWidth: 3.4,
petalLength: 1.5,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 4.4,
sepalWidth: 2.9,
petalLength: 1.4,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 4.9,
sepalWidth: 3.1,
petalLength: 1.5,
petalWidth: 0.1,
species: 'setosa'
},
{
sepalLength: 5.4,
sepalWidth: 3.7,
petalLength: 1.5,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 4.8,
sepalWidth: 3.4,
petalLength: 1.6,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 4.8,
sepalWidth: 3.0,
petalLength: 1.4,
petalWidth: 0.1,
species: 'setosa'
},
{
sepalLength: 4.3,
sepalWidth: 3.0,
petalLength: 1.1,
petalWidth: 0.1,
species: 'setosa'
},
{
sepalLength: 5.8,
sepalWidth: 4.0,
petalLength: 1.2,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.7,
sepalWidth: 4.4,
petalLength: 1.5,
petalWidth: 0.4,
species: 'setosa'
},
{
sepalLength: 5.4,
sepalWidth: 3.9,
petalLength: 1.3,
petalWidth: 0.4,
species: 'setosa'
},
{
sepalLength: 5.1,
sepalWidth: 3.5,
petalLength: 1.4,
petalWidth: 0.3,
species: 'setosa'
},
{
sepalLength: 5.7,
sepalWidth: 3.8,
petalLength: 1.7,
petalWidth: 0.3,
species: 'setosa'
},
{
sepalLength: 5.1,
sepalWidth: 3.8,
petalLength: 1.5,
petalWidth: 0.3,
species: 'setosa'
},
{
sepalLength: 5.4,
sepalWidth: 3.4,
petalLength: 1.7,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.1,
sepalWidth: 3.7,
petalLength: 1.5,
petalWidth: 0.4,
species: 'setosa'
},
{
sepalLength: 4.6,
sepalWidth: 3.6,
petalLength: 1.0,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.1,
sepalWidth: 3.3,
petalLength: 1.7,
petalWidth: 0.5,
species: 'setosa'
},
{
sepalLength: 4.8,
sepalWidth: 3.4,
petalLength: 1.9,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.0,
sepalWidth: 3.0,
petalLength: 1.6,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.0,
sepalWidth: 3.4,
petalLength: 1.6,
petalWidth: 0.4,
species: 'setosa'
},
{
sepalLength: 5.2,
sepalWidth: 3.5,
petalLength: 1.5,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.2,
sepalWidth: 3.4,
petalLength: 1.4,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 4.7,
sepalWidth: 3.2,
petalLength: 1.6,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 4.8,
sepalWidth: 3.1,
petalLength: 1.6,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.4,
sepalWidth: 3.4,
petalLength: 1.5,
petalWidth: 0.4,
species: 'setosa'
},
{
sepalLength: 5.2,
sepalWidth: 4.1,
petalLength: 1.5,
petalWidth: 0.1,
species: 'setosa'
},
{
sepalLength: 5.5,
sepalWidth: 4.2,
petalLength: 1.4,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 4.9,
sepalWidth: 3.1,
petalLength: 1.5,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.0,
sepalWidth: 3.2,
petalLength: 1.2,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.5,
sepalWidth: 3.5,
petalLength: 1.3,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 4.9,
sepalWidth: 3.6,
petalLength: 1.4,
petalWidth: 0.1,
species: 'setosa'
},
{
sepalLength: 4.4,
sepalWidth: 3.0,
petalLength: 1.3,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.1,
sepalWidth: 3.4,
petalLength: 1.5,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.0,
sepalWidth: 3.5,
petalLength: 1.3,
petalWidth: 0.3,
species: 'setosa'
},
{
sepalLength: 4.5,
sepalWidth: 2.3,
petalLength: 1.3,
petalWidth: 0.3,
species: 'setosa'
},
{
sepalLength: 4.4,
sepalWidth: 3.2,
petalLength: 1.3,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.0,
sepalWidth: 3.5,
petalLength: 1.6,
petalWidth: 0.6,
species: 'setosa'
},
{
sepalLength: 5.1,
sepalWidth: 3.8,
petalLength: 1.9,
petalWidth: 0.4,
species: 'setosa'
},
{
sepalLength: 4.8,
sepalWidth: 3.0,
petalLength: 1.4,
petalWidth: 0.3,
species: 'setosa'
},
{
sepalLength: 5.1,
sepalWidth: 3.8,
petalLength: 1.6,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 4.6,
sepalWidth: 3.2,
petalLength: 1.4,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.3,
sepalWidth: 3.7,
petalLength: 1.5,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 5.0,
sepalWidth: 3.3,
petalLength: 1.4,
petalWidth: 0.2,
species: 'setosa'
},
{
sepalLength: 7.0,
sepalWidth: 3.2,
petalLength: 4.7,
petalWidth: 1.4,
species: 'versicolor'
},
{
sepalLength: 6.4,
sepalWidth: 3.2,
petalLength: 4.5,
petalWidth: 1.5,
species: 'versicolor'
},
{
sepalLength: 6.9,
sepalWidth: 3.1,
petalLength: 4.9,
petalWidth: 1.5,
species: 'versicolor'
},
{
sepalLength: 5.5,
sepalWidth: 2.3,
petalLength: 4.0,
petalWidth: 1.3,
species: 'versicolor'
},
{
sepalLength: 6.5,
sepalWidth: 2.8,
petalLength: 4.6,
petalWidth: 1.5,
species: 'versicolor'
},
{
sepalLength: 5.7,
sepalWidth: 2.8,
petalLength: 4.5,
petalWidth: 1.3,
species: 'versicolor'
},
{
sepalLength: 6.3,
sepalWidth: 3.3,
petalLength: 4.7,
petalWidth: 1.6,
species: 'versicolor'
},
{
sepalLength: 4.9,
sepalWidth: 2.4,
petalLength: 3.3,
petalWidth: 1.0,
species: 'versicolor'
},
{
sepalLength: 6.6,
sepalWidth: 2.9,
petalLength: 4.6,
petalWidth: 1.3,
species: 'versicolor'
},
{
sepalLength: 5.2,
sepalWidth: 2.7,
petalLength: 3.9,
petalWidth: 1.4,
species: 'versicolor'
},
{
sepalLength: 5.0,
sepalWidth: 2.0,
petalLength: 3.5,
petalWidth: 1.0,
species: 'versicolor'
},
{
sepalLength: 5.9,
sepalWidth: 3.0,
petalLength: 4.2,
petalWidth: 1.5,
species: 'versicolor'
},
{
sepalLength: 6.0,
sepalWidth: 2.2,
petalLength: 4.0,
petalWidth: 1.0,
species: 'versicolor'
},
{
sepalLength: 6.1,
sepalWidth: 2.9,
petalLength: 4.7,
petalWidth: 1.4,
species: 'versicolor'
},
{
sepalLength: 5.6,
sepalWidth: 2.9,
petalLength: 3.6,
petalWidth: 1.3,
species: 'versicolor'
},
{
sepalLength: 6.7,
sepalWidth: 3.1,
petalLength: 4.4,
petalWidth: 1.4,
species: 'versicolor'
},
{
sepalLength: 5.6,
sepalWidth: 3.0,
petalLength: 4.5,
petalWidth: 1.5,
species: 'versicolor'
},
{
sepalLength: 5.8,
sepalWidth: 2.7,
petalLength: 4.1,
petalWidth: 1.0,
species: 'versicolor'
},
{
sepalLength: 6.2,
sepalWidth: 2.2,
petalLength: 4.5,
petalWidth: 1.5,
species: 'versicolor'
},
{
sepalLength: 5.6,
sepalWidth: 2.5,
petalLength: 3.9,
petalWidth: 1.1,
species: 'versicolor'
},
{
sepalLength: 5.9,
sepalWidth: 3.2,
petalLength: 4.8,
petalWidth: 1.8,
species: 'versicolor'
},
{
sepalLength: 6.1,
sepalWidth: 2.8,
petalLength: 4.0,
petalWidth: 1.3,
species: 'versicolor'
},
{
sepalLength: 6.3,
sepalWidth: 2.5,
petalLength: 4.9,
petalWidth: 1.5,
species: 'versicolor'
},
{
sepalLength: 6.1,
sepalWidth: 2.8,
petalLength: 4.7,
petalWidth: 1.2,
species: 'versicolor'
},
{
sepalLength: 6.4,
sepalWidth: 2.9,
petalLength: 4.3,
petalWidth: 1.3,
species: 'versicolor'
},
{
sepalLength: 6.6,
sepalWidth: 3.0,
petalLength: 4.4,
petalWidth: 1.4,
species: 'versicolor'
},
{
sepalLength: 6.8,
sepalWidth: 2.8,
petalLength: 4.8,
petalWidth: 1.4,
species: 'versicolor'
},
{
sepalLength: 6.7,
sepalWidth: 3.0,
petalLength: 5.0,
petalWidth: 1.7,
species: 'versicolor'
},
{
sepalLength: 6.0,
sepalWidth: 2.9,
petalLength: 4.5,
petalWidth: 1.5,
species: 'versicolor'
},
{
sepalLength: 5.7,
sepalWidth: 2.6,
petalLength: 3.5,
petalWidth: 1.0,
species: 'versicolor'
},
{
sepalLength: 5.5,
sepalWidth: 2.4,
petalLength: 3.8,
petalWidth: 1.1,
species: 'versicolor'
},
{
sepalLength: 5.5,
sepalWidth: 2.4,
petalLength: 3.7,
petalWidth: 1.0,
species: 'versicolor'
},
{
sepalLength: 5.8,
sepalWidth: 2.7,
petalLength: 3.9,
petalWidth: 1.2,
species: 'versicolor'
},
{
sepalLength: 6.0,
sepalWidth: 2.7,
petalLength: 5.1,
petalWidth: 1.6,
species: 'versicolor'
},
{
sepalLength: 5.4,
sepalWidth: 3.0,
petalLength: 4.5,
petalWidth: 1.5,
species: 'versicolor'
},
{
sepalLength: 6.0,
sepalWidth: 3.4,
petalLength: 4.5,
petalWidth: 1.6,
species: 'versicolor'
},
{
sepalLength: 6.7,
sepalWidth: 3.1,
petalLength: 4.7,
petalWidth: 1.5,
species: 'versicolor'
},
{
sepalLength: 6.3,
sepalWidth: 2.3,
petalLength: 4.4,
petalWidth: 1.3,
species: 'versicolor'
},
{
sepalLength: 5.6,
sepalWidth: 3.0,
petalLength: 4.1,
petalWidth: 1.3,
species: 'versicolor'
},
{
sepalLength: 5.5,
sepalWidth: 2.5,
petalLength: 4.0,
petalWidth: 1.3,
species: 'versicolor'
},
{
sepalLength: 5.5,
sepalWidth: 2.6,
petalLength: 4.4,
petalWidth: 1.2,
species: 'versicolor'
},
{
sepalLength: 6.1,
sepalWidth: 3.0,
petalLength: 4.6,
petalWidth: 1.4,
species: 'versicolor'
},
{
sepalLength: 5.8,
sepalWidth: 2.6,
petalLength: 4.0,
petalWidth: 1.2,
species: 'versicolor'
},
{
sepalLength: 5.0,
sepalWidth: 2.3,
petalLength: 3.3,
petalWidth: 1.0,
species: 'versicolor'
},
{
sepalLength: 5.6,
sepalWidth: 2.7,
petalLength: 4.2,
petalWidth: 1.3,
species: 'versicolor'
},
{
sepalLength: 5.7,
sepalWidth: 3.0,
petalLength: 4.2,
petalWidth: 1.2,
species: 'versicolor'
},
{
sepalLength: 5.7,
sepalWidth: 2.9,
petalLength: 4.2,
petalWidth: 1.3,
species: 'versicolor'
},
{
sepalLength: 6.2,
sepalWidth: 2.9,
petalLength: 4.3,
petalWidth: 1.3,
species: 'versicolor'
},
{
sepalLength: 5.1,
sepalWidth: 2.5,
petalLength: 3.0,
petalWidth: 1.1,
species: 'versicolor'
},
{
sepalLength: 5.7,
sepalWidth: 2.8,
petalLength: 4.1,
petalWidth: 1.3,
species: 'versicolor'
},
{
sepalLength: 6.3,
sepalWidth: 3.3,
petalLength: 6.0,
petalWidth: 2.5,
species: 'virginica'
},
{
sepalLength: 5.8,
sepalWidth: 2.7,
petalLength: 5.1,
petalWidth: 1.9,
species: 'virginica'
},
{
sepalLength: 7.1,
sepalWidth: 3.0,
petalLength: 5.9,
petalWidth: 2.1,
species: 'virginica'
},
{
sepalLength: 6.3,
sepalWidth: 2.9,
petalLength: 5.6,
petalWidth: 1.8,
species: 'virginica'
},
{
sepalLength: 6.5,
sepalWidth: 3.0,
petalLength: 5.8,
petalWidth: 2.2,
species: 'virginica'
},
{
sepalLength: 7.6,
sepalWidth: 3.0,
petalLength: 6.6,
petalWidth: 2.1,
species: 'virginica'
},
{
sepalLength: 4.9,
sepalWidth: 2.5,
petalLength: 4.5,
petalWidth: 1.7,
species: 'virginica'
},
{
sepalLength: 7.3,
sepalWidth: 2.9,
petalLength: 6.3,
petalWidth: 1.8,
species: 'virginica'
},
{
sepalLength: 6.7,
sepalWidth: 2.5,
petalLength: 5.8,
petalWidth: 1.8,
species: 'virginica'
},
{
sepalLength: 7.2,
sepalWidth: 3.6,
petalLength: 6.1,
petalWidth: 2.5,
species: 'virginica'
},
{
sepalLength: 6.5,
sepalWidth: 3.2,
petalLength: 5.1,
petalWidth: 2.0,
species: 'virginica'
},
{
sepalLength: 6.4,
sepalWidth: 2.7,
petalLength: 5.3,
petalWidth: 1.9,
species: 'virginica'
},
{
sepalLength: 6.8,
sepalWidth: 3.0,
petalLength: 5.5,
petalWidth: 2.1,
species: 'virginica'
},
{
sepalLength: 5.7,
sepalWidth: 2.5,
petalLength: 5.0,
petalWidth: 2.0,
species: 'virginica'
},
{
sepalLength: 5.8,
sepalWidth: 2.8,
petalLength: 5.1,
petalWidth: 2.4,
species: 'virginica'
},
{
sepalLength: 6.4,
sepalWidth: 3.2,
petalLength: 5.3,
petalWidth: 2.3,
species: 'virginica'
},
{
sepalLength: 6.5,
sepalWidth: 3.0,
petalLength: 5.5,
petalWidth: 1.8,
species: 'virginica'
},
{
sepalLength: 7.7,
sepalWidth: 3.8,
petalLength: 6.7,
petalWidth: 2.2,
species: 'virginica'
},
{
sepalLength: 7.7,
sepalWidth: 2.6,
petalLength: 6.9,
petalWidth: 2.3,
species: 'virginica'
},
{
sepalLength: 6.0,
sepalWidth: 2.2,
petalLength: 5.0,
petalWidth: 1.5,
species: 'virginica'
},
{
sepalLength: 6.9,
sepalWidth: 3.2,
petalLength: 5.7,
petalWidth: 2.3,
species: 'virginica'
},
{
sepalLength: 5.6,
sepalWidth: 2.8,
petalLength: 4.9,
petalWidth: 2.0,
species: 'virginica'
},
{
sepalLength: 7.7,
sepalWidth: 2.8,
petalLength: 6.7,
petalWidth: 2.0,
species: 'virginica'
},
{
sepalLength: 6.3,
sepalWidth: 2.7,
petalLength: 4.9,
petalWidth: 1.8,
species: 'virginica'
},
{
sepalLength: 6.7,
sepalWidth: 3.3,
petalLength: 5.7,
petalWidth: 2.1,
species: 'virginica'
},
{
sepalLength: 7.2,
sepalWidth: 3.2,
petalLength: 6.0,
petalWidth: 1.8,
species: 'virginica'
},
{
sepalLength: 6.2,
sepalWidth: 2.8,
petalLength: 4.8,
petalWidth: 1.8,
species: 'virginica'
},
{
sepalLength: 6.1,
sepalWidth: 3.0,
petalLength: 4.9,
petalWidth: 1.8,
species: 'virginica'
},
{
sepalLength: 6.4,
sepalWidth: 2.8,
petalLength: 5.6,
petalWidth: 2.1,
species: 'virginica'
},
{
sepalLength: 7.2,
sepalWidth: 3.0,
petalLength: 5.8,
petalWidth: 1.6,
species: 'virginica'
},
{
sepalLength: 7.4,
sepalWidth: 2.8,
petalLength: 6.1,
petalWidth: 1.9,
species: 'virginica'
},
{
sepalLength: 7.9,
sepalWidth: 3.8,
petalLength: 6.4,
petalWidth: 2.0,
species: 'virginica'
},
{
sepalLength: 6.4,
sepalWidth: 2.8,
petalLength: 5.6,
petalWidth: 2.2,
species: 'virginica'
},
{
sepalLength: 6.3,
sepalWidth: 2.8,
petalLength: 5.1,
petalWidth: 1.5,
species: 'virginica'
},
{
sepalLength: 6.1,
sepalWidth: 2.6,
petalLength: 5.6,
petalWidth: 1.4,
species: 'virginica'
},
{
sepalLength: 7.7,
sepalWidth: 3.0,
petalLength: 6.1,
petalWidth: 2.3,
species: 'virginica'
},
{
sepalLength: 6.3,
sepalWidth: 3.4,
petalLength: 5.6,
petalWidth: 2.4,
species: 'virginica'
},
{
sepalLength: 6.4,
sepalWidth: 3.1,
petalLength: 5.5,
petalWidth: 1.8,
species: 'virginica'
},
{
sepalLength: 6.0,
sepalWidth: 3.0,
petalLength: 4.8,
petalWidth: 1.8,
species: 'virginica'
},
{
sepalLength: 6.9,
sepalWidth: 3.1,
petalLength: 5.4,
petalWidth: 2.1,
species: 'virginica'
},
{
sepalLength: 6.7,
sepalWidth: 3.1,
petalLength: 5.6,
petalWidth: 2.4,
species: 'virginica'
},
{
sepalLength: 6.9,
sepalWidth: 3.1,
petalLength: 5.1,
petalWidth: 2.3,
species: 'virginica'
},
{
sepalLength: 5.8,
sepalWidth: 2.7,
petalLength: 5.1,
petalWidth: 1.9,
species: 'virginica'
},
{
sepalLength: 6.8,
sepalWidth: 3.2,
petalLength: 5.9,
petalWidth: 2.3,
species: 'virginica'
},
{
sepalLength: 6.7,
sepalWidth: 3.3,
petalLength: 5.7,
petalWidth: 2.5,
species: 'virginica'
},
{
sepalLength: 6.7,
sepalWidth: 3.0,
petalLength: 5.2,
petalWidth: 2.3,
species: 'virginica'
},
{
sepalLength: 6.3,
sepalWidth: 2.5,
petalLength: 5.0,
petalWidth: 1.9,
species: 'virginica'
},
{
sepalLength: 6.5,
sepalWidth: 3.0,
petalLength: 5.2,
petalWidth: 2.0,
species: 'virginica'
},
{
sepalLength: 6.2,
sepalWidth: 3.4,
petalLength: 5.4,
petalWidth: 2.3,
species: 'virginica'
},
{
sepalLength: 5.9,
sepalWidth: 3.0,
petalLength: 5.1,
petalWidth: 1.8,
species: 'virginica'
}
]
};
// CHART CONFIG
// -----------------------------
let chartConfig = {
globals: {
fontFamily: 'Lucida Sans Unicode'
},
backgroundColor: '#fff',
flat: true,
graphset: []
};
let traits = flowers.traits;
let species = flowers.species;
let data = flowers.values;
let series = {};
for (let i = 0; i < data.length; i++) {
let set = data[i],
key, val, point, index;
for (let r = 0; r < traits.length; r++) {
for (let c = 0; c < traits.length; c++) {
key = traits[c];
val = traits[r];
point = [set[key], set[val]];
index = species.indexOf(set.species);
series['g_' + r + '_' + c] = series['g_' + r + '_' + c] || [];
series['g_' + r + '_' + c][index] = series['g_' + r + '_' + c][index] || {};
series['g_' + r + '_' + c][index].text = set.species;
series['g_' + r + '_' + c][index].values = series['g_' + r + '_' + c][index].values || [];
series['g_' + r + '_' + c][index].values.push(point);
}
}
}
for (let r = 0; r < traits.length; r++) {
for (let c = 0; c < traits.length; c++) {
let gdata = {
type: 'scatter',
width: '200px',
height: '200px',
x: 20 + c * 200,
y: (traits.length - 1 - r) * 200,
plot: {
marker: {
alpha: 0.75,
borderWidth: '0px',
size: 3.5
},
tooltipText: '%plot-text<br>[%scale-key-text, %scale-value-text]'
},
plotarea: {
margin: '10px',
maskTolerance: [10, 10]
},
scaleX: {
guide: {
lineColor: '#bbb',
lineStyle: 'solid'
},
item: {
fontSize: '10px'
},
lineWidth: 0,
offset: 0,
tick: {
lineColor: '#bbb'
}
},
scaleY: {
guide: {
lineColor: '#bbb',
lineStyle: 'solid'
},
item: {
fontSize: '10px'
},
lineWidth: 0,
minValue: 'auto',
offset: 0,
tick: {
lineColor: '#bbb'
}
},
tooltip: {
padding: '10px',
fontSize: '15px'
},
series: series['g_' + r + '_' + c]
};
if (c === r) {
gdata.title = {
text: traits[c],
align: 'left',
fontSize: '10px',
padding: '15px 20px'
};
}
if (c > 0) {
gdata.scaleY.item.visible = false;
}
if (r > 0) {
gdata.scaleX.item.visible = false;
}
chartConfig.graphset.push(gdata);
}
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
width: traits.length * 200 + 20,
height: traits.length * 200 + 20,
output: 'svg',
data: chartConfig
});
</script>
</body>
</html>
// DEFINE DATA
// -----------------------------
let flowers = {
traits: ['sepalLength', 'sepalWidth', 'petalLength', 'petalWidth'],
species: ['setosa', 'versicolor', 'virginica'],
values: [
{ sepalLength: 5.1, sepalWidth: 3.5, petalLength: 1.4, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 4.9, sepalWidth: 3.0, petalLength: 1.4, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 4.7, sepalWidth: 3.2, petalLength: 1.3, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 4.6, sepalWidth: 3.1, petalLength: 1.5, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.0, sepalWidth: 3.6, petalLength: 1.4, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.4, sepalWidth: 3.9, petalLength: 1.7, petalWidth: 0.4, species: 'setosa' },
{ sepalLength: 4.6, sepalWidth: 3.4, petalLength: 1.4, petalWidth: 0.3, species: 'setosa' },
{ sepalLength: 5.0, sepalWidth: 3.4, petalLength: 1.5, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 4.4, sepalWidth: 2.9, petalLength: 1.4, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 4.9, sepalWidth: 3.1, petalLength: 1.5, petalWidth: 0.1, species: 'setosa' },
{ sepalLength: 5.4, sepalWidth: 3.7, petalLength: 1.5, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 4.8, sepalWidth: 3.4, petalLength: 1.6, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 4.8, sepalWidth: 3.0, petalLength: 1.4, petalWidth: 0.1, species: 'setosa' },
{ sepalLength: 4.3, sepalWidth: 3.0, petalLength: 1.1, petalWidth: 0.1, species: 'setosa' },
{ sepalLength: 5.8, sepalWidth: 4.0, petalLength: 1.2, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.7, sepalWidth: 4.4, petalLength: 1.5, petalWidth: 0.4, species: 'setosa' },
{ sepalLength: 5.4, sepalWidth: 3.9, petalLength: 1.3, petalWidth: 0.4, species: 'setosa' },
{ sepalLength: 5.1, sepalWidth: 3.5, petalLength: 1.4, petalWidth: 0.3, species: 'setosa' },
{ sepalLength: 5.7, sepalWidth: 3.8, petalLength: 1.7, petalWidth: 0.3, species: 'setosa' },
{ sepalLength: 5.1, sepalWidth: 3.8, petalLength: 1.5, petalWidth: 0.3, species: 'setosa' },
{ sepalLength: 5.4, sepalWidth: 3.4, petalLength: 1.7, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.1, sepalWidth: 3.7, petalLength: 1.5, petalWidth: 0.4, species: 'setosa' },
{ sepalLength: 4.6, sepalWidth: 3.6, petalLength: 1.0, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.1, sepalWidth: 3.3, petalLength: 1.7, petalWidth: 0.5, species: 'setosa' },
{ sepalLength: 4.8, sepalWidth: 3.4, petalLength: 1.9, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.0, sepalWidth: 3.0, petalLength: 1.6, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.0, sepalWidth: 3.4, petalLength: 1.6, petalWidth: 0.4, species: 'setosa' },
{ sepalLength: 5.2, sepalWidth: 3.5, petalLength: 1.5, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.2, sepalWidth: 3.4, petalLength: 1.4, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 4.7, sepalWidth: 3.2, petalLength: 1.6, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 4.8, sepalWidth: 3.1, petalLength: 1.6, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.4, sepalWidth: 3.4, petalLength: 1.5, petalWidth: 0.4, species: 'setosa' },
{ sepalLength: 5.2, sepalWidth: 4.1, petalLength: 1.5, petalWidth: 0.1, species: 'setosa' },
{ sepalLength: 5.5, sepalWidth: 4.2, petalLength: 1.4, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 4.9, sepalWidth: 3.1, petalLength: 1.5, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.0, sepalWidth: 3.2, petalLength: 1.2, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.5, sepalWidth: 3.5, petalLength: 1.3, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 4.9, sepalWidth: 3.6, petalLength: 1.4, petalWidth: 0.1, species: 'setosa' },
{ sepalLength: 4.4, sepalWidth: 3.0, petalLength: 1.3, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.1, sepalWidth: 3.4, petalLength: 1.5, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.0, sepalWidth: 3.5, petalLength: 1.3, petalWidth: 0.3, species: 'setosa' },
{ sepalLength: 4.5, sepalWidth: 2.3, petalLength: 1.3, petalWidth: 0.3, species: 'setosa' },
{ sepalLength: 4.4, sepalWidth: 3.2, petalLength: 1.3, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.0, sepalWidth: 3.5, petalLength: 1.6, petalWidth: 0.6, species: 'setosa' },
{ sepalLength: 5.1, sepalWidth: 3.8, petalLength: 1.9, petalWidth: 0.4, species: 'setosa' },
{ sepalLength: 4.8, sepalWidth: 3.0, petalLength: 1.4, petalWidth: 0.3, species: 'setosa' },
{ sepalLength: 5.1, sepalWidth: 3.8, petalLength: 1.6, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 4.6, sepalWidth: 3.2, petalLength: 1.4, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.3, sepalWidth: 3.7, petalLength: 1.5, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 5.0, sepalWidth: 3.3, petalLength: 1.4, petalWidth: 0.2, species: 'setosa' },
{ sepalLength: 7.0, sepalWidth: 3.2, petalLength: 4.7, petalWidth: 1.4, species: 'versicolor' },
{ sepalLength: 6.4, sepalWidth: 3.2, petalLength: 4.5, petalWidth: 1.5, species: 'versicolor' },
{ sepalLength: 6.9, sepalWidth: 3.1, petalLength: 4.9, petalWidth: 1.5, species: 'versicolor' },
{ sepalLength: 5.5, sepalWidth: 2.3, petalLength: 4.0, petalWidth: 1.3, species: 'versicolor' },
{ sepalLength: 6.5, sepalWidth: 2.8, petalLength: 4.6, petalWidth: 1.5, species: 'versicolor' },
{ sepalLength: 5.7, sepalWidth: 2.8, petalLength: 4.5, petalWidth: 1.3, species: 'versicolor' },
{ sepalLength: 6.3, sepalWidth: 3.3, petalLength: 4.7, petalWidth: 1.6, species: 'versicolor' },
{ sepalLength: 4.9, sepalWidth: 2.4, petalLength: 3.3, petalWidth: 1.0, species: 'versicolor' },
{ sepalLength: 6.6, sepalWidth: 2.9, petalLength: 4.6, petalWidth: 1.3, species: 'versicolor' },
{ sepalLength: 5.2, sepalWidth: 2.7, petalLength: 3.9, petalWidth: 1.4, species: 'versicolor' },
{ sepalLength: 5.0, sepalWidth: 2.0, petalLength: 3.5, petalWidth: 1.0, species: 'versicolor' },
{ sepalLength: 5.9, sepalWidth: 3.0, petalLength: 4.2, petalWidth: 1.5, species: 'versicolor' },
{ sepalLength: 6.0, sepalWidth: 2.2, petalLength: 4.0, petalWidth: 1.0, species: 'versicolor' },
{ sepalLength: 6.1, sepalWidth: 2.9, petalLength: 4.7, petalWidth: 1.4, species: 'versicolor' },
{ sepalLength: 5.6, sepalWidth: 2.9, petalLength: 3.6, petalWidth: 1.3, species: 'versicolor' },
{ sepalLength: 6.7, sepalWidth: 3.1, petalLength: 4.4, petalWidth: 1.4, species: 'versicolor' },
{ sepalLength: 5.6, sepalWidth: 3.0, petalLength: 4.5, petalWidth: 1.5, species: 'versicolor' },
{ sepalLength: 5.8, sepalWidth: 2.7, petalLength: 4.1, petalWidth: 1.0, species: 'versicolor' },
{ sepalLength: 6.2, sepalWidth: 2.2, petalLength: 4.5, petalWidth: 1.5, species: 'versicolor' },
{ sepalLength: 5.6, sepalWidth: 2.5, petalLength: 3.9, petalWidth: 1.1, species: 'versicolor' },
{ sepalLength: 5.9, sepalWidth: 3.2, petalLength: 4.8, petalWidth: 1.8, species: 'versicolor' },
{ sepalLength: 6.1, sepalWidth: 2.8, petalLength: 4.0, petalWidth: 1.3, species: 'versicolor' },
{ sepalLength: 6.3, sepalWidth: 2.5, petalLength: 4.9, petalWidth: 1.5, species: 'versicolor' },
{ sepalLength: 6.1, sepalWidth: 2.8, petalLength: 4.7, petalWidth: 1.2, species: 'versicolor' },
{ sepalLength: 6.4, sepalWidth: 2.9, petalLength: 4.3, petalWidth: 1.3, species: 'versicolor' },
{ sepalLength: 6.6, sepalWidth: 3.0, petalLength: 4.4, petalWidth: 1.4, species: 'versicolor' },
{ sepalLength: 6.8, sepalWidth: 2.8, petalLength: 4.8, petalWidth: 1.4, species: 'versicolor' },
{ sepalLength: 6.7, sepalWidth: 3.0, petalLength: 5.0, petalWidth: 1.7, species: 'versicolor' },
{ sepalLength: 6.0, sepalWidth: 2.9, petalLength: 4.5, petalWidth: 1.5, species: 'versicolor' },
{ sepalLength: 5.7, sepalWidth: 2.6, petalLength: 3.5, petalWidth: 1.0, species: 'versicolor' },
{ sepalLength: 5.5, sepalWidth: 2.4, petalLength: 3.8, petalWidth: 1.1, species: 'versicolor' },
{ sepalLength: 5.5, sepalWidth: 2.4, petalLength: 3.7, petalWidth: 1.0, species: 'versicolor' },
{ sepalLength: 5.8, sepalWidth: 2.7, petalLength: 3.9, petalWidth: 1.2, species: 'versicolor' },
{ sepalLength: 6.0, sepalWidth: 2.7, petalLength: 5.1, petalWidth: 1.6, species: 'versicolor' },
{ sepalLength: 5.4, sepalWidth: 3.0, petalLength: 4.5, petalWidth: 1.5, species: 'versicolor' },
{ sepalLength: 6.0, sepalWidth: 3.4, petalLength: 4.5, petalWidth: 1.6, species: 'versicolor' },
{ sepalLength: 6.7, sepalWidth: 3.1, petalLength: 4.7, petalWidth: 1.5, species: 'versicolor' },
{ sepalLength: 6.3, sepalWidth: 2.3, petalLength: 4.4, petalWidth: 1.3, species: 'versicolor' },
{ sepalLength: 5.6, sepalWidth: 3.0, petalLength: 4.1, petalWidth: 1.3, species: 'versicolor' },
{ sepalLength: 5.5, sepalWidth: 2.5, petalLength: 4.0, petalWidth: 1.3, species: 'versicolor' },
{ sepalLength: 5.5, sepalWidth: 2.6, petalLength: 4.4, petalWidth: 1.2, species: 'versicolor' },
{ sepalLength: 6.1, sepalWidth: 3.0, petalLength: 4.6, petalWidth: 1.4, species: 'versicolor' },
{ sepalLength: 5.8, sepalWidth: 2.6, petalLength: 4.0, petalWidth: 1.2, species: 'versicolor' },
{ sepalLength: 5.0, sepalWidth: 2.3, petalLength: 3.3, petalWidth: 1.0, species: 'versicolor' },
{ sepalLength: 5.6, sepalWidth: 2.7, petalLength: 4.2, petalWidth: 1.3, species: 'versicolor' },
{ sepalLength: 5.7, sepalWidth: 3.0, petalLength: 4.2, petalWidth: 1.2, species: 'versicolor' },
{ sepalLength: 5.7, sepalWidth: 2.9, petalLength: 4.2, petalWidth: 1.3, species: 'versicolor' },
{ sepalLength: 6.2, sepalWidth: 2.9, petalLength: 4.3, petalWidth: 1.3, species: 'versicolor' },
{ sepalLength: 5.1, sepalWidth: 2.5, petalLength: 3.0, petalWidth: 1.1, species: 'versicolor' },
{ sepalLength: 5.7, sepalWidth: 2.8, petalLength: 4.1, petalWidth: 1.3, species: 'versicolor' },
{ sepalLength: 6.3, sepalWidth: 3.3, petalLength: 6.0, petalWidth: 2.5, species: 'virginica' },
{ sepalLength: 5.8, sepalWidth: 2.7, petalLength: 5.1, petalWidth: 1.9, species: 'virginica' },
{ sepalLength: 7.1, sepalWidth: 3.0, petalLength: 5.9, petalWidth: 2.1, species: 'virginica' },
{ sepalLength: 6.3, sepalWidth: 2.9, petalLength: 5.6, petalWidth: 1.8, species: 'virginica' },
{ sepalLength: 6.5, sepalWidth: 3.0, petalLength: 5.8, petalWidth: 2.2, species: 'virginica' },
{ sepalLength: 7.6, sepalWidth: 3.0, petalLength: 6.6, petalWidth: 2.1, species: 'virginica' },
{ sepalLength: 4.9, sepalWidth: 2.5, petalLength: 4.5, petalWidth: 1.7, species: 'virginica' },
{ sepalLength: 7.3, sepalWidth: 2.9, petalLength: 6.3, petalWidth: 1.8, species: 'virginica' },
{ sepalLength: 6.7, sepalWidth: 2.5, petalLength: 5.8, petalWidth: 1.8, species: 'virginica' },
{ sepalLength: 7.2, sepalWidth: 3.6, petalLength: 6.1, petalWidth: 2.5, species: 'virginica' },
{ sepalLength: 6.5, sepalWidth: 3.2, petalLength: 5.1, petalWidth: 2.0, species: 'virginica' },
{ sepalLength: 6.4, sepalWidth: 2.7, petalLength: 5.3, petalWidth: 1.9, species: 'virginica' },
{ sepalLength: 6.8, sepalWidth: 3.0, petalLength: 5.5, petalWidth: 2.1, species: 'virginica' },
{ sepalLength: 5.7, sepalWidth: 2.5, petalLength: 5.0, petalWidth: 2.0, species: 'virginica' },
{ sepalLength: 5.8, sepalWidth: 2.8, petalLength: 5.1, petalWidth: 2.4, species: 'virginica' },
{ sepalLength: 6.4, sepalWidth: 3.2, petalLength: 5.3, petalWidth: 2.3, species: 'virginica' },
{ sepalLength: 6.5, sepalWidth: 3.0, petalLength: 5.5, petalWidth: 1.8, species: 'virginica' },
{ sepalLength: 7.7, sepalWidth: 3.8, petalLength: 6.7, petalWidth: 2.2, species: 'virginica' },
{ sepalLength: 7.7, sepalWidth: 2.6, petalLength: 6.9, petalWidth: 2.3, species: 'virginica' },
{ sepalLength: 6.0, sepalWidth: 2.2, petalLength: 5.0, petalWidth: 1.5, species: 'virginica' },
{ sepalLength: 6.9, sepalWidth: 3.2, petalLength: 5.7, petalWidth: 2.3, species: 'virginica' },
{ sepalLength: 5.6, sepalWidth: 2.8, petalLength: 4.9, petalWidth: 2.0, species: 'virginica' },
{ sepalLength: 7.7, sepalWidth: 2.8, petalLength: 6.7, petalWidth: 2.0, species: 'virginica' },
{ sepalLength: 6.3, sepalWidth: 2.7, petalLength: 4.9, petalWidth: 1.8, species: 'virginica' },
{ sepalLength: 6.7, sepalWidth: 3.3, petalLength: 5.7, petalWidth: 2.1, species: 'virginica' },
{ sepalLength: 7.2, sepalWidth: 3.2, petalLength: 6.0, petalWidth: 1.8, species: 'virginica' },
{ sepalLength: 6.2, sepalWidth: 2.8, petalLength: 4.8, petalWidth: 1.8, species: 'virginica' },
{ sepalLength: 6.1, sepalWidth: 3.0, petalLength: 4.9, petalWidth: 1.8, species: 'virginica' },
{ sepalLength: 6.4, sepalWidth: 2.8, petalLength: 5.6, petalWidth: 2.1, species: 'virginica' },
{ sepalLength: 7.2, sepalWidth: 3.0, petalLength: 5.8, petalWidth: 1.6, species: 'virginica' },
{ sepalLength: 7.4, sepalWidth: 2.8, petalLength: 6.1, petalWidth: 1.9, species: 'virginica' },
{ sepalLength: 7.9, sepalWidth: 3.8, petalLength: 6.4, petalWidth: 2.0, species: 'virginica' },
{ sepalLength: 6.4, sepalWidth: 2.8, petalLength: 5.6, petalWidth: 2.2, species: 'virginica' },
{ sepalLength: 6.3, sepalWidth: 2.8, petalLength: 5.1, petalWidth: 1.5, species: 'virginica' },
{ sepalLength: 6.1, sepalWidth: 2.6, petalLength: 5.6, petalWidth: 1.4, species: 'virginica' },
{ sepalLength: 7.7, sepalWidth: 3.0, petalLength: 6.1, petalWidth: 2.3, species: 'virginica' },
{ sepalLength: 6.3, sepalWidth: 3.4, petalLength: 5.6, petalWidth: 2.4, species: 'virginica' },
{ sepalLength: 6.4, sepalWidth: 3.1, petalLength: 5.5, petalWidth: 1.8, species: 'virginica' },
{ sepalLength: 6.0, sepalWidth: 3.0, petalLength: 4.8, petalWidth: 1.8, species: 'virginica' },
{ sepalLength: 6.9, sepalWidth: 3.1, petalLength: 5.4, petalWidth: 2.1, species: 'virginica' },
{ sepalLength: 6.7, sepalWidth: 3.1, petalLength: 5.6, petalWidth: 2.4, species: 'virginica' },
{ sepalLength: 6.9, sepalWidth: 3.1, petalLength: 5.1, petalWidth: 2.3, species: 'virginica' },
{ sepalLength: 5.8, sepalWidth: 2.7, petalLength: 5.1, petalWidth: 1.9, species: 'virginica' },
{ sepalLength: 6.8, sepalWidth: 3.2, petalLength: 5.9, petalWidth: 2.3, species: 'virginica' },
{ sepalLength: 6.7, sepalWidth: 3.3, petalLength: 5.7, petalWidth: 2.5, species: 'virginica' },
{ sepalLength: 6.7, sepalWidth: 3.0, petalLength: 5.2, petalWidth: 2.3, species: 'virginica' },
{ sepalLength: 6.3, sepalWidth: 2.5, petalLength: 5.0, petalWidth: 1.9, species: 'virginica' },
{ sepalLength: 6.5, sepalWidth: 3.0, petalLength: 5.2, petalWidth: 2.0, species: 'virginica' },
{ sepalLength: 6.2, sepalWidth: 3.4, petalLength: 5.4, petalWidth: 2.3, species: 'virginica' },
{ sepalLength: 5.9, sepalWidth: 3.0, petalLength: 5.1, petalWidth: 1.8, species: 'virginica' }
]
};
// CHART CONFIG
// -----------------------------
let chartConfig = {
globals: {
fontFamily: 'Lucida Sans Unicode'
},
backgroundColor: '#fff',
flat: true,
graphset: []
};
let traits = flowers.traits;
let species = flowers.species;
let data = flowers.values;
let series = {};
for (let i = 0; i < data.length; i++) {
let set = data[i], key, val, point, index;
for (let r = 0; r < traits.length; r++) {
for (let c = 0; c < traits.length; c++) {
key = traits[c];
val = traits[r];
point = [set[key], set[val]];
index = species.indexOf(set.species);
series['g_' + r + '_' + c] = series['g_' + r + '_' + c] || [];
series['g_' + r + '_' + c][index] = series['g_' + r + '_' + c][index] || {};
series['g_' + r + '_' + c][index].text = set.species;
series['g_' + r + '_' + c][index].values = series['g_' + r + '_' + c][index].values || [];
series['g_' + r + '_' + c][index].values.push(point);
}
}
}
for (let r = 0; r < traits.length; r++) {
for (let c = 0; c < traits.length; c++) {
let gdata = {
type: 'scatter',
width: '200px',
height: '200px',
x: 20 + c * 200,
y: (traits.length - 1 - r) * 200,
plot: {
marker: {
alpha: 0.75,
borderWidth: '0px',
size: 3.5
},
tooltipText: '%plot-text<br>[%scale-key-text, %scale-value-text]'
},
plotarea: {
margin: '10px',
maskTolerance: [10, 10]
},
scaleX: {
guide: {
lineColor: '#bbb',
lineStyle: 'solid'
},
item: {
fontSize: '10px'
},
lineWidth: 0,
offset: 0,
tick: {
lineColor: '#bbb'
}
},
scaleY: {
guide: {
lineColor: '#bbb',
lineStyle: 'solid'
},
item: {
fontSize: '10px'
},
lineWidth: 0,
minValue: 'auto',
offset: 0,
tick: {
lineColor: '#bbb'
}
},
tooltip: {
padding: '10px',
fontSize: '15px'
},
series: series['g_' + r + '_' + c]
};
if (c === r) {
gdata.title = {
text: traits[c],
align: 'left',
fontSize: '10px',
padding: '15px 20px'
};
}
if (c > 0) {
gdata.scaleY.item.visible = false;
}
if (r > 0) {
gdata.scaleX.item.visible = false;
}
chartConfig.graphset.push(gdata);
}
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
width: traits.length * 200 + 20,
height: traits.length * 200 + 20,
output: 'svg',
data: chartConfig
});
