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