• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
    8.   <script nonce="undefined" src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
    9.   <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    10.  
    11.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    12.   <style>
    13.     .container {
    14.       width: 400px;
    15.       height: 200px;
    16.       min-width: 400px;
    17.       border: 1px dashed #777;
    18.     }
    19.  
    20.     #myChart {
    21.       width: 100%;
    22.       height: 100%;
    23.     }
    24.   </style>
    25. </head>
    26.  
    27. <body>
    28.   <div class='container'>
    29.     <div id='myChart'></div>
    30.   </div>
    31.   <script>
    32.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    33.     let chartConfig = {
    34.       type: 'scatter',
    35.       title: {
    36.         text: 'Tooltips at 100% width',
    37.         adjustLayout: true,
    38.         fontFamily: 'Georgia',
    39.         fontSize: 20,
    40.         mediaRules: [{
    41.             maxWidth: 500,
    42.             text: 'Tooltips at 500 pixels',
    43.             fontSize: 14
    44.           },
    45.           {
    46.             maxWidth: 300,
    47.             text: 'Tooltips at 300 pixels',
    48.             fontSize: 12,
    49.             fontWeight: 'normal'
    50.           }
    51.         ]
    52.       },
    53.       plotarea: {
    54.         adjustLayout: true
    55.       },
    56.       plot: {
    57.         tooltip: {
    58.           text: '%t:<br>%v particles',
    59.           fontFamily: 'Georgia',
    60.           fontColor: '#333333',
    61.           fontAlpha: 1,
    62.           backgroundColor: 'white',
    63.           alpha: 0.8,
    64.           borderWidth: 1,
    65.           borderColor: '#ff6600',
    66.           borderRadius: '3px',
    67.           lineStyle: 'dashdot',
    68.           mediaRules: [{
    69.               maxWidth: 500,
    70.               fontSize: 11,
    71.               borderColor: '#ff66cc',
    72.               lineStyle: 'dotted'
    73.             },
    74.             {
    75.               maxWidth: 300,
    76.               fontSize: 10,
    77.               fontFamily: 'Arial',
    78.               borderColor: '#9933ff',
    79.               lineStyle: 'solid'
    80.             }
    81.           ]
    82.         },
    83.         marker: {
    84.           size: 4,
    85.         },
    86.         hoverMarker: {
    87.           size: 6,
    88.           borderWidth: 1,
    89.           borderColor: 'white'
    90.         }
    91.       },
    92.       scaleX: {
    93.         values: '0:10:2',
    94.         decimals: 1,
    95.         item: {
    96.           fontSize: 10
    97.         },
    98.         guide: {
    99.           alpha: 1,
    100.           lineColor: '#bfbfbf',
    101.           lineStyle: 'solid'
    102.         },
    103.         minorTicks: 4,
    104.         minorGuide: {
    105.           alpha: 1,
    106.           lineColor: '#e6e6e6',
    107.           lineStyle: 'solid'
    108.         }
    109.       },
    110.       scaleY: {
    111.         values: '0:100:25',
    112.         item: {
    113.           fontSize: 10
    114.         },
    115.         guide: {
    116.           alpha: 1,
    117.           lineColor: '#bfbfbf',
    118.           lineStyle: 'solid'
    119.         },
    120.         minorTicks: 4,
    121.         minorGuide: {
    122.           alpha: 1,
    123.           lineColor: '#e6e6e6',
    124.           lineStyle: 'solid'
    125.         }
    126.       },
    127.       series: [{
    128.           values: [
    129.             [1, 9],
    130.             [2, 15],
    131.             [3, 21],
    132.             [4, 30],
    133.             [5, 40],
    134.             [6, 59],
    135.             [7, 60],
    136.             [8, 75],
    137.             [9, 81],
    138.             [10, 99]
    139.           ],
    140.           marker: {
    141.             backgroundColor: '#006666'
    142.           },
    143.           text: 'Test 1-001A3'
    144.         },
    145.         {
    146.           values: [
    147.             [0.9, 3],
    148.             [2.1, 13],
    149.             [3.5, 25],
    150.             [4.9, 35],
    151.             [5.3, 41],
    152.             [6.5, 57],
    153.             [7.1, 61],
    154.             [8.7, 70],
    155.             [9.2, 82],
    156.             [9.9, 95]
    157.           ],
    158.           marker: {
    159.             backgroundColor: '#006699'
    160.           },
    161.           text: 'Test 2-002B4'
    162.         },
    163.         {
    164.           values: [
    165.             [0.1, 9],
    166.             [1.8, 21],
    167.             [1.9, 29],
    168.             [4.1, 33],
    169.             [4.5, 39],
    170.             [6.9, 51],
    171.             [7.4, 64],
    172.             [8.9, 70],
    173.             [9, 75],
    174.             [9.3, 93]
    175.           ],
    176.           marker: {
    177.             backgroundColor: '#0099cc'
    178.           },
    179.           text: 'Test 3-004C3'
    180.         },
    181.         {
    182.           values: [
    183.             [0.3, 11],
    184.             [0.9, 15],
    185.             [1.1, 24],
    186.             [2.3, 29],
    187.             [2.9, 30],
    188.             [3.3, 35],
    189.             [5.6, 67],
    190.             [6.9, 70],
    191.             [7.3, 71],
    192.             [8.9, 90]
    193.           ],
    194.           marker: {
    195.             backgroundColor: '#0066cc'
    196.           },
    197.           text: 'Test 4-004D1'
    198.         },
    199.         {
    200.           values: [
    201.             [0.5, 5],
    202.             [1.9, 5],
    203.             [2.5, 10],
    204.             [3.1, 30],
    205.             [6.5, 45],
    206.             [6.9, 74],
    207.             [7.2, 50],
    208.             [7.8, 56],
    209.             [8, 61],
    210.             [8.5, 71]
    211.           ],
    212.           marker: {
    213.             backgroundColor: '#0033cc'
    214.           },
    215.           text: 'Test 5-034CE'
    216.         }
    217.       ]
    218.     };
    219.  
    220.     // adjust the refresh rate of the chart
    221.     zingchart.DEV.RESIZESPEED = 50;
    222.     zingchart.DEV.DEBOUNCESPEED = 50;
    223.  
    224.     zingchart.render({
    225.       id: 'myChart',
    226.       data: chartConfig,
    227.       height: '100%',
    228.       width: '100%'
    229.     });
    230.  
    231.     // initiate jquery resizable container for demo purposes
    232.     $('.container').resizable();
    233.   </script>
    234. </body>
    235.  
    236. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
    8.   <script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
    9.   <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    10.  
    11.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.   <div class='container'>
    16.     <div id='myChart'></div>
    17.   </div>
    18. </body>
    19.  
    20. </html>
    1. .container {
    2.   width: 400px;
    3.   height: 200px;
    4.   min-width: 400px;
    5.   border: 1px dashed #777;
    6. }
    7.  
    8. #myChart {
    9.   width: 100%;
    10.   height: 100%;
    11. }
    1. let chartConfig = {
    2.   type: 'scatter',
    3.   title: {
    4.     text: 'Tooltips at 100% width',
    5.     adjustLayout: true,
    6.     fontFamily: 'Georgia',
    7.     fontSize: 20,
    8.     mediaRules: [{
    9.         maxWidth: 500,
    10.         text: 'Tooltips at 500 pixels',
    11.         fontSize: 14
    12.       },
    13.       {
    14.         maxWidth: 300,
    15.         text: 'Tooltips at 300 pixels',
    16.         fontSize: 12,
    17.         fontWeight: 'normal'
    18.       }
    19.     ]
    20.   },
    21.   plotarea: {
    22.     adjustLayout: true
    23.   },
    24.   plot: {
    25.     tooltip: {
    26.       text: '%t:<br>%v particles',
    27.       fontFamily: 'Georgia',
    28.       fontColor: '#333333',
    29.       fontAlpha: 1,
    30.       backgroundColor: 'white',
    31.       alpha: 0.8,
    32.       borderWidth: 1,
    33.       borderColor: '#ff6600',
    34.       borderRadius: '3px',
    35.       lineStyle: 'dashdot',
    36.       mediaRules: [{
    37.           maxWidth: 500,
    38.           fontSize: 11,
    39.           borderColor: '#ff66cc',
    40.           lineStyle: 'dotted'
    41.         },
    42.         {
    43.           maxWidth: 300,
    44.           fontSize: 10,
    45.           fontFamily: 'Arial',
    46.           borderColor: '#9933ff',
    47.           lineStyle: 'solid'
    48.         }
    49.       ]
    50.     },
    51.     marker: {
    52.       size: 4,
    53.     },
    54.     hoverMarker: {
    55.       size: 6,
    56.       borderWidth: 1,
    57.       borderColor: 'white'
    58.     }
    59.   },
    60.   scaleX: {
    61.     values: '0:10:2',
    62.     decimals: 1,
    63.     item: {
    64.       fontSize: 10
    65.     },
    66.     guide: {
    67.       alpha: 1,
    68.       lineColor: '#bfbfbf',
    69.       lineStyle: 'solid'
    70.     },
    71.     minorTicks: 4,
    72.     minorGuide: {
    73.       alpha: 1,
    74.       lineColor: '#e6e6e6',
    75.       lineStyle: 'solid'
    76.     }
    77.   },
    78.   scaleY: {
    79.     values: '0:100:25',
    80.     item: {
    81.       fontSize: 10
    82.     },
    83.     guide: {
    84.       alpha: 1,
    85.       lineColor: '#bfbfbf',
    86.       lineStyle: 'solid'
    87.     },
    88.     minorTicks: 4,
    89.     minorGuide: {
    90.       alpha: 1,
    91.       lineColor: '#e6e6e6',
    92.       lineStyle: 'solid'
    93.     }
    94.   },
    95.   series: [{
    96.       values: [
    97.         [1, 9],
    98.         [2, 15],
    99.         [3, 21],
    100.         [4, 30],
    101.         [5, 40],
    102.         [6, 59],
    103.         [7, 60],
    104.         [8, 75],
    105.         [9, 81],
    106.         [10, 99]
    107.       ],
    108.       marker: {
    109.         backgroundColor: '#006666'
    110.       },
    111.       text: 'Test 1-001A3'
    112.     },
    113.     {
    114.       values: [
    115.         [0.9, 3],
    116.         [2.1, 13],
    117.         [3.5, 25],
    118.         [4.9, 35],
    119.         [5.3, 41],
    120.         [6.5, 57],
    121.         [7.1, 61],
    122.         [8.7, 70],
    123.         [9.2, 82],
    124.         [9.9, 95]
    125.       ],
    126.       marker: {
    127.         backgroundColor: '#006699'
    128.       },
    129.       text: 'Test 2-002B4'
    130.     },
    131.     {
    132.       values: [
    133.         [0.1, 9],
    134.         [1.8, 21],
    135.         [1.9, 29],
    136.         [4.1, 33],
    137.         [4.5, 39],
    138.         [6.9, 51],
    139.         [7.4, 64],
    140.         [8.9, 70],
    141.         [9, 75],
    142.         [9.3, 93]
    143.       ],
    144.       marker: {
    145.         backgroundColor: '#0099cc'
    146.       },
    147.       text: 'Test 3-004C3'
    148.     },
    149.     {
    150.       values: [
    151.         [0.3, 11],
    152.         [0.9, 15],
    153.         [1.1, 24],
    154.         [2.3, 29],
    155.         [2.9, 30],
    156.         [3.3, 35],
    157.         [5.6, 67],
    158.         [6.9, 70],
    159.         [7.3, 71],
    160.         [8.9, 90]
    161.       ],
    162.       marker: {
    163.         backgroundColor: '#0066cc'
    164.       },
    165.       text: 'Test 4-004D1'
    166.     },
    167.     {
    168.       values: [
    169.         [0.5, 5],
    170.         [1.9, 5],
    171.         [2.5, 10],
    172.         [3.1, 30],
    173.         [6.5, 45],
    174.         [6.9, 74],
    175.         [7.2, 50],
    176.         [7.8, 56],
    177.         [8, 61],
    178.         [8.5, 71]
    179.       ],
    180.       marker: {
    181.         backgroundColor: '#0033cc'
    182.       },
    183.       text: 'Test 5-034CE'
    184.     }
    185.   ]
    186. };
    187.  
    188. // adjust the refresh rate of the chart
    189. zingchart.DEV.RESIZESPEED = 50;
    190. zingchart.DEV.DEBOUNCESPEED = 50;
    191.  
    192. zingchart.render({
    193.   id: 'myChart',
    194.   data: chartConfig,
    195.   height: '100%',
    196.   width: '100%'
    197. });
    198.  
    199. // initiate jquery resizable container for demo purposes
    200. $('.container').resizable();