• 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: 'area',
    35.       scaleX: {
    36.         labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
    37.         item: {
    38.           fontSize: 10
    39.         }
    40.       },
    41.       scaleY: {
    42.         item: {
    43.           fontSize: 10
    44.         },
    45.         guide: {
    46.           lineStyle: 'dotted'
    47.         }
    48.       },
    49.       plotarea: {
    50.         adjustLayout: true
    51.       },
    52.       plot: {
    53.         animation: {
    54.           effect: 10,
    55.           method: 0,
    56.           sequence: 1,
    57.           speed: 1
    58.         },
    59.         tooltip: {
    60.           text: '%t: %v',
    61.           borderRadius: '3px'
    62.         },
    63.         aspect: 'spline',
    64.         marker: {
    65.           size: 3,
    66.           borderWidth: 0
    67.         }
    68.       },
    69.       series: [{
    70.           values: [31, 66, 35, 33, 59, 61, 55],
    71.           lineColor: '#cc0052',
    72.           backgroundColor: '#cc0052',
    73.           marker: {
    74.             backgroundColor: '#cc0052'
    75.           },
    76.           mediaRules: [{
    77.               maxWidth: 500,
    78.               lineWidth: 1,
    79.               lineColor: '#006622',
    80.               backgroundColor: '#cc0052 #006622',
    81.               marker: {
    82.                 size: 2,
    83.                 backgroundColor: '#cc0052'
    84.               },
    85.               tooltip: {
    86.                 text: '%t:<br>%v'
    87.               }
    88.             },
    89.             {
    90.               maxWidth: 300,
    91.               lineColor: '#006622',
    92.               backgroundColor: '#006622',
    93.               marker: {
    94.                 visible: false
    95.               },
    96.               tooltip: {
    97.                 text: '%v'
    98.               }
    99.             }
    100.           ]
    101.         },
    102.         {
    103.           values: [40, 49, 15, 21, 70, 51, 69],
    104.           lineColor: '#e6005c',
    105.           backgroundColor: '#e6005c',
    106.           marker: {
    107.             backgroundColor: '#e6005c'
    108.           },
    109.           mediaRules: [{
    110.               maxWidth: 500,
    111.               lineWidth: 1,
    112.               lineColor: '#00802b',
    113.               backgroundColor: '#e6005c #00802b',
    114.               marker: {
    115.                 size: 2,
    116.                 backgroundColor: '#e6005c'
    117.               },
    118.               tooltip: {
    119.                 text: '%t:<br>%v'
    120.               }
    121.             },
    122.             {
    123.               maxWidth: 300,
    124.               lineColor: '#00802b',
    125.               backgroundColor: '#00802b',
    126.               marker: {
    127.                 visible: false
    128.               },
    129.               tooltip: {
    130.                 text: '%v'
    131.               }
    132.             }
    133.           ]
    134.         },
    135.         {
    136.           values: [33, 35, 17, 61, 66, 32, 35],
    137.           lineColor: '#ff0066',
    138.           backgroundColor: '#ff0066',
    139.           marker: {
    140.             backgroundColor: '#ff0066'
    141.           },
    142.           mediaRules: [{
    143.               maxWidth: 500,
    144.               lineWidth: 1,
    145.               lineColor: '#009933',
    146.               backgroundColor: '#ff0066 #009933',
    147.               marker: {
    148.                 size: 2,
    149.                 backgroundColor: '#ff0066'
    150.               },
    151.               tooltip: {
    152.                 text: '%t:<br>%v'
    153.               }
    154.             },
    155.             {
    156.               maxWidth: 300,
    157.               lineColor: '#009933',
    158.               backgroundColor: '#009933',
    159.               marker: {
    160.                 visible: false
    161.               },
    162.               tooltip: {
    163.                 text: '%v'
    164.               }
    165.             }
    166.           ]
    167.         },
    168.         {
    169.           values: [21, 25, 59, 70, 81, 23, 61],
    170.           lineColor: '#ff1a75',
    171.           backgroundColor: '#ff1a75',
    172.           marker: {
    173.             backgroundColor: '#ff1a75'
    174.           },
    175.           mediaRules: [{
    176.               maxWidth: 500,
    177.               lineWidth: 1,
    178.               lineColor: '#00b33c',
    179.               backgroundColor: '#ff1a75 #00b33c',
    180.               marker: {
    181.                 size: 2,
    182.                 backgroundColor: '#ff1a75'
    183.               },
    184.               tooltip: {
    185.                 text: '%t:<br>%v'
    186.               }
    187.             },
    188.             {
    189.               maxWidth: 300,
    190.               lineColor: '#00b33c',
    191.               backgroundColor: '#00b33c',
    192.               marker: {
    193.                 visible: false
    194.               },
    195.               tooltip: {
    196.                 text: '%v'
    197.               }
    198.             }
    199.           ]
    200.         },
    201.         {
    202.           values: [61, 81, 91, 30, 14, 26, 19],
    203.           lineColor: '#ff3385',
    204.           backgroundColor: '#ff3385',
    205.           marker: {
    206.             backgroundColor: '#ff3385'
    207.           },
    208.           mediaRules: [{
    209.               maxWidth: 500,
    210.               lineWidth: 1,
    211.               lineColor: '#00cc44',
    212.               backgroundColor: '#ff3385 #00cc44',
    213.               marker: {
    214.                 size: 2,
    215.                 backgroundColor: '#ff3385'
    216.               },
    217.               tooltip: {
    218.                 text: '%t:<br>%v'
    219.               }
    220.             },
    221.             {
    222.               maxWidth: 300,
    223.               lineColor: '#00cc44',
    224.               backgroundColor: '#00cc44',
    225.               marker: {
    226.                 visible: false
    227.               },
    228.               tooltip: {
    229.                 text: '%v'
    230.               }
    231.             }
    232.           ]
    233.         },
    234.         {
    235.           values: [11, 19, 81, 40, 40, 81, 51],
    236.           lineColor: '#ff4d94',
    237.           backgroundColor: '#ff4d94',
    238.           marker: {
    239.             backgroundColor: '#ff4d94'
    240.           },
    241.           mediaRules: [{
    242.               maxWidth: 500,
    243.               lineWidth: 1,
    244.               lineColor: '#00e64d',
    245.               backgroundColor: '#ff4d94 #00e64d',
    246.               marker: {
    247.                 size: 2,
    248.                 backgroundColor: '#ff4d94'
    249.               },
    250.               tooltip: {
    251.                 text: '%t:<br>%v'
    252.               }
    253.             },
    254.             {
    255.               maxWidth: 300,
    256.               lineColor: '#00e64d',
    257.               backgroundColor: '#00e64d',
    258.               marker: {
    259.                 visible: false
    260.               },
    261.               tooltip: {
    262.                 text: '%v'
    263.               }
    264.             }
    265.           ]
    266.         }
    267.       ]
    268.     };
    269.  
    270.     // adjust the refresh rate of the chart
    271.     zingchart.DEV.RESIZESPEED = 50;
    272.     zingchart.DEV.DEBOUNCESPEED = 50;
    273.  
    274.     zingchart.render({
    275.       id: 'myChart',
    276.       data: chartConfig,
    277.       height: '100%',
    278.       width: '100%'
    279.     });
    280.  
    281.     // initiate jquery resizable container for demo purposes
    282.     $('.container').resizable();
    283.   </script>
    284. </body>
    285.  
    286. </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: 'area',
    3.   scaleX: {
    4.     labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
    5.     item: {
    6.       fontSize: 10
    7.     }
    8.   },
    9.   scaleY: {
    10.     item: {
    11.       fontSize: 10
    12.     },
    13.     guide: {
    14.       lineStyle: 'dotted'
    15.     }
    16.   },
    17.   plotarea: {
    18.     adjustLayout: true
    19.   },
    20.   plot: {
    21.     animation: {
    22.       effect: 10,
    23.       method: 0,
    24.       sequence: 1,
    25.       speed: 1
    26.     },
    27.     tooltip: {
    28.       text: '%t: %v',
    29.       borderRadius: '3px'
    30.     },
    31.     aspect: 'spline',
    32.     marker: {
    33.       size: 3,
    34.       borderWidth: 0
    35.     }
    36.   },
    37.   series: [{
    38.       values: [31, 66, 35, 33, 59, 61, 55],
    39.       lineColor: '#cc0052',
    40.       backgroundColor: '#cc0052',
    41.       marker: {
    42.         backgroundColor: '#cc0052'
    43.       },
    44.       mediaRules: [{
    45.           maxWidth: 500,
    46.           lineWidth: 1,
    47.           lineColor: '#006622',
    48.           backgroundColor: '#cc0052 #006622',
    49.           marker: {
    50.             size: 2,
    51.             backgroundColor: '#cc0052'
    52.           },
    53.           tooltip: {
    54.             text: '%t:<br>%v'
    55.           }
    56.         },
    57.         {
    58.           maxWidth: 300,
    59.           lineColor: '#006622',
    60.           backgroundColor: '#006622',
    61.           marker: {
    62.             visible: false
    63.           },
    64.           tooltip: {
    65.             text: '%v'
    66.           }
    67.         }
    68.       ]
    69.     },
    70.     {
    71.       values: [40, 49, 15, 21, 70, 51, 69],
    72.       lineColor: '#e6005c',
    73.       backgroundColor: '#e6005c',
    74.       marker: {
    75.         backgroundColor: '#e6005c'
    76.       },
    77.       mediaRules: [{
    78.           maxWidth: 500,
    79.           lineWidth: 1,
    80.           lineColor: '#00802b',
    81.           backgroundColor: '#e6005c #00802b',
    82.           marker: {
    83.             size: 2,
    84.             backgroundColor: '#e6005c'
    85.           },
    86.           tooltip: {
    87.             text: '%t:<br>%v'
    88.           }
    89.         },
    90.         {
    91.           maxWidth: 300,
    92.           lineColor: '#00802b',
    93.           backgroundColor: '#00802b',
    94.           marker: {
    95.             visible: false
    96.           },
    97.           tooltip: {
    98.             text: '%v'
    99.           }
    100.         }
    101.       ]
    102.     },
    103.     {
    104.       values: [33, 35, 17, 61, 66, 32, 35],
    105.       lineColor: '#ff0066',
    106.       backgroundColor: '#ff0066',
    107.       marker: {
    108.         backgroundColor: '#ff0066'
    109.       },
    110.       mediaRules: [{
    111.           maxWidth: 500,
    112.           lineWidth: 1,
    113.           lineColor: '#009933',
    114.           backgroundColor: '#ff0066 #009933',
    115.           marker: {
    116.             size: 2,
    117.             backgroundColor: '#ff0066'
    118.           },
    119.           tooltip: {
    120.             text: '%t:<br>%v'
    121.           }
    122.         },
    123.         {
    124.           maxWidth: 300,
    125.           lineColor: '#009933',
    126.           backgroundColor: '#009933',
    127.           marker: {
    128.             visible: false
    129.           },
    130.           tooltip: {
    131.             text: '%v'
    132.           }
    133.         }
    134.       ]
    135.     },
    136.     {
    137.       values: [21, 25, 59, 70, 81, 23, 61],
    138.       lineColor: '#ff1a75',
    139.       backgroundColor: '#ff1a75',
    140.       marker: {
    141.         backgroundColor: '#ff1a75'
    142.       },
    143.       mediaRules: [{
    144.           maxWidth: 500,
    145.           lineWidth: 1,
    146.           lineColor: '#00b33c',
    147.           backgroundColor: '#ff1a75 #00b33c',
    148.           marker: {
    149.             size: 2,
    150.             backgroundColor: '#ff1a75'
    151.           },
    152.           tooltip: {
    153.             text: '%t:<br>%v'
    154.           }
    155.         },
    156.         {
    157.           maxWidth: 300,
    158.           lineColor: '#00b33c',
    159.           backgroundColor: '#00b33c',
    160.           marker: {
    161.             visible: false
    162.           },
    163.           tooltip: {
    164.             text: '%v'
    165.           }
    166.         }
    167.       ]
    168.     },
    169.     {
    170.       values: [61, 81, 91, 30, 14, 26, 19],
    171.       lineColor: '#ff3385',
    172.       backgroundColor: '#ff3385',
    173.       marker: {
    174.         backgroundColor: '#ff3385'
    175.       },
    176.       mediaRules: [{
    177.           maxWidth: 500,
    178.           lineWidth: 1,
    179.           lineColor: '#00cc44',
    180.           backgroundColor: '#ff3385 #00cc44',
    181.           marker: {
    182.             size: 2,
    183.             backgroundColor: '#ff3385'
    184.           },
    185.           tooltip: {
    186.             text: '%t:<br>%v'
    187.           }
    188.         },
    189.         {
    190.           maxWidth: 300,
    191.           lineColor: '#00cc44',
    192.           backgroundColor: '#00cc44',
    193.           marker: {
    194.             visible: false
    195.           },
    196.           tooltip: {
    197.             text: '%v'
    198.           }
    199.         }
    200.       ]
    201.     },
    202.     {
    203.       values: [11, 19, 81, 40, 40, 81, 51],
    204.       lineColor: '#ff4d94',
    205.       backgroundColor: '#ff4d94',
    206.       marker: {
    207.         backgroundColor: '#ff4d94'
    208.       },
    209.       mediaRules: [{
    210.           maxWidth: 500,
    211.           lineWidth: 1,
    212.           lineColor: '#00e64d',
    213.           backgroundColor: '#ff4d94 #00e64d',
    214.           marker: {
    215.             size: 2,
    216.             backgroundColor: '#ff4d94'
    217.           },
    218.           tooltip: {
    219.             text: '%t:<br>%v'
    220.           }
    221.         },
    222.         {
    223.           maxWidth: 300,
    224.           lineColor: '#00e64d',
    225.           backgroundColor: '#00e64d',
    226.           marker: {
    227.             visible: false
    228.           },
    229.           tooltip: {
    230.             text: '%v'
    231.           }
    232.         }
    233.       ]
    234.     }
    235.   ]
    236. };
    237.  
    238. // adjust the refresh rate of the chart
    239. zingchart.DEV.RESIZESPEED = 50;
    240. zingchart.DEV.DEBOUNCESPEED = 50;
    241.  
    242. zingchart.render({
    243.   id: 'myChart',
    244.   data: chartConfig,
    245.   height: '100%',
    246.   width: '100%'
    247. });
    248.  
    249. // initiate jquery resizable container for demo purposes
    250. $('.container').resizable();