<!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": "line",
"scale-y-n": {
"line-color": "red",
"line-width": 3,
"label": {
"font-color": "red",
"font-size": 20,
},
"item": {
"font-color": "red",
"font-size": 10,
"font-weight": "bold"
},
"tick": {
"line-color": "red",
"line-width": 3
}
},
"utc": true,
"timezone": 0,
"scale-x": {
"min-value": "1420146000000",
"step": "day",
"transform": {
"type": "date",
"all": "%m/%d"
},
"label": {
"text": "scale-x"
},
"item": {
"font-size": 10
}
},
"scale-y": {
"values": "150:350:50",
"format": "$%v",
"label": {
"text": "scale-y"
}
},
"scale-y-2": {
"values": "131:331:25",
"format": "%v €",
"label": {
"text": "scale-y-2"
}
},
"crosshair-x": {
"plot-label": {
"visible": false
}
},
"crosshair-y": {
"type": "multiple"
},
"plot": {
"aspect": "spline",
"line-width": 1,
"marker": {
"size": 2
},
"tooltip": {
"visible": false
}
},
"plotarea": {
"margin-left": "dynamic",
"margin-right": "dynamic"
},
"series": [{
"scales": "scale-x,scale-y",
"values": [238.26, 296.39, 253.63, 227.46, 214.01, 281.04, 231.51, 270.49, 254.74, 205.42, 236.23, 280.34, 250.45, 235.23, 230.65, 264.3, 210.05, 227.32, 283.99, 291.33, 284.8, 265.78, 202.49, 196.26, 279.41, 216.84, 275.29, 237.88, 200.59, 277.93, 290.15, 228.29, 269.3, 208.45, 224.36, 235.1, 222.5, 225.74, 257.26, 238.19, 208.15, 262.7, 292.88, 249.27, 242.68, 284.41, 246.79, 275.96, 274.52, 227.52, 209.81, ]
},
{
"scales": "scale-x,scale-y",
"values": [222.35, 223.41, 231.7, 209.4, 267.92, 242.07, 240.77, 265.25, 248.61, 281.92, 208.79, 232.97, 261.69, 292.01, 234.55, 249.94, 283.59, 224.4, 214.54, 221.97, 249.76, 224.3, 199.3, 251.41, 212.45, 213.52, 265.36, 239.35, 294.6, 284.4, 279.2, 273.17, 233.7, 262.85, 229.6, 269.17, 283.09, 236.26, 260.48, 255.21, 258.17, 219.51, 292.4, 264.82, 251.74, 225.19, 206.59, 203.23, 258.26, 200.72, 237.82]
},
{
"scales": "scale-x,scale-y-2",
"values": [246.56, 238.11, 199.58, 280.72, 214.71, 272.44, 233.76, 261.87, 265.12, 289.71, 233.56, 283.31, 204.81, 205.74, 263.88, 259.66, 209.87, 274.01, 223.61, 268.21, 235.23, 274.51, 205.89, 258.19, 237.23, 253.15, 259.47, 223.6, 225.23, 271.84, 283.98, 197.06, 255.95, 290.45, 215.97, 274.32, 292.5, 249.58, 281.24, 281.72, 224.02, 268.25, 297.91, 244.88, 226.25, 238.71, 250.47, 273.18, 275.2, 286.43, 242.59]
},
{
"scales": "scale-x,scale-y-2",
"values": [237.24, 197.01, 245.34, 233.14, 270.46, 203.05, 209.58, 251.05, 272.23, 211.03, 270.73, 201.62, 297.4, 297.93, 266.05, 257.44, 211.75, 246.13, 266.55, 208.06, 275.1, 223.6, 219.1, 227.86, 267.24, 291.26, 279.71, 214.1, 205.26, 229.05, 205.04, 254.82, 276.28, 271.44, 292.41, 242.85, 209.33, 202.97, 264.79, 203.56, 287.11, 225.44, 200.12, 294.24, 208.64, 250.79, 231.06, 276.93, 233.46, 263.43, 282.04]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: "100%"
});
</script>
</body>
</html>
var myConfig = {
"type": "line",
"scale-y-n": {
"line-color": "red",
"line-width": 3,
"label": {
"font-color": "red",
"font-size": 20,
},
"item": {
"font-color": "red",
"font-size": 10,
"font-weight": "bold"
},
"tick": {
"line-color": "red",
"line-width": 3
}
},
"utc": true,
"timezone": 0,
"scale-x": {
"min-value": "1420146000000",
"step": "day",
"transform": {
"type": "date",
"all": "%m/%d"
},
"label": {
"text": "scale-x"
},
"item": {
"font-size": 10
}
},
"scale-y": {
"values": "150:350:50",
"format": "$%v",
"label": {
"text": "scale-y"
}
},
"scale-y-2": {
"values": "131:331:25",
"format": "%v €",
"label": {
"text": "scale-y-2"
}
},
"crosshair-x": {
"plot-label": {
"visible": false
}
},
"crosshair-y": {
"type": "multiple"
},
"plot": {
"aspect": "spline",
"line-width": 1,
"marker": {
"size": 2
},
"tooltip": {
"visible": false
}
},
"plotarea": {
"margin-left": "dynamic",
"margin-right": "dynamic"
},
"series": [{
"scales": "scale-x,scale-y",
"values": [238.26, 296.39, 253.63, 227.46, 214.01, 281.04, 231.51, 270.49, 254.74, 205.42, 236.23, 280.34, 250.45, 235.23, 230.65, 264.3, 210.05, 227.32, 283.99, 291.33, 284.8, 265.78, 202.49, 196.26, 279.41, 216.84, 275.29, 237.88, 200.59, 277.93, 290.15, 228.29, 269.3, 208.45, 224.36, 235.1, 222.5, 225.74, 257.26, 238.19, 208.15, 262.7, 292.88, 249.27, 242.68, 284.41, 246.79, 275.96, 274.52, 227.52, 209.81, ]
},
{
"scales": "scale-x,scale-y",
"values": [222.35, 223.41, 231.7, 209.4, 267.92, 242.07, 240.77, 265.25, 248.61, 281.92, 208.79, 232.97, 261.69, 292.01, 234.55, 249.94, 283.59, 224.4, 214.54, 221.97, 249.76, 224.3, 199.3, 251.41, 212.45, 213.52, 265.36, 239.35, 294.6, 284.4, 279.2, 273.17, 233.7, 262.85, 229.6, 269.17, 283.09, 236.26, 260.48, 255.21, 258.17, 219.51, 292.4, 264.82, 251.74, 225.19, 206.59, 203.23, 258.26, 200.72, 237.82]
},
{
"scales": "scale-x,scale-y-2",
"values": [246.56, 238.11, 199.58, 280.72, 214.71, 272.44, 233.76, 261.87, 265.12, 289.71, 233.56, 283.31, 204.81, 205.74, 263.88, 259.66, 209.87, 274.01, 223.61, 268.21, 235.23, 274.51, 205.89, 258.19, 237.23, 253.15, 259.47, 223.6, 225.23, 271.84, 283.98, 197.06, 255.95, 290.45, 215.97, 274.32, 292.5, 249.58, 281.24, 281.72, 224.02, 268.25, 297.91, 244.88, 226.25, 238.71, 250.47, 273.18, 275.2, 286.43, 242.59]
},
{
"scales": "scale-x,scale-y-2",
"values": [237.24, 197.01, 245.34, 233.14, 270.46, 203.05, 209.58, 251.05, 272.23, 211.03, 270.73, 201.62, 297.4, 297.93, 266.05, 257.44, 211.75, 246.13, 266.55, 208.06, 275.1, 223.6, 219.1, 227.86, 267.24, 291.26, 279.71, 214.1, 205.26, 229.05, 205.04, 254.82, 276.28, 271.44, 292.41, 242.85, 209.33, 202.97, 264.79, 203.56, 287.11, 225.44, 200.12, 294.24, 208.64, 250.79, 231.06, 276.93, 233.46, 263.43, 282.04]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: "100%"
});