• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body,
    12.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     let chartConfig = {
    24.       graphset: [{
    25.         type: 'null',
    26.         tooltip: {
    27.           padding: '10 20',
    28.           backgroundColor: '#333',
    29.           color: '#fff',
    30.           callout: true,
    31.           calloutPosition: 'bottom',
    32.           borderRadius: 10
    33.         },
    34.         shapes: [{
    35.             type: 'rect',
    36.             id: 'rect',
    37.             borderWidth: 2,
    38.             alpha: 0.5,
    39.             borderColor: '#f0f',
    40.             backgroundColor: '#09f #f09',
    41.             x: 50,
    42.             y: 100,
    43.             width: 50,
    44.             height: 100,
    45.             hoverState: {
    46.               backgroundColor: '#eee',
    47.               alpha: 0.4
    48.             },
    49.             label: {
    50.               text: 'Rect',
    51.               borderColor: '#333',
    52.               borderWidth: 2,
    53.               padding: 5,
    54.               alpha: 0.8
    55.             },
    56.             topState: {
    57.               backgroundColor: 'red',
    58.               offsetX: '10px',
    59.               offsetY: '10px',
    60.             },
    61.           },
    62.           {
    63.             type: 'circle',
    64.             id: 'mycircle',
    65.             borderWidth: 2,
    66.             borderColor: '#f00',
    67.             backgroundColor: '#FF5722',
    68.             x: 150,
    69.             y: 100,
    70.             size: 40,
    71.             hoverState: {
    72.               backgroundColor: '#ff3d00'
    73.             },
    74.             label: {
    75.               text: 'Circle'
    76.             },
    77.             topState: {
    78.               backgroundColor: 'red',
    79.               offsetX: '10px',
    80.               offsetY: '10px',
    81.             },
    82.           },
    83.           {
    84.             type: 'pie',
    85.             id: 'myPie',
    86.             borderWidth: 2,
    87.             borderColor: '#FFC107',
    88.             backgroundColor: '#FFEB3B',
    89.             x: 250,
    90.             y: 100,
    91.             size: 40,
    92.             angleStart: 0,
    93.             angleEnd: 330,
    94.             hoverState: {
    95.               alpha: 1,
    96.               angleEnd: 358,
    97.               backgroundColor: '#39d474',
    98.               borderColor: '#00ac42'
    99.             },
    100.             label: {
    101.               text: 'Pie',
    102.               padding: '2 4',
    103.               offsetY: 20
    104.             },
    105.             topState: {
    106.               backgroundColor: 'red',
    107.               offsetX: '10px',
    108.               offsetY: '10px',
    109.             },
    110.           },
    111.           {
    112.             type: 'star5',
    113.             id: 'myStar5',
    114.             borderWidth: 2,
    115.             borderColor: '#01579B',
    116.             backgroundColor: '#0277BD #4FC3F7',
    117.             x: 360,
    118.             y: 100,
    119.             size: 25,
    120.             hoverState: {
    121.               backgroundColor: '#039BE5 #FFF',
    122.               size: 38,
    123.               type: 'star8',
    124.               alpha: 1
    125.             },
    126.             label: {
    127.               text: 'Star 5',
    128.               padding: '2 4'
    129.             },
    130.             topState: {
    131.               backgroundColor: 'red',
    132.               offsetX: '10px',
    133.               offsetY: '10px',
    134.             },
    135.           },
    136.           {
    137.             type: 'star9',
    138.             id: 'myStar9',
    139.             borderWidth: 2,
    140.             borderColor: '#E65100',
    141.             fillType: 'radial',
    142.             gradientColors: '#FFF59D #FFC107 #F4511E',
    143.             gradientStops: '0.1 0.5 0.9',
    144.             x: 500,
    145.             y: 100,
    146.             size: 50,
    147.             label: {
    148.               text: 'Star 9',
    149.               fontColor: '#4d4d4d',
    150.               fontWeight: 'bold',
    151.               fontSize: 20,
    152.               padding: 10
    153.             },
    154.             hoverState: {
    155.               gradientColors: '#FBC02D #FFA000 #E65100',
    156.               gradientStops: '0.1 0.5 0.9'
    157.             },
    158.             topState: {
    159.               backgroundColor: 'red',
    160.               offsetX: '10px',
    161.               offsetY: '10px',
    162.             },
    163.           },
    164.           {
    165.             type: 'pie',
    166.             id: 'myRing',
    167.             borderWidth: 0,
    168.             backgroundColor: '#DCEDC8 #7CB342',
    169.             shadow: 0.4,
    170.             shadowDistance: 5,
    171.             hoverState: {
    172.               backgroundColor: '#FFEB3B #F44336',
    173.               angleStart: 180,
    174.               angleEnd: 540
    175.             },
    176.             x: 70,
    177.             y: 230,
    178.             size: 50,
    179.             slice: 30,
    180.             angleStart: 180,
    181.             angleEnd: 450,
    182.             tooltip: {
    183.               text: 'Gauge'
    184.             },
    185.             label: {
    186.               text: 'Ring'
    187.             },
    188.             topState: {
    189.               backgroundColor: 'red',
    190.               offsetX: '10px',
    191.               offsetY: '10px',
    192.             },
    193.           },
    194.           {
    195.             type: 'square',
    196.             id: 'mySquare',
    197.             borderWidth: 5,
    198.             borderColor: 5,
    199.             backgroundColor: '#0277BD',
    200.             x: 200,
    201.             y: 230,
    202.             size: 40,
    203.             label: {
    204.               text: 'Square',
    205.               padding: '2 4'
    206.             },
    207.             tooltip: {
    208.               text: 'I am a square'
    209.             },
    210.             topState: {
    211.               backgroundColor: 'red',
    212.               offsetX: '10px',
    213.               offsetY: '10px',
    214.             },
    215.           },
    216.           {
    217.             type: 'diamond',
    218.             id: 'myDiamond',
    219.             borderWidth: 2,
    220.             borderColor: '#00C853',
    221.             backgroundColor: '#00E676',
    222.             x: 330,
    223.             y: 230,
    224.             size: 40,
    225.             label: {
    226.               text: 'Diamond',
    227.               padding: '2 4'
    228.             },
    229.             topState: {
    230.               backgroundColor: 'red',
    231.               offsetX: '10px',
    232.               offsetY: '10px',
    233.             },
    234.           },
    235.           {
    236.             type: 'triangle',
    237.             id: 'myTriangle',
    238.             borderWidth: 2,
    239.             borderColor: '#03A9F4',
    240.             backgroundColor: '#03A9F4',
    241.             x: 480,
    242.             y: 230,
    243.             size: 40,
    244.             tooltip: {
    245.               text: 'I am a triangle'
    246.             },
    247.             label: {
    248.               offsetY: 50,
    249.               text: 'Triangle'
    250.             },
    251.             topState: {
    252.               backgroundColor: 'red',
    253.               offsetX: '10px',
    254.               offsetY: '10px',
    255.             },
    256.           },
    257.           {
    258.             type: 'plus',
    259.             id: 'myPlus',
    260.             lineWidth: 8,
    261.             lineColor: '#4DB6AC',
    262.             x: 60,
    263.             y: 330,
    264.             size: 30,
    265.             label: {
    266.               text: 'Plus',
    267.               offsetY: 50
    268.             },
    269.             topState: {
    270.               lineColor: 'red',
    271.               offsetX: '10px',
    272.               offsetY: '10px',
    273.             },
    274.           },
    275.           {
    276.             type: 'cross',
    277.             id: 'myCross',
    278.             lineWidth: 8,
    279.             lineColor: '#4DB6AC',
    280.             x: 190,
    281.             y: 330,
    282.             size: 30,
    283.             label: {
    284.               text: 'Cross',
    285.               offsetY: 50
    286.             },
    287.             topState: {
    288.               lineColor: 'red',
    289.               offsetX: '10px',
    290.               offsetY: '10px',
    291.             },
    292.           },
    293.           {
    294.             type: 'line',
    295.             id: 'myLine',
    296.             lineWidth: 5,
    297.             lineColor: '#F44336',
    298.             points: [
    299.               [280,
    300.                 310
    301.               ],
    302.               [340,
    303.                 320
    304.               ],
    305.               [300,
    306.                 350
    307.               ],
    308.               [380,
    309.                 340
    310.               ]
    311.             ],
    312.             label: {
    313.               text: 'Line',
    314.               offsetY: 50
    315.             },
    316.             topState: {
    317.               lineColor: 'red',
    318.               offsetX: '10px',
    319.               offsetY: '10px',
    320.             },
    321.           },
    322.           {
    323.             type: 'poly',
    324.             id: 'myPoly',
    325.             lineStyle: 'solid',
    326.             borderWidth: 2,
    327.             shadowDistance: 15,
    328.             borderColor: '#532',
    329.             backgroundColor: '#e91e63',
    330.             points: [
    331.               [450,
    332.                 310
    333.               ],
    334.               [520,
    335.                 310
    336.               ],
    337.               [520,
    338.                 360
    339.               ],
    340.               [400,
    341.                 380
    342.               ],
    343.               [450,
    344.                 310
    345.               ]
    346.             ],
    347.             label: {
    348.               text: 'Polygon'
    349.             },
    350.             topState: {
    351.               backgroundColor: 'red',
    352.               offsetX: '10px',
    353.               offsetY: '10px',
    354.             },
    355.           }
    356.         ]
    357.       }]
    358.     };
    359.  
    360.     zingchart.render({
    361.       id: 'myChart',
    362.       data: chartConfig,
    363.       height: '100%',
    364.       width: '100%'
    365.     });
    366.   </script>
    367. </body>
    368.  
    369. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. let chartConfig = {
    2.   graphset: [{
    3.     type: 'null',
    4.     tooltip: {
    5.       padding: '10 20',
    6.       backgroundColor: '#333',
    7.       color: '#fff',
    8.       callout: true,
    9.       calloutPosition: 'bottom',
    10.       borderRadius: 10
    11.     },
    12.     shapes: [{
    13.         type: 'rect',
    14.         id: 'rect',
    15.         borderWidth: 2,
    16.         alpha: 0.5,
    17.         borderColor: '#f0f',
    18.         backgroundColor: '#09f #f09',
    19.         x: 50,
    20.         y: 100,
    21.         width: 50,
    22.         height: 100,
    23.         hoverState: {
    24.           backgroundColor: '#eee',
    25.           alpha: 0.4
    26.         },
    27.         label: {
    28.           text: 'Rect',
    29.           borderColor: '#333',
    30.           borderWidth: 2,
    31.           padding: 5,
    32.           alpha: 0.8
    33.         },
    34.         topState: {
    35.           backgroundColor: 'red',
    36.           offsetX: '10px',
    37.           offsetY: '10px',
    38.         },
    39.       },
    40.       {
    41.         type: 'circle',
    42.         id: 'mycircle',
    43.         borderWidth: 2,
    44.         borderColor: '#f00',
    45.         backgroundColor: '#FF5722',
    46.         x: 150,
    47.         y: 100,
    48.         size: 40,
    49.         hoverState: {
    50.           backgroundColor: '#ff3d00'
    51.         },
    52.         label: {
    53.           text: 'Circle'
    54.         },
    55.         topState: {
    56.           backgroundColor: 'red',
    57.           offsetX: '10px',
    58.           offsetY: '10px',
    59.         },
    60.       },
    61.       {
    62.         type: 'pie',
    63.         id: 'myPie',
    64.         borderWidth: 2,
    65.         borderColor: '#FFC107',
    66.         backgroundColor: '#FFEB3B',
    67.         x: 250,
    68.         y: 100,
    69.         size: 40,
    70.         angleStart: 0,
    71.         angleEnd: 330,
    72.         hoverState: {
    73.           alpha: 1,
    74.           angleEnd: 358,
    75.           backgroundColor: '#39d474',
    76.           borderColor: '#00ac42'
    77.         },
    78.         label: {
    79.           text: 'Pie',
    80.           padding: '2 4',
    81.           offsetY: 20
    82.         },
    83.         topState: {
    84.           backgroundColor: 'red',
    85.           offsetX: '10px',
    86.           offsetY: '10px',
    87.         },
    88.       },
    89.       {
    90.         type: 'star5',
    91.         id: 'myStar5',
    92.         borderWidth: 2,
    93.         borderColor: '#01579B',
    94.         backgroundColor: '#0277BD #4FC3F7',
    95.         x: 360,
    96.         y: 100,
    97.         size: 25,
    98.         hoverState: {
    99.           backgroundColor: '#039BE5 #FFF',
    100.           size: 38,
    101.           type: 'star8',
    102.           alpha: 1
    103.         },
    104.         label: {
    105.           text: 'Star 5',
    106.           padding: '2 4'
    107.         },
    108.         topState: {
    109.           backgroundColor: 'red',
    110.           offsetX: '10px',
    111.           offsetY: '10px',
    112.         },
    113.       },
    114.       {
    115.         type: 'star9',
    116.         id: 'myStar9',
    117.         borderWidth: 2,
    118.         borderColor: '#E65100',
    119.         fillType: 'radial',
    120.         gradientColors: '#FFF59D #FFC107 #F4511E',
    121.         gradientStops: '0.1 0.5 0.9',
    122.         x: 500,
    123.         y: 100,
    124.         size: 50,
    125.         label: {
    126.           text: 'Star 9',
    127.           fontColor: '#4d4d4d',
    128.           fontWeight: 'bold',
    129.           fontSize: 20,
    130.           padding: 10
    131.         },
    132.         hoverState: {
    133.           gradientColors: '#FBC02D #FFA000 #E65100',
    134.           gradientStops: '0.1 0.5 0.9'
    135.         },
    136.         topState: {
    137.           backgroundColor: 'red',
    138.           offsetX: '10px',
    139.           offsetY: '10px',
    140.         },
    141.       },
    142.       {
    143.         type: 'pie',
    144.         id: 'myRing',
    145.         borderWidth: 0,
    146.         backgroundColor: '#DCEDC8 #7CB342',
    147.         shadow: 0.4,
    148.         shadowDistance: 5,
    149.         hoverState: {
    150.           backgroundColor: '#FFEB3B #F44336',
    151.           angleStart: 180,
    152.           angleEnd: 540
    153.         },
    154.         x: 70,
    155.         y: 230,
    156.         size: 50,
    157.         slice: 30,
    158.         angleStart: 180,
    159.         angleEnd: 450,
    160.         tooltip: {
    161.           text: 'Gauge'
    162.         },
    163.         label: {
    164.           text: 'Ring'
    165.         },
    166.         topState: {
    167.           backgroundColor: 'red',
    168.           offsetX: '10px',
    169.           offsetY: '10px',
    170.         },
    171.       },
    172.       {
    173.         type: 'square',
    174.         id: 'mySquare',
    175.         borderWidth: 5,
    176.         borderColor: 5,
    177.         backgroundColor: '#0277BD',
    178.         x: 200,
    179.         y: 230,
    180.         size: 40,
    181.         label: {
    182.           text: 'Square',
    183.           padding: '2 4'
    184.         },
    185.         tooltip: {
    186.           text: 'I am a square'
    187.         },
    188.         topState: {
    189.           backgroundColor: 'red',
    190.           offsetX: '10px',
    191.           offsetY: '10px',
    192.         },
    193.       },
    194.       {
    195.         type: 'diamond',
    196.         id: 'myDiamond',
    197.         borderWidth: 2,
    198.         borderColor: '#00C853',
    199.         backgroundColor: '#00E676',
    200.         x: 330,
    201.         y: 230,
    202.         size: 40,
    203.         label: {
    204.           text: 'Diamond',
    205.           padding: '2 4'
    206.         },
    207.         topState: {
    208.           backgroundColor: 'red',
    209.           offsetX: '10px',
    210.           offsetY: '10px',
    211.         },
    212.       },
    213.       {
    214.         type: 'triangle',
    215.         id: 'myTriangle',
    216.         borderWidth: 2,
    217.         borderColor: '#03A9F4',
    218.         backgroundColor: '#03A9F4',
    219.         x: 480,
    220.         y: 230,
    221.         size: 40,
    222.         tooltip: {
    223.           text: 'I am a triangle'
    224.         },
    225.         label: {
    226.           offsetY: 50,
    227.           text: 'Triangle'
    228.         },
    229.         topState: {
    230.           backgroundColor: 'red',
    231.           offsetX: '10px',
    232.           offsetY: '10px',
    233.         },
    234.       },
    235.       {
    236.         type: 'plus',
    237.         id: 'myPlus',
    238.         lineWidth: 8,
    239.         lineColor: '#4DB6AC',
    240.         x: 60,
    241.         y: 330,
    242.         size: 30,
    243.         label: {
    244.           text: 'Plus',
    245.           offsetY: 50
    246.         },
    247.         topState: {
    248.           lineColor: 'red',
    249.           offsetX: '10px',
    250.           offsetY: '10px',
    251.         },
    252.       },
    253.       {
    254.         type: 'cross',
    255.         id: 'myCross',
    256.         lineWidth: 8,
    257.         lineColor: '#4DB6AC',
    258.         x: 190,
    259.         y: 330,
    260.         size: 30,
    261.         label: {
    262.           text: 'Cross',
    263.           offsetY: 50
    264.         },
    265.         topState: {
    266.           lineColor: 'red',
    267.           offsetX: '10px',
    268.           offsetY: '10px',
    269.         },
    270.       },
    271.       {
    272.         type: 'line',
    273.         id: 'myLine',
    274.         lineWidth: 5,
    275.         lineColor: '#F44336',
    276.         points: [
    277.           [280,
    278.             310
    279.           ],
    280.           [340,
    281.             320
    282.           ],
    283.           [300,
    284.             350
    285.           ],
    286.           [380,
    287.             340
    288.           ]
    289.         ],
    290.         label: {
    291.           text: 'Line',
    292.           offsetY: 50
    293.         },
    294.         topState: {
    295.           lineColor: 'red',
    296.           offsetX: '10px',
    297.           offsetY: '10px',
    298.         },
    299.       },
    300.       {
    301.         type: 'poly',
    302.         id: 'myPoly',
    303.         lineStyle: 'solid',
    304.         borderWidth: 2,
    305.         shadowDistance: 15,
    306.         borderColor: '#532',
    307.         backgroundColor: '#e91e63',
    308.         points: [
    309.           [450,
    310.             310
    311.           ],
    312.           [520,
    313.             310
    314.           ],
    315.           [520,
    316.             360
    317.           ],
    318.           [400,
    319.             380
    320.           ],
    321.           [450,
    322.             310
    323.           ]
    324.         ],
    325.         label: {
    326.           text: 'Polygon'
    327.         },
    328.         topState: {
    329.           backgroundColor: 'red',
    330.           offsetX: '10px',
    331.           offsetY: '10px',
    332.         },
    333.       }
    334.     ]
    335.   }]
    336. };
    337.  
    338. zingchart.render({
    339.   id: 'myChart',
    340.   data: chartConfig,
    341.   height: '100%',
    342.   width: '100%'
    343. });