<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
min-height: 530px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'radar',
theme: 'classic',
globals: {
fontFamily: 'PT Sans',
shadow: false,
},
backgroundColor: '#FFF',
title: {
text: 'Using Data Values for Tokens',
backgroundColor: '#333',
fontSize: '24px',
},
plot: {
tooltip: {
text: '%v studio albums made by %data-band',
backgroundColor: '#CFF',
color: '#333',
fontSize: '14px',
},
animation: {
delay: 500,
effect: 'ANIMATION_EXPAND_TOP',
sequence: 'ANIMATION_BY_PLOT_AND_NODE',
speed: 10,
},
aspect: 'rose',
},
scaleK: {
aspect: 'circle',
values: '0:315:45',
// visible: false,
labels: [
'N',
'NE',
'E',
'SE',
'S',
'SW',
'W',
'NW',
],
},
scaleV: {
values: '0:25:5',
guide: {
lineColor: '#333',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
color: '#333',
},
},
series: [{
values: [
[90, 9],
[197, 12],
[312, 16],
[45, 14],
[270, 21]
],
// backgroundColor: '#0CF',
target: '_blank',
url: 'http://www.google.com/#q=%data-band',
rules: [{
rule: '%v >= 1',
backgroundColor: '#9DFCFE',
}, {
rule: '%v >= 15',
backgroundColor: '#63BCF9',
}]
}, ],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'radar',
theme: 'classic',
globals: {
fontFamily: 'PT Sans',
shadow: false,
},
backgroundColor: '#FFF',
title: {
text: 'Using Data Values for Tokens',
backgroundColor: '#333',
fontSize: '24px',
},
plot: {
tooltip: {
text: '%v studio albums made by %data-band',
backgroundColor: '#CFF',
color: '#333',
fontSize: '14px',
},
animation: {
delay: 500,
effect: 'ANIMATION_EXPAND_TOP',
sequence: 'ANIMATION_BY_PLOT_AND_NODE',
speed: 10,
},
aspect: 'rose',
},
scaleK: {
aspect: 'circle',
values: '0:315:45',
// visible: false,
labels: [
'N',
'NE',
'E',
'SE',
'S',
'SW',
'W',
'NW',
],
},
scaleV: {
values: '0:25:5',
guide: {
lineColor: '#333',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
color: '#333',
},
},
series: [
{
values: [[90, 9], [197, 12], [312, 16], [45, 14], [270, 21]],
// backgroundColor: '#0CF',
target: '_blank',
url: 'http://www.google.com/#q=%data-band',
rules: [{
rule: '%v >= 1',
backgroundColor: '#9DFCFE',
}, {
rule: '%v >= 15',
backgroundColor: '#63BCF9',
}]
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
