<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <!--ZingChart Mobile--> <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script> <script nonce="undefined" src="https://cdn.zingchart.com/modules/zingchart-mobile.min.js"></script> <link rel="stylesheet" href="https://cdn.zingchart.com/modules/zingchart-mobile.min.css"> <!--ZingChart Mobile End--> <style> @import 'https://fonts.googleapis.com/css?family=Open+Sans'; #container { display: flex; justify-content: center; margin: 0; } #myChart { margin: 0; height: 667px; width: 250px; border-radius: 5px; } </style> </head> <body> <div id="container"> <div id='myChart'></div> </div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; var myConfig = { type: 'bubble', globals: { fontFamily: 'Open sans', color: '#757575' }, plotarea: { margin: 'dynamic' }, options: { mobile: true }, backgroundColor: '#212121', scaleX: { zooming: true, //allows for zooming on the x-axis values: '0:10:1' }, scaleY: { zooming: true, //allows for zooming on the y-axis values: '0:100:10' }, 'series': [{ 'values': [ [3, 21, 30], [6, 59, 21], [10, 99, 12] ], marker: { backgroundColor: '#76FF03', borderColor: 'none' } }, { 'values': [ [7, 60, 25], [8, 75, 85], [4, 30, 5], ], marker: { backgroundColor: '#00E5FF', borderColor: 'none' } } ] }; zingchart.render({ id: 'myChart', data: myConfig, }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <!--ZingChart Mobile--> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> <script src="https://cdn.zingchart.com/modules/zingchart-mobile.min.js"></script> <link rel="stylesheet" href="https://cdn.zingchart.com/modules/zingchart-mobile.min.css"> <!--ZingChart Mobile End--> </head> <body> <div id="container"> <div id='myChart'></div> </div> </body> </html>
@import 'https://fonts.googleapis.com/css?family=Open+Sans'; #container { display: flex; justify-content: center; margin: 0; } #myChart { margin: 0; height: 667px; width: 250px; border-radius: 5px; }
var myConfig = { type: 'bubble', globals: { fontFamily: 'Open sans', color: '#757575' }, plotarea: { margin: 'dynamic' }, options: { mobile: true }, backgroundColor: '#212121', scaleX: { zooming: true, //allows for zooming on the x-axis values: '0:10:1' }, scaleY: { zooming: true, //allows for zooming on the y-axis values: '0:100:10' }, 'series': [{ 'values': [ [3, 21, 30], [6, 59, 21], [10, 99, 12] ], marker: { backgroundColor: '#76FF03', borderColor: 'none' } }, { 'values': [ [7, 60, 25], [8, 75, 85], [4, 30, 5], ], marker: { backgroundColor: '#00E5FF', borderColor: 'none' } } ] }; zingchart.render({ id: 'myChart', data: myConfig, });