• 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.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.   </style>
    24. </head>
    25.  
    26. <body>
    27.   <div id="myChart"></div>
    28.   <script>
    29.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    30.     zingchart.loadModules('selection');
    31.     var myConfig = {
    32.       "type": "hbar",
    33.       "font-family": "Arial",
    34.       "title": {
    35.         "text": "Customer Survey Response",
    36.         "font-family": "Arial",
    37.         "background-color": "none",
    38.         "font-color": "#A4A4A4",
    39.         "font-size": "18px"
    40.       },
    41.       "labels": [{
    42.           "text": "DAYS",
    43.           "font-size": "12px",
    44.           "font-color": "#9d9d9d",
    45.           "x": "11.5%",
    46.           "y": "10%"
    47.         },
    48.         {
    49.           "text": "CUSTOMERS",
    50.           "font-size": "12px",
    51.           "font-color": "#9d9d9d",
    52.           "x": "20%",
    53.           "y": "10%"
    54.         },
    55.         {
    56.           "text": "GOAL",
    57.           "font-size": "12px",
    58.           "font-color": "#9d9d9d",
    59.           "x": "4%",
    60.           "y": "10%"
    61.         }
    62.       ],
    63.       "arrows": [{
    64.         "backgroundColor": "#CCCCCC",
    65.         "direction": "bottom",
    66.         "borderWidth": 0,
    67.         "to": {
    68.           "x": "6%",
    69.           "y": "27%"
    70.         },
    71.         "from": {
    72.           "x": "6%",
    73.           "y": "79%"
    74.         }
    75.       }],
    76.       "shapes": [{
    77.           "type": "circle",
    78.           "x": 45,
    79.           "y": 99,
    80.           "backgroundColor": "white",
    81.           "borderColor": "#6FA6DF",
    82.           "borderWidth": 3,
    83.           "size": 14
    84.         },
    85.         {
    86.           "type": "circle",
    87.           "x": 40,
    88.           "y": 95,
    89.           "backgroundColor": "#6FA6DF",
    90.           "size": 2
    91.         },
    92.         {
    93.           "type": "circle",
    94.           "x": 50,
    95.           "y": 95,
    96.           "backgroundColor": "#6FA6DF",
    97.           "size": 2
    98.         },
    99.         {
    100.           "type": "pie",
    101.           "background-color": "#5297b6",
    102.           "size": 8,
    103.           "x": 45,
    104.           "y": 100,
    105.           "angle-start": 0,
    106.           "angle-end": 180,
    107.         },
    108.         {
    109.           "type": "pie",
    110.           "background-color": "#fff",
    111.           "size": 6,
    112.           "x": 45,
    113.           "y": 100,
    114.           "angle-start": 0,
    115.           "angle-end": 180,
    116.         },
    117.         {
    118.           "type": "circle",
    119.           "x": 45,
    120.           "y": 433,
    121.           "backgroundColor": "white",
    122.           "borderColor": "#FA8452",
    123.           "borderWidth": 3,
    124.           "size": 14
    125.         },
    126.         {
    127.           "type": "circle",
    128.           "x": 40,
    129.           "y": 429,
    130.           "backgroundColor": "#FA8452",
    131.           "size": 2
    132.         },
    133.         {
    134.           "type": "circle",
    135.           "x": 50,
    136.           "y": 429,
    137.           "backgroundColor": "#FA8452",
    138.           "size": 2
    139.         },
    140.         {
    141.           "type": "pie",
    142.           "background-color": "#FA8452",
    143.           "size": 8,
    144.           "x": 45,
    145.           "y": 439,
    146.           "angle-start": 170,
    147.           "angle-end": 10,
    148.         },
    149.         {
    150.           "type": "pie",
    151.           "background-color": "#fff",
    152.           "size": 5,
    153.           "x": 45,
    154.           "y": 440,
    155.           "angle-start": 170,
    156.           "angle-end": 10,
    157.         }
    158.       ],
    159.       "plot": {
    160.         //mode:"normal",
    161.         "bars-overlap": "100%",
    162.         "borderRadius": 8,
    163.         "hover-state": {
    164.           "visible": false
    165.         },
    166.         "_animation": {
    167.           "delay": 300,
    168.           "effect": 3,
    169.           "speed": "500",
    170.           "method": "0",
    171.           "sequence": "3"
    172.         },
    173.         selectedState: {
    174.           backgroundColor: 'red'
    175.         }
    176.       },
    177.       "plotarea": {
    178.         "margin": "60px 20px 20px 140px"
    179.       },
    180.       "scale-x": {
    181.         "line-color": "none",
    182.         "values": ["120+", "90-120", "60-90", "30-60", "0-30"],
    183.         "tick": {
    184.           "visible": false
    185.         },
    186.         "guide": {
    187.           "visible": false
    188.         },
    189.         "item": {
    190.           "font-size": "14px",
    191.           "padding-right": "20px",
    192.           "auto-align": true,
    193.           "rules": [{
    194.               "rule": "%i==0",
    195.               "font-color": "#FA8452"
    196.             },
    197.             {
    198.               "rule": "%i==1",
    199.               "font-color": "#FCAE48"
    200.             },
    201.             {
    202.               "rule": "%i==2",
    203.               "font-color": "#FCCC65"
    204.             },
    205.             {
    206.               "rule": "%i==3",
    207.               "font-color": "#A0BE4A"
    208.             },
    209.             {
    210.               "rule": "%i==4",
    211.               "font-color": "#6FA6DF"
    212.             }
    213.           ]
    214.         }
    215.       },
    216.       "scale-y": {
    217.         "visible": false,
    218.         "guide": {
    219.           "visible": false
    220.         }
    221.       },
    222.       "series": [{
    223.           "values": [100, 100, 100, 100, 100],
    224.           "bar-width": "40px",
    225.           "background-color": "#f2f2f2",
    226.           "border-color": "#e8e3e3",
    227.           "border-width": 2,
    228.           "fill-angle": 90,
    229.           "tooltip": {
    230.             "visible": false
    231.           },
    232.           "data-ignore-selection": true
    233.         },
    234.         {
    235.           "values": [42, 56, 77, 44, 81],
    236.           "bar-width": "32px",
    237.           "max-trackers": 0,
    238.           "value-box": {
    239.             "placement": "top-out",
    240.             "text": "%v",
    241.             "decimals": 0,
    242.             "font-color": "#A4A4A4",
    243.             "font-size": "14px",
    244.             "alpha": 0.6
    245.           },
    246.           "rules": [{
    247.               "rule": "%i==0",
    248.               "background-color": "#FA8452"
    249.             },
    250.             {
    251.               "rule": "%i==1",
    252.               "background-color": "#FCAE48"
    253.             },
    254.             {
    255.               "rule": "%i==2",
    256.               "background-color": "#FCCC65"
    257.             },
    258.             {
    259.               "rule": "%i==3",
    260.               "background-color": "#A0BE4A"
    261.             },
    262.             {
    263.               "rule": "%i==4",
    264.               "background-color": "#6FA6DF"
    265.             }
    266.           ]
    267.         }
    268.       ]
    269.     };
    270.  
    271.  
    272.     /* Lets create a place to store our function. Typically it is not recomended
    273.      * to modify the zingchart object. This is for advanced users. It is good
    274.      * practice to keep all your charting stuff together, in this case your 
    275.      * custom functions within the zingchart object! This will also help with
    276.      * name collisions within the window object.
    277.      *
    278.      * BE WARNED: you can overwrite stuff in the zingchart object if you are
    279.      * not careful. This will mess stuff up.
    280.      */
    281.     zingchart.insert_company_name_customFncs = {};
    282.     zingchart.insert_company_name_customFncs.clearSelection = function(e) {
    283.       zingchart.exec(e.id, 'clearselection');
    284.     }
    285.  
    286.     // Load the selection-tool and render the chart once the module is loaded
    287.     zingchart.loadModules('selection-tool', function() {
    288.       zingchart.render({
    289.         id: 'myChart',
    290.         // defined data this way since context menu needs to be defined in root (above graphset)
    291.         data: {
    292.           gui: {
    293.             contextMenu: {
    294.               customItems: [{
    295.                 text: 'Clear Selection',
    296.                 function: 'zingchart.insert_company_name_customFncs.clearSelection()',
    297.                 id: 'clearSelection'
    298.               }]
    299.             }
    300.           },
    301.           graphset: [myConfig]
    302.         },
    303.         height: 400,
    304.         width: '100%',
    305.         modules: 'selection-tool'
    306.       });
    307.     });
    308.   </script>
    309. </body>
    310.  
    311. </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.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    1. zingchart.loadModules('selection');
    2. var myConfig = {
    3.   "type": "hbar",
    4.   "font-family": "Arial",
    5.   "title": {
    6.     "text": "Customer Survey Response",
    7.     "font-family": "Arial",
    8.     "background-color": "none",
    9.     "font-color": "#A4A4A4",
    10.     "font-size": "18px"
    11.   },
    12.   "labels": [{
    13.       "text": "DAYS",
    14.       "font-size": "12px",
    15.       "font-color": "#9d9d9d",
    16.       "x": "11.5%",
    17.       "y": "10%"
    18.     },
    19.     {
    20.       "text": "CUSTOMERS",
    21.       "font-size": "12px",
    22.       "font-color": "#9d9d9d",
    23.       "x": "20%",
    24.       "y": "10%"
    25.     },
    26.     {
    27.       "text": "GOAL",
    28.       "font-size": "12px",
    29.       "font-color": "#9d9d9d",
    30.       "x": "4%",
    31.       "y": "10%"
    32.     }
    33.   ],
    34.   "arrows": [{
    35.     "backgroundColor": "#CCCCCC",
    36.     "direction": "bottom",
    37.     "borderWidth": 0,
    38.     "to": {
    39.       "x": "6%",
    40.       "y": "27%"
    41.     },
    42.     "from": {
    43.       "x": "6%",
    44.       "y": "79%"
    45.     }
    46.   }],
    47.   "shapes": [{
    48.       "type": "circle",
    49.       "x": 45,
    50.       "y": 99,
    51.       "backgroundColor": "white",
    52.       "borderColor": "#6FA6DF",
    53.       "borderWidth": 3,
    54.       "size": 14
    55.     },
    56.     {
    57.       "type": "circle",
    58.       "x": 40,
    59.       "y": 95,
    60.       "backgroundColor": "#6FA6DF",
    61.       "size": 2
    62.     },
    63.     {
    64.       "type": "circle",
    65.       "x": 50,
    66.       "y": 95,
    67.       "backgroundColor": "#6FA6DF",
    68.       "size": 2
    69.     },
    70.     {
    71.       "type": "pie",
    72.       "background-color": "#5297b6",
    73.       "size": 8,
    74.       "x": 45,
    75.       "y": 100,
    76.       "angle-start": 0,
    77.       "angle-end": 180,
    78.     },
    79.     {
    80.       "type": "pie",
    81.       "background-color": "#fff",
    82.       "size": 6,
    83.       "x": 45,
    84.       "y": 100,
    85.       "angle-start": 0,
    86.       "angle-end": 180,
    87.     },
    88.     {
    89.       "type": "circle",
    90.       "x": 45,
    91.       "y": 433,
    92.       "backgroundColor": "white",
    93.       "borderColor": "#FA8452",
    94.       "borderWidth": 3,
    95.       "size": 14
    96.     },
    97.     {
    98.       "type": "circle",
    99.       "x": 40,
    100.       "y": 429,
    101.       "backgroundColor": "#FA8452",
    102.       "size": 2
    103.     },
    104.     {
    105.       "type": "circle",
    106.       "x": 50,
    107.       "y": 429,
    108.       "backgroundColor": "#FA8452",
    109.       "size": 2
    110.     },
    111.     {
    112.       "type": "pie",
    113.       "background-color": "#FA8452",
    114.       "size": 8,
    115.       "x": 45,
    116.       "y": 439,
    117.       "angle-start": 170,
    118.       "angle-end": 10,
    119.     },
    120.     {
    121.       "type": "pie",
    122.       "background-color": "#fff",
    123.       "size": 5,
    124.       "x": 45,
    125.       "y": 440,
    126.       "angle-start": 170,
    127.       "angle-end": 10,
    128.     }
    129.   ],
    130.   "plot": {
    131.     //mode:"normal",
    132.     "bars-overlap": "100%",
    133.     "borderRadius": 8,
    134.     "hover-state": {
    135.       "visible": false
    136.     },
    137.     "_animation": {
    138.       "delay": 300,
    139.       "effect": 3,
    140.       "speed": "500",
    141.       "method": "0",
    142.       "sequence": "3"
    143.     },
    144.     selectedState: {
    145.       backgroundColor: 'red'
    146.     }
    147.   },
    148.   "plotarea": {
    149.     "margin": "60px 20px 20px 140px"
    150.   },
    151.   "scale-x": {
    152.     "line-color": "none",
    153.     "values": ["120+", "90-120", "60-90", "30-60", "0-30"],
    154.     "tick": {
    155.       "visible": false
    156.     },
    157.     "guide": {
    158.       "visible": false
    159.     },
    160.     "item": {
    161.       "font-size": "14px",
    162.       "padding-right": "20px",
    163.       "auto-align": true,
    164.       "rules": [{
    165.           "rule": "%i==0",
    166.           "font-color": "#FA8452"
    167.         },
    168.         {
    169.           "rule": "%i==1",
    170.           "font-color": "#FCAE48"
    171.         },
    172.         {
    173.           "rule": "%i==2",
    174.           "font-color": "#FCCC65"
    175.         },
    176.         {
    177.           "rule": "%i==3",
    178.           "font-color": "#A0BE4A"
    179.         },
    180.         {
    181.           "rule": "%i==4",
    182.           "font-color": "#6FA6DF"
    183.         }
    184.       ]
    185.     }
    186.   },
    187.   "scale-y": {
    188.     "visible": false,
    189.     "guide": {
    190.       "visible": false
    191.     }
    192.   },
    193.   "series": [{
    194.       "values": [100, 100, 100, 100, 100],
    195.       "bar-width": "40px",
    196.       "background-color": "#f2f2f2",
    197.       "border-color": "#e8e3e3",
    198.       "border-width": 2,
    199.       "fill-angle": 90,
    200.       "tooltip": {
    201.         "visible": false
    202.       },
    203.       "data-ignore-selection": true
    204.     },
    205.     {
    206.       "values": [42, 56, 77, 44, 81],
    207.       "bar-width": "32px",
    208.       "max-trackers": 0,
    209.       "value-box": {
    210.         "placement": "top-out",
    211.         "text": "%v",
    212.         "decimals": 0,
    213.         "font-color": "#A4A4A4",
    214.         "font-size": "14px",
    215.         "alpha": 0.6
    216.       },
    217.       "rules": [{
    218.           "rule": "%i==0",
    219.           "background-color": "#FA8452"
    220.         },
    221.         {
    222.           "rule": "%i==1",
    223.           "background-color": "#FCAE48"
    224.         },
    225.         {
    226.           "rule": "%i==2",
    227.           "background-color": "#FCCC65"
    228.         },
    229.         {
    230.           "rule": "%i==3",
    231.           "background-color": "#A0BE4A"
    232.         },
    233.         {
    234.           "rule": "%i==4",
    235.           "background-color": "#6FA6DF"
    236.         }
    237.       ]
    238.     }
    239.   ]
    240. };
    241.  
    242.  
    243. /* Lets create a place to store our function. Typically it is not recomended
    244.  * to modify the zingchart object. This is for advanced users. It is good
    245.  * practice to keep all your charting stuff together, in this case your 
    246.  * custom functions within the zingchart object! This will also help with
    247.  * name collisions within the window object.
    248.  *
    249.  * BE WARNED: you can overwrite stuff in the zingchart object if you are
    250.  * not careful. This will mess stuff up.
    251.  */
    252. zingchart.insert_company_name_customFncs = {};
    253. zingchart.insert_company_name_customFncs.clearSelection = function(e) {
    254.   zingchart.exec(e.id, 'clearselection');
    255. }
    256.  
    257. // Load the selection-tool and render the chart once the module is loaded
    258. zingchart.loadModules('selection-tool', function() {
    259.   zingchart.render({
    260.     id: 'myChart',
    261.     // defined data this way since context menu needs to be defined in root (above graphset)
    262.     data: {
    263.       gui: {
    264.         contextMenu: {
    265.           customItems: [{
    266.             text: 'Clear Selection',
    267.             function: 'zingchart.insert_company_name_customFncs.clearSelection()',
    268.             id: 'clearSelection'
    269.           }]
    270.         }
    271.       },
    272.       graphset: [myConfig]
    273.     },
    274.     height: 400,
    275.     width: '100%',
    276.     modules: 'selection-tool'
    277.   });
    278. });