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