<!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 {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="zc"></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var 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"
}
]
};
var cdata = {
globals: {
fontFamily: 'Lucida Sans Unicode'
},
backgroundColor: '#fff',
flat: true,
graphset: []
};
var traits = flowers.traits;
var species = flowers.species;
var data = flowers.values;
var series = {};
for (var i = 0; i < data.length; i++) {
var set = data[i],
key, val, point, index;
for (var r = 0; r < traits.length; r++) {
for (var 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 (var r = 0; r < traits.length; r++) {
for (var c = 0; c < traits.length; c++) {
var gdata = {
width: 200,
height: 200,
x: 20 + c * 200,
y: (traits.length - 1 - r) * 200,
type: 'scatter',
plotarea: {
maskTolerance: [10, 10],
marginTop: 10,
marginRight: 10,
marginBottom: 10,
marginLeft: 10
},
scaleX: {
lineWidth: 0,
offset: 0,
item: {
fontSize: 10
},
guide: {
lineStyle: 'solid',
lineColor: '#bbb'
},
tick: {
lineColor: '#bbb'
}
},
scaleY: {
lineWidth: 0,
offset: 0,
minValue: 'auto',
item: {
fontSize: 10
},
guide: {
lineStyle: 'solid',
lineColor: '#bbb'
},
tick: {
lineColor: '#bbb'
}
},
plot: {
marker: {
borderWidth: 0,
size: 3.5,
alpha: 0.75
},
tooltipText: '%plot-text<br>[%scale-key-text, %scale-value-text]'
},
tooltip: {
fontSize: 15,
padding: 10
},
series: series['g_' + r + '_' + c]
};
if (c === r) {
gdata.title = {
text: traits[c],
fontSize: 10,
align: 'left',
padding: '15 20'
};
}
if (c > 0) {
gdata.scaleY.item.visible = false;
}
if (r > 0) {
gdata.scaleX.item.visible = false;
}
cdata.graphset.push(gdata);
}
}
zingchart.render({
id: 'zc',
width: traits.length * 200 + 20,
height: traits.length * 200 + 20,
output: 'svg',
data: cdata
});
</script>
</body>
</html>
var 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"
}
]
};
var cdata = {
globals: {
fontFamily: 'Lucida Sans Unicode'
},
backgroundColor: '#fff',
flat: true,
graphset: []
};
var traits = flowers.traits;
var species = flowers.species;
var data = flowers.values;
var series = {};
for (var i = 0; i < data.length; i++) {
var set = data[i],
key, val, point, index;
for (var r = 0; r < traits.length; r++) {
for (var 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 (var r = 0; r < traits.length; r++) {
for (var c = 0; c < traits.length; c++) {
var gdata = {
width: 200,
height: 200,
x: 20 + c * 200,
y: (traits.length - 1 - r) * 200,
type: 'scatter',
plotarea: {
maskTolerance: [10, 10],
marginTop: 10,
marginRight: 10,
marginBottom: 10,
marginLeft: 10
},
scaleX: {
lineWidth: 0,
offset: 0,
item: {
fontSize: 10
},
guide: {
lineStyle: 'solid',
lineColor: '#bbb'
},
tick: {
lineColor: '#bbb'
}
},
scaleY: {
lineWidth: 0,
offset: 0,
minValue: 'auto',
item: {
fontSize: 10
},
guide: {
lineStyle: 'solid',
lineColor: '#bbb'
},
tick: {
lineColor: '#bbb'
}
},
plot: {
marker: {
borderWidth: 0,
size: 3.5,
alpha: 0.75
},
tooltipText: '%plot-text<br>[%scale-key-text, %scale-value-text]'
},
tooltip: {
fontSize: 15,
padding: 10
},
series: series['g_' + r + '_' + c]
};
if (c === r) {
gdata.title = {
text: traits[c],
fontSize: 10,
align: 'left',
padding: '15 20'
};
}
if (c > 0) {
gdata.scaleY.item.visible = false;
}
if (r > 0) {
gdata.scaleX.item.visible = false;
}
cdata.graphset.push(gdata);
}
}
zingchart.render({
id: 'zc',
width: traits.length * 200 + 20,
height: traits.length * 200 + 20,
output: 'svg',
data: cdata
});