<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
<script nonce="undefined" src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
<link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.container {
width: 400px;
height: 200px;
min-width: 400px;
border: 1px dashed #777;
}
#myChart {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class='container'>
<div id='myChart'></div>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'pie',
legend: {
align: 'right',
verticalAlign: 'middle',
toggleAction: 'remove',
maxItems: 8,
overflow: 'scroll',
scroll: {
bar: {
backgroundColor: '#bbff33 #99e600',
borderLeft: '1px solid #88cc00'
},
handle: {
backgroundColor: '#66cc66',
borderLeft: '1px solid #339933',
borderRight: '1px solid #339933',
borderTop: '1px solid #339933',
borderBottom: '1px solid #339933',
borderRadius: '2px'
}
},
borderWidth: 1,
borderColor: '#88cc00',
borderRadius: '3px',
marker: {
type: 'circle'
},
mediaRules: [{
maxWidth: 500,
item: {
fontSize: 10
},
scroll: {
bar: {
backgroundColor: '#e6f0ff #99c2ff',
borderLeft: '1px solid #0066ff'
},
handle: {
backgroundColor: '#99ccff',
borderLeft: '1px solid #3399ff',
borderRight: '1px solid #3399ff',
borderTop: '1px solid #3399ff',
borderBottom: '1px solid #3399ff',
borderRadius: '2px'
}
},
borderColor: '#0066ff',
marker: {
size: 4
}
},
{
maxWidth: 300,
maxItems: 6,
item: {
fontSize: 9,
margin: 1
},
scroll: {
bar: {
width: '50%',
backgroundColor: '#e6e6ff #b3b3ff',
borderLeft: '1px solid #9999ff'
},
handle: {
width: '50%',
backgroundColor: '#cc99ff',
borderLeft: '1px solid #9933ff',
borderRight: '1px solid #9933ff',
borderTop: '1px solid #9933ff',
borderBottom: '1px solid #9933ff',
borderRadius: '2px'
}
},
borderColor: '#9999ff',
marker: {
size: 3
}
}
]
},
plotarea: {
adjustLayout: true
},
plot: {
tooltip: {
text: '%t: %v (%npv%)',
borderRadius: '2px'
},
valueBox: {
visible: false
}
},
series: [{
values: [234],
backgroundColor: '#cc0000',
text: 'Alpha'
},
{
values: [121],
backgroundColor: '#ff3300',
text: 'Beta'
},
{
values: [77],
backgroundColor: '#ff6600',
text: 'Gamma'
},
{
values: [65],
backgroundColor: '#ff9933',
text: 'Delta'
},
{
values: [59],
backgroundColor: '#ffcc00',
text: 'Epsilon'
},
{
values: [35],
backgroundColor: '#ace600',
text: 'Zeta'
},
{
values: [34],
backgroundColor: '#88cc00',
text: 'Eta'
},
{
values: [31],
backgroundColor: '#339933',
text: 'Theta'
},
{
values: [16],
backgroundColor: '#66ccff',
text: 'Iota'
},
{
values: [14],
backgroundColor: '#3399ff',
text: 'Kappa'
},
{
values: [13],
backgroundColor: '#0066ff',
text: 'Lambda'
},
{
values: [12],
backgroundColor: '#3333cc',
text: 'Mu'
},
{
values: [11],
backgroundColor: '#6600ff',
text: 'Nu'
},
{
values: [10],
backgroundColor: '#9933ff',
text: 'Xi'
},
{
values: [9],
backgroundColor: '#9999ff',
text: 'Omicron'
}
]
};
// adjust the refresh rate of the chart
zingchart.DEV.RESIZESPEED = 50;
zingchart.DEV.DEBOUNCESPEED = 50;
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%'
});
// initiate jquery resizable container for demo purposes
$('.container').resizable();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
<link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div class='container'>
<div id='myChart'></div>
</div>
</body>
</html>
.container {
width: 400px;
height: 200px;
min-width: 400px;
border: 1px dashed #777;
}
#myChart {
width: 100%;
height: 100%;
}
let chartConfig = {
type: 'pie',
legend: {
align: 'right',
verticalAlign: 'middle',
toggleAction: 'remove',
maxItems: 8,
overflow: 'scroll',
scroll: {
bar: {
backgroundColor: '#bbff33 #99e600',
borderLeft: '1px solid #88cc00'
},
handle: {
backgroundColor: '#66cc66',
borderLeft: '1px solid #339933',
borderRight: '1px solid #339933',
borderTop: '1px solid #339933',
borderBottom: '1px solid #339933',
borderRadius: '2px'
}
},
borderWidth: 1,
borderColor: '#88cc00',
borderRadius: '3px',
marker: {
type: 'circle'
},
mediaRules: [{
maxWidth: 500,
item: {
fontSize: 10
},
scroll: {
bar: {
backgroundColor: '#e6f0ff #99c2ff',
borderLeft: '1px solid #0066ff'
},
handle: {
backgroundColor: '#99ccff',
borderLeft: '1px solid #3399ff',
borderRight: '1px solid #3399ff',
borderTop: '1px solid #3399ff',
borderBottom: '1px solid #3399ff',
borderRadius: '2px'
}
},
borderColor: '#0066ff',
marker: {
size: 4
}
},
{
maxWidth: 300,
maxItems: 6,
item: {
fontSize: 9,
margin: 1
},
scroll: {
bar: {
width: '50%',
backgroundColor: '#e6e6ff #b3b3ff',
borderLeft: '1px solid #9999ff'
},
handle: {
width: '50%',
backgroundColor: '#cc99ff',
borderLeft: '1px solid #9933ff',
borderRight: '1px solid #9933ff',
borderTop: '1px solid #9933ff',
borderBottom: '1px solid #9933ff',
borderRadius: '2px'
}
},
borderColor: '#9999ff',
marker: {
size: 3
}
}
]
},
plotarea: {
adjustLayout: true
},
plot: {
tooltip: {
text: '%t: %v (%npv%)',
borderRadius: '2px'
},
valueBox: {
visible: false
}
},
series: [{
values: [234],
backgroundColor: '#cc0000',
text: 'Alpha'
},
{
values: [121],
backgroundColor: '#ff3300',
text: 'Beta'
},
{
values: [77],
backgroundColor: '#ff6600',
text: 'Gamma'
},
{
values: [65],
backgroundColor: '#ff9933',
text: 'Delta'
},
{
values: [59],
backgroundColor: '#ffcc00',
text: 'Epsilon'
},
{
values: [35],
backgroundColor: '#ace600',
text: 'Zeta'
},
{
values: [34],
backgroundColor: '#88cc00',
text: 'Eta'
},
{
values: [31],
backgroundColor: '#339933',
text: 'Theta'
},
{
values: [16],
backgroundColor: '#66ccff',
text: 'Iota'
},
{
values: [14],
backgroundColor: '#3399ff',
text: 'Kappa'
},
{
values: [13],
backgroundColor: '#0066ff',
text: 'Lambda'
},
{
values: [12],
backgroundColor: '#3333cc',
text: 'Mu'
},
{
values: [11],
backgroundColor: '#6600ff',
text: 'Nu'
},
{
values: [10],
backgroundColor: '#9933ff',
text: 'Xi'
},
{
values: [9],
backgroundColor: '#9999ff',
text: 'Omicron'
}
]
};
// adjust the refresh rate of the chart
zingchart.DEV.RESIZESPEED = 50;
zingchart.DEV.DEBOUNCESPEED = 50;
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%'
});
// initiate jquery resizable container for demo purposes
$('.container').resizable();