<!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"]; var myConfig = { "type": "mixed", "title": { "text": "Bubble/Line Mixed Chart" }, "scale-x": { "labels": ["7:00", "7:15", "7:30", "7:45", "8:00", "8:15", "8:30"], "offset": 15 }, "scale-y": { "values": "0:80:20", "guide": { "visible": false }, "markers": [{ "type": "area", "range": [20, 60], "background-color": "#ffe5ff" }] }, "series": [{ "type": "line", "values": [19, 15, 39, 23, 37, 70, 30], "aspect": "spline", "line-color": "#ff5050", "marker": { "type": "square", "background-color": "#ff5050" }, "value-box": { "type": "first,last" } }, { "type": "line", "values": [15, 29, 21, 34, 59, 30, 71], "aspect": "spline", "line-color": "#666699", "marker": { "type": "diamond", "background-color": "#666699" }, "value-box": { "type": "first,last" } }, { "type": "bubble", "values": [ [3.4, 34, 30], [3.5, 61, 15], [3.6, 50, 7], [3.7, 21, 45], [4.1, 49, 31], [4.6, 39, 5], [5.1, 55, 33], [5.7, 43, 25], [5.8, 62, 5] ], "marker": { "background-color": "#660066" } } ] }; zingchart.render({ id: 'myChart', data: myConfig, height: "100%", width: "100%" }); </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, #myChart { height: 100%; width: 100%; }
var myConfig = { "type": "mixed", "title": { "text": "Bubble/Line Mixed Chart" }, "scale-x": { "labels": ["7:00", "7:15", "7:30", "7:45", "8:00", "8:15", "8:30"], "offset": 15 }, "scale-y": { "values": "0:80:20", "guide": { "visible": false }, "markers": [{ "type": "area", "range": [20, 60], "background-color": "#ffe5ff" }] }, "series": [{ "type": "line", "values": [19, 15, 39, 23, 37, 70, 30], "aspect": "spline", "line-color": "#ff5050", "marker": { "type": "square", "background-color": "#ff5050" }, "value-box": { "type": "first,last" } }, { "type": "line", "values": [15, 29, 21, 34, 59, 30, 71], "aspect": "spline", "line-color": "#666699", "marker": { "type": "diamond", "background-color": "#666699" }, "value-box": { "type": "first,last" } }, { "type": "bubble", "values": [ [3.4, 34, 30], [3.5, 61, 15], [3.6, 50, 7], [3.7, 21, 45], [4.1, 49, 31], [4.6, 39, 5], [5.1, 55, 33], [5.7, 43, 25], [5.8, 62, 5] ], "marker": { "background-color": "#660066" } } ] }; zingchart.render({ id: 'myChart', data: myConfig, height: "100%", width: "100%" });