<!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 {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
</style>
</head>
<body>
<div id="myChart"></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var values = [0, 2.81, 5.61, 8.38];
var chartData = {
"type": "line", // Specify your chart type here.
"background-color": "#f4f4f4",
"scale-x": {
"zooming": true
},
"plot": {
// "mode":"fast",
"exact": true,
// "smartSampling":true,
// "maxNodes":0,
// "maxTrackers":0,
"lineWidth": 2,
"shadow": false,
"marker": {
"type": "none",
"shadow": false
}
},
"plotarea": {
"background-color": "#fbfbfb",
"margin-top": "30px",
"margin-bottom": "40px",
"margin-left": "50px",
"margin-right": "30px"
},
"scaleX": {
"autoFit": true,
"zooming": true,
"normalize": true,
"lineWidth": 1,
"line-color": "#c7c9c9",
"tick": {
"lineWidth": 1,
"line-color": "#c7c9c9"
},
"guide": {
"visible": false
},
"item": {
"font-color": "#818181",
"font-family": "Arial",
"padding-top": "5px"
},
"maxLabels": 10
},
"scrollX": {},
"scaleY": {
"minValue": "auto",
"autoFit": true,
"lineWidth": 1,
"line-color": "#c7c9c9",
"tick": {
"lineWidth": 1,
"line-color": "#c7c9c9"
},
"item": {
"font-color": "#818181",
"font-family": "Arial",
"padding-right": "5px"
},
"guide": {
"lineStyle": "solid",
"line-color": "#c7c9c9",
"alpha": 0.2
}
},
"tooltip": {
"visible": false
},
"crosshairX": {
"lineWidth": 1,
"line-color": "#003849",
"marker": {
"size": 4,
"type": "circle",
"borderColor": "#fff",
"borderWidth": 1
},
"scale-label": {
"font-color": "#ffffff",
"background-color": "#003849",
"padding": "5px 10px 5px 10px",
"border-radius": "5px"
},
// "plotLabel":{
// "multiple":false,
// "callout":false,
// "shadow":false,
// "height":"115px",
// "padding":"5px 10px 5px 10px",
// "border-radius":"5px",
// "alpha":1,
// "headerText":"Node %scale-key-text<br>",
// "text":"<b>%plot-text:</b> %node-value"
// }
},
"series": [ // Insert your series data here.
{
"text": "P1",
"values": values,
"line-color": "#7ca82b",
"line-width": 1
},
]
};
zingchart.render({
id: 'myChart',
data: chartData,
height: '100%',
width: '100%'
});
zingchart.bind('myChart', 'click', function(e) {
var xyInformation = zingchart.exec('myChart', 'getxyinfo', {
x: e.x,
y: e.y
});
console.log(xyInformation)
});
</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>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
var values = [0, 2.81, 5.61, 8.38];
var chartData = {
"type": "line", // Specify your chart type here.
"background-color": "#f4f4f4",
"scale-x": {
"zooming": true
},
"plot": {
// "mode":"fast",
"exact": true,
// "smartSampling":true,
// "maxNodes":0,
// "maxTrackers":0,
"lineWidth": 2,
"shadow": false,
"marker": {
"type": "none",
"shadow": false
}
},
"plotarea": {
"background-color": "#fbfbfb",
"margin-top": "30px",
"margin-bottom": "40px",
"margin-left": "50px",
"margin-right": "30px"
},
"scaleX": {
"autoFit": true,
"zooming": true,
"normalize": true,
"lineWidth": 1,
"line-color": "#c7c9c9",
"tick": {
"lineWidth": 1,
"line-color": "#c7c9c9"
},
"guide": {
"visible": false
},
"item": {
"font-color": "#818181",
"font-family": "Arial",
"padding-top": "5px"
},
"maxLabels": 10
},
"scrollX": {},
"scaleY": {
"minValue": "auto",
"autoFit": true,
"lineWidth": 1,
"line-color": "#c7c9c9",
"tick": {
"lineWidth": 1,
"line-color": "#c7c9c9"
},
"item": {
"font-color": "#818181",
"font-family": "Arial",
"padding-right": "5px"
},
"guide": {
"lineStyle": "solid",
"line-color": "#c7c9c9",
"alpha": 0.2
}
},
"tooltip": {
"visible": false
},
"crosshairX": {
"lineWidth": 1,
"line-color": "#003849",
"marker": {
"size": 4,
"type": "circle",
"borderColor": "#fff",
"borderWidth": 1
},
"scale-label": {
"font-color": "#ffffff",
"background-color": "#003849",
"padding": "5px 10px 5px 10px",
"border-radius": "5px"
},
// "plotLabel":{
// "multiple":false,
// "callout":false,
// "shadow":false,
// "height":"115px",
// "padding":"5px 10px 5px 10px",
// "border-radius":"5px",
// "alpha":1,
// "headerText":"Node %scale-key-text<br>",
// "text":"<b>%plot-text:</b> %node-value"
// }
},
"series": [ // Insert your series data here.
{
"text": "P1",
"values": values,
"line-color": "#7ca82b",
"line-width": 1
},
]
};
zingchart.render({
id: 'myChart',
data: chartData,
height: '100%',
width: '100%'
});
zingchart.bind('myChart', 'click', function(e) {
var xyInformation = zingchart.exec('myChart', 'getxyinfo', {
x: e.x,
y: e.y
});
console.log(xyInformation)
});