<!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"];
let chartConfig = {
graphset: [{
type: 'null',
tooltip: {
padding: '10 20',
backgroundColor: '#333',
color: '#fff',
callout: true,
calloutPosition: 'bottom',
borderRadius: 10
},
shapes: [{
type: 'rect',
id: 'rect',
borderWidth: 2,
alpha: 0.5,
borderColor: '#f0f',
backgroundColor: '#09f #f09',
x: 50,
y: 100,
width: 50,
height: 100,
hoverState: {
backgroundColor: '#eee',
alpha: 0.4
},
label: {
text: 'Rect',
borderColor: '#333',
borderWidth: 2,
padding: 5,
alpha: 0.8
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'circle',
id: 'mycircle',
borderWidth: 2,
borderColor: '#f00',
backgroundColor: '#FF5722',
x: 150,
y: 100,
size: 40,
hoverState: {
backgroundColor: '#ff3d00'
},
label: {
text: 'Circle'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'pie',
id: 'myPie',
borderWidth: 2,
borderColor: '#FFC107',
backgroundColor: '#FFEB3B',
x: 250,
y: 100,
size: 40,
angleStart: 0,
angleEnd: 330,
hoverState: {
alpha: 1,
angleEnd: 358,
backgroundColor: '#39d474',
borderColor: '#00ac42'
},
label: {
text: 'Pie',
padding: '2 4',
offsetY: 20
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'star5',
id: 'myStar5',
borderWidth: 2,
borderColor: '#01579B',
backgroundColor: '#0277BD #4FC3F7',
x: 360,
y: 100,
size: 25,
hoverState: {
backgroundColor: '#039BE5 #FFF',
size: 38,
type: 'star8',
alpha: 1
},
label: {
text: 'Star 5',
padding: '2 4'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'star9',
id: 'myStar9',
borderWidth: 2,
borderColor: '#E65100',
fillType: 'radial',
gradientColors: '#FFF59D #FFC107 #F4511E',
gradientStops: '0.1 0.5 0.9',
x: 500,
y: 100,
size: 50,
label: {
text: 'Star 9',
fontColor: '#4d4d4d',
fontWeight: 'bold',
fontSize: 20,
padding: 10
},
hoverState: {
gradientColors: '#FBC02D #FFA000 #E65100',
gradientStops: '0.1 0.5 0.9'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'pie',
id: 'myRing',
borderWidth: 0,
backgroundColor: '#DCEDC8 #7CB342',
shadow: 0.4,
shadowDistance: 5,
hoverState: {
backgroundColor: '#FFEB3B #F44336',
angleStart: 180,
angleEnd: 540
},
x: 70,
y: 230,
size: 50,
slice: 30,
angleStart: 180,
angleEnd: 450,
tooltip: {
text: 'Gauge'
},
label: {
text: 'Ring'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'square',
id: 'mySquare',
borderWidth: 5,
borderColor: 5,
backgroundColor: '#0277BD',
x: 200,
y: 230,
size: 40,
label: {
text: 'Square',
padding: '2 4'
},
tooltip: {
text: 'I am a square'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'diamond',
id: 'myDiamond',
borderWidth: 2,
borderColor: '#00C853',
backgroundColor: '#00E676',
x: 330,
y: 230,
size: 40,
label: {
text: 'Diamond',
padding: '2 4'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'triangle',
id: 'myTriangle',
borderWidth: 2,
borderColor: '#03A9F4',
backgroundColor: '#03A9F4',
x: 480,
y: 230,
size: 40,
tooltip: {
text: 'I am a triangle'
},
label: {
offsetY: 50,
text: 'Triangle'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'plus',
id: 'myPlus',
lineWidth: 8,
lineColor: '#4DB6AC',
x: 60,
y: 330,
size: 30,
label: {
text: 'Plus',
offsetY: 50
},
topState: {
lineColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'cross',
id: 'myCross',
lineWidth: 8,
lineColor: '#4DB6AC',
x: 190,
y: 330,
size: 30,
label: {
text: 'Cross',
offsetY: 50
},
topState: {
lineColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'line',
id: 'myLine',
lineWidth: 5,
lineColor: '#F44336',
points: [
[280,
310
],
[340,
320
],
[300,
350
],
[380,
340
]
],
label: {
text: 'Line',
offsetY: 50
},
topState: {
lineColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'poly',
id: 'myPoly',
lineStyle: 'solid',
borderWidth: 2,
shadowDistance: 15,
borderColor: '#532',
backgroundColor: '#e91e63',
points: [
[450,
310
],
[520,
310
],
[520,
360
],
[400,
380
],
[450,
310
]
],
label: {
text: 'Polygon'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
}
]
}]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%'
});
</script>
</body>
</html>
let chartConfig = {
graphset: [{
type: 'null',
tooltip: {
padding: '10 20',
backgroundColor: '#333',
color: '#fff',
callout: true,
calloutPosition: 'bottom',
borderRadius: 10
},
shapes: [{
type: 'rect',
id: 'rect',
borderWidth: 2,
alpha: 0.5,
borderColor: '#f0f',
backgroundColor: '#09f #f09',
x: 50,
y: 100,
width: 50,
height: 100,
hoverState: {
backgroundColor: '#eee',
alpha: 0.4
},
label: {
text: 'Rect',
borderColor: '#333',
borderWidth: 2,
padding: 5,
alpha: 0.8
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'circle',
id: 'mycircle',
borderWidth: 2,
borderColor: '#f00',
backgroundColor: '#FF5722',
x: 150,
y: 100,
size: 40,
hoverState: {
backgroundColor: '#ff3d00'
},
label: {
text: 'Circle'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'pie',
id: 'myPie',
borderWidth: 2,
borderColor: '#FFC107',
backgroundColor: '#FFEB3B',
x: 250,
y: 100,
size: 40,
angleStart: 0,
angleEnd: 330,
hoverState: {
alpha: 1,
angleEnd: 358,
backgroundColor: '#39d474',
borderColor: '#00ac42'
},
label: {
text: 'Pie',
padding: '2 4',
offsetY: 20
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'star5',
id: 'myStar5',
borderWidth: 2,
borderColor: '#01579B',
backgroundColor: '#0277BD #4FC3F7',
x: 360,
y: 100,
size: 25,
hoverState: {
backgroundColor: '#039BE5 #FFF',
size: 38,
type: 'star8',
alpha: 1
},
label: {
text: 'Star 5',
padding: '2 4'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'star9',
id: 'myStar9',
borderWidth: 2,
borderColor: '#E65100',
fillType: 'radial',
gradientColors: '#FFF59D #FFC107 #F4511E',
gradientStops: '0.1 0.5 0.9',
x: 500,
y: 100,
size: 50,
label: {
text: 'Star 9',
fontColor: '#4d4d4d',
fontWeight: 'bold',
fontSize: 20,
padding: 10
},
hoverState: {
gradientColors: '#FBC02D #FFA000 #E65100',
gradientStops: '0.1 0.5 0.9'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'pie',
id: 'myRing',
borderWidth: 0,
backgroundColor: '#DCEDC8 #7CB342',
shadow: 0.4,
shadowDistance: 5,
hoverState: {
backgroundColor: '#FFEB3B #F44336',
angleStart: 180,
angleEnd: 540
},
x: 70,
y: 230,
size: 50,
slice: 30,
angleStart: 180,
angleEnd: 450,
tooltip: {
text: 'Gauge'
},
label: {
text: 'Ring'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'square',
id: 'mySquare',
borderWidth: 5,
borderColor: 5,
backgroundColor: '#0277BD',
x: 200,
y: 230,
size: 40,
label: {
text: 'Square',
padding: '2 4'
},
tooltip: {
text: 'I am a square'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'diamond',
id: 'myDiamond',
borderWidth: 2,
borderColor: '#00C853',
backgroundColor: '#00E676',
x: 330,
y: 230,
size: 40,
label: {
text: 'Diamond',
padding: '2 4'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'triangle',
id: 'myTriangle',
borderWidth: 2,
borderColor: '#03A9F4',
backgroundColor: '#03A9F4',
x: 480,
y: 230,
size: 40,
tooltip: {
text: 'I am a triangle'
},
label: {
offsetY: 50,
text: 'Triangle'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'plus',
id: 'myPlus',
lineWidth: 8,
lineColor: '#4DB6AC',
x: 60,
y: 330,
size: 30,
label: {
text: 'Plus',
offsetY: 50
},
topState: {
lineColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'cross',
id: 'myCross',
lineWidth: 8,
lineColor: '#4DB6AC',
x: 190,
y: 330,
size: 30,
label: {
text: 'Cross',
offsetY: 50
},
topState: {
lineColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'line',
id: 'myLine',
lineWidth: 5,
lineColor: '#F44336',
points: [
[280,
310
],
[340,
320
],
[300,
350
],
[380,
340
]
],
label: {
text: 'Line',
offsetY: 50
},
topState: {
lineColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
},
{
type: 'poly',
id: 'myPoly',
lineStyle: 'solid',
borderWidth: 2,
shadowDistance: 15,
borderColor: '#532',
backgroundColor: '#e91e63',
points: [
[450,
310
],
[520,
310
],
[520,
360
],
[400,
380
],
[450,
310
]
],
label: {
text: 'Polygon'
},
topState: {
backgroundColor: 'red',
offsetX: '10px',
offsetY: '10px',
},
}
]
}]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%'
});