<!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></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"type": "area",
"title": {
"text": "Berry Picking Contest"
},
"plotarea": {
"margin-top": "25%"
},
"labels": [{
"text": "Blackberries: %plot-0-value",
"default-value": "___", //optional
"text-align": "left", //helps with jumping text
"background-color": "#666699",
"font-color": "white",
"padding": "5%",
"border-radius": "5px",
"height": "30px",
"width": "100px",
"x": "20%",
"y": "12%"
},
{
"text": "Blueberries: %plot-1-value",
"default-value": "___",
"text-align": "left",
"background-color": "#66ccff",
"font-color": "white",
"padding": "5%",
"border-radius": "5px",
"height": "30px",
"width": "100px",
"x": "40%",
"y": "12%"
},
{
"text": "Cloudberries: %plot-2-value",
"default-value": "___",
"text-align": "left",
"background-color": "#ff9999",
"font-color": "white",
"padding": "5%",
"border-radius": "5px",
"height": "30px",
"width": "100px",
"x": "60%",
"y": "12%"
}
],
"crosshair-x": {
"plot-label": {
"visible": false
}
},
"plot": {
"aspect": "spline",
"marker": {
"visible": false
},
"tooltip": {
"visible": false
}
},
"scale-x": {
"labels": ["Alice", "Brett", "Chris", "Donna", "Emily", "Frank"]
},
"scale-y": {
"values": "0:150:50"
},
"series": [{
"values": [64, 50, 34, 30, 90, 99],
"text": "Blackberries",
"line-color": "#666699",
"background-color": "#666699"
},
{
"values": [70, 77, 134, 114, 130, 65],
"text": "Blueberries",
"line-color": "#66ccff",
"background-color": "#66ccff",
},
{
"values": [30, 34, 15, 16, 59, 64],
"line-color": "#ff9999",
"background-color": "#ff9999",
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
var myConfig = {
"type": "area",
"title": {
"text": "Berry Picking Contest"
},
"plotarea": {
"margin-top": "25%"
},
"labels": [{
"text": "Blackberries: %plot-0-value",
"default-value": "___", //optional
"text-align": "left", //helps with jumping text
"background-color": "#666699",
"font-color": "white",
"padding": "5%",
"border-radius": "5px",
"height": "30px",
"width": "100px",
"x": "20%",
"y": "12%"
},
{
"text": "Blueberries: %plot-1-value",
"default-value": "___",
"text-align": "left",
"background-color": "#66ccff",
"font-color": "white",
"padding": "5%",
"border-radius": "5px",
"height": "30px",
"width": "100px",
"x": "40%",
"y": "12%"
},
{
"text": "Cloudberries: %plot-2-value",
"default-value": "___",
"text-align": "left",
"background-color": "#ff9999",
"font-color": "white",
"padding": "5%",
"border-radius": "5px",
"height": "30px",
"width": "100px",
"x": "60%",
"y": "12%"
}
],
"crosshair-x": {
"plot-label": {
"visible": false
}
},
"plot": {
"aspect": "spline",
"marker": {
"visible": false
},
"tooltip": {
"visible": false
}
},
"scale-x": {
"labels": ["Alice", "Brett", "Chris", "Donna", "Emily", "Frank"]
},
"scale-y": {
"values": "0:150:50"
},
"series": [{
"values": [64, 50, 34, 30, 90, 99],
"text": "Blackberries",
"line-color": "#666699",
"background-color": "#666699"
},
{
"values": [70, 77, 134, 114, 130, 65],
"text": "Blueberries",
"line-color": "#66ccff",
"background-color": "#66ccff",
},
{
"values": [30, 34, 15, 16, 59, 64],
"line-color": "#ff9999",
"background-color": "#ff9999",
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});