• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-body {
    10.       background: #fff;
    11.     }
    12.  
    13.     .chart--container {
    14.       height: 100%;
    15.       width: 100%;
    16.       min-height: 530px;
    17.     }
    18.  
    19.     .zc-ref {
    20.       display: none;
    21.     }
    22.   </style>
    23. </head>
    24. ​
    25.  
    26. <body class="zc-body">
    27.   ​
    28.   <div id="myChart" class="chart--container">
    29.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    30.   </div>
    31.  
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     let cols = 40,
    35.       rows = 10;
    36.     let img = 'data:image/png;base64,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';
    37.  
    38.     let plots = [{
    39.         text: 'Walmart',
    40.         color: '#47AC1C',
    41.         employees: 2200000,
    42.         medianpay: 19177
    43.       },
    44.       {
    45.         text: 'Amazon',
    46.         color: '#301058',
    47.         employees: 798000,
    48.         medianpay: 28466
    49.       },
    50.       {
    51.         text: 'Yum China',
    52.         color: '#B2101D',
    53.         employees: 450000,
    54.         medianpay: 9111
    55.       },
    56.       {
    57.         text: 'Kroger',
    58.         color: '#9D7A00',
    59.         employees: 435000,
    60.         medianpay: 21075
    61.       },
    62.       {
    63.         text: 'Home Depot',
    64.         color: '#DB00E3',
    65.         employees: 415700,
    66.         medianpay: 21095
    67.       },
    68.       {
    69.         text: 'Berkshire H.',
    70.         color: '#0023C6',
    71.         employees: 391500,
    72.         medianpay: 53510
    73.       },
    74.       {
    75.         text: 'FedEx',
    76.         color: '#3A5D0F',
    77.         employees: 389000,
    78.         medianpay: 50017
    79.       },
    80.       {
    81.         text: 'IBM',
    82.         color: '#8113B0',
    83.         employees: 383800,
    84.         medianpay: 54491
    85.       },
    86.       {
    87.         text: 'UPS',
    88.         color: '#D90015',
    89.         employees: 377640,
    90.         medianpay: 53443
    91.       },
    92.       {
    93.         text: 'Target Corp.',
    94.         color: '#296D62',
    95.         employees: 368000,
    96.         medianpay: 20581
    97.       }
    98.     ];
    99.  
    100.     let chartConfig = {
    101.       graphset: [{
    102.           type: 'scatter',
    103.           height: '100%',
    104.           width: 18 * cols + 40,
    105.           x: 0,
    106.           y: 0,
    107.           title: {
    108.             text: 'Top 10 United States Largest Private Employers (as of 2020)'
    109.           },
    110.           plotarea: {
    111.             maskTolerance: [99, 99],
    112.             margin: '50px 20px 100px 20px'
    113.           },
    114.           legend: {
    115.             borderWidth: 0,
    116.             height: '80px',
    117.             layout: '2x5',
    118.             margin: 'auto auto 0 auto',
    119.             offsetY: '10px',
    120.             marker: {
    121.               type: 'rectangle',
    122.               backgroundColor: 'none',
    123.               borderWidth: 0,
    124.               width: '16px',
    125.               height: '32px'
    126.             }
    127.           },
    128.           scaleX: {
    129.             visible: false
    130.           },
    131.           scaleY: {
    132.             mirrored: true,
    133.             visible: false
    134.           },
    135.           tooltip: {
    136.             text: '<b>%plot-text:</b> %data-employees employees (%data-percent%)',
    137.             backgroundColor: '#eee',
    138.             borderColor: '#333',
    139.             fontSize: '17px',
    140.             padding: '20px',
    141.             fontWeight: null,
    142.             thousandsSeparator: ','
    143.           },
    144.           plot: {
    145.             animation: {
    146.               effect: 'ANIMATION_FADE_IN',
    147.               method: 'ANIMATION_LINEAR',
    148.               sequence: 'ANIMATION_BY_PLOT',
    149.               speed: 150
    150.             },
    151.             marker: {
    152.               type: 'rectangle',
    153.               backgroundColor: 'none',
    154.               width: '16px',
    155.               height: '32px'
    156.             },
    157.             hoverMarker: {
    158.               type: 'none',
    159.               visible: false
    160.             }
    161.           },
    162.           series: []
    163.         },
    164.         {
    165.           type: 'hbar',
    166.           width: '300px',
    167.           height: '100%',
    168.           x: 18 * cols + 40,
    169.           y: 0,
    170.           plotarea: {
    171.             margin: '20px 20px 70px 100px'
    172.           },
    173.           tooltip: {
    174.             visible: false
    175.           },
    176.           scaleX: {
    177.             visible: false
    178.           },
    179.           scaleY: {
    180.             lineWidth: 0,
    181.             guide: {
    182.               visible: false
    183.             },
    184.             item: {
    185.               visible: false
    186.             },
    187.             label: {
    188.               text: 'Median annual pay',
    189.               align: 'left',
    190.               color: '#000',
    191.               fontSize: '15px',
    192.               padding: 0
    193.             },
    194.             tick: {
    195.               visible: false
    196.             }
    197.           },
    198.           source: {
    199.             text: 'Source: Wikipedia',
    200.             align: 'left',
    201.             target: '_blank',
    202.             url: 'https://en.wikipedia.org/wiki/List_of_largest_employers_in_the_United_States'
    203.           },
    204.           plot: {
    205.             animation: {
    206.               effect: 'ANIMATION_EXPAND_BOTTOM',
    207.               method: 'ANIMATION_LINEAR',
    208.               sequence: 'ANIMATION_BY_PLOT',
    209.               speed: 150
    210.             },
    211.             barSpace: 0.1,
    212.             barsSpaceLeft: 0.1,
    213.             barsSpaceRight: 0.1,
    214.             valueBox: [{
    215.                 text: '$%node-value',
    216.                 placement: 'top-out',
    217.                 rules: [{
    218.                   rule: '%node-value > 25000',
    219.                   placement: 'top-in',
    220.                   color: '#fff'
    221.                 }],
    222.                 thousandsSeparator: ','
    223.               },
    224.               {
    225.                 text: '%plot-text',
    226.                 color: '#000',
    227.                 placement: 'bottom-out'
    228.               }
    229.             ]
    230.           },
    231.           series: []
    232.         }
    233.       ]
    234.     };
    235.  
    236.     // calculate number of items per plot
    237.     let total_employees = 0;
    238.     for (let p = 0; p < plots.length; p++) {
    239.       total_employees += plots[p].employees;
    240.     }
    241.     let total_items = 0
    242.     for (let p = 0; p < plots.length; p++) {
    243.       let pc = (plots[p].employees / total_employees);
    244.       let items = Math.round((cols * rows) * pc);
    245.       if (p === plots.length - 1) {
    246.         // avoid rounding conflicts
    247.         plots[p].items = (cols * rows) - total_items;
    248.       } else {
    249.         plots[p].items = items;
    250.       }
    251.       plots[p].dataPercent = (100 * pc).toFixed(2);
    252.       total_items += items;
    253.     }
    254.  
    255.     let col = 0,
    256.       row = 0;
    257.     for (let p = 0; p < plots.length; p++) {
    258.       chartConfig.graphset[1].series.push({
    259.         text: plots[p].text,
    260.         values: [plots[p].medianpay],
    261.         backgroundColor: plots[p].color
    262.       });
    263.       chartConfig.graphset[0].series.push({
    264.         text: plots[p].text,
    265.         dataPercent: plots[p].dataPercent,
    266.         dataEmployees: plots[p].employees,
    267.         tooltip: {
    268.           color: plots[p].color
    269.         },
    270.         marker: {
    271.           backgroundRepeat: 'no-repeat',
    272.           backgroundImage: img,
    273.           backgroundPosition: -p * 16 + 'px 0px'
    274.         },
    275.         legendMarker: {
    276.           backgroundRepeat: 'no-repeat',
    277.           backgroundImage: img,
    278.           backgroundPosition: -p * 16 + 'px 0px'
    279.         },
    280.         values: []
    281.       });
    282.       for (let n = 0; n < plots[p].items; n++) {
    283.         chartConfig.graphset[0].series[p].values.push([col, row]);
    284.         col++;
    285.         if (col === cols) {
    286.           col = 0;
    287.           row++;
    288.         }
    289.       }
    290.     }
    291.  
    292.     zingchart.render({
    293.       id: 'myChart',
    294.       width: '100%',
    295.       height: '100%',
    296.       output: 'svg',
    297.       data: chartConfig
    298.     });
    299.   </script>
    300. </body>
    301.  
    302. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9. ​
    10.  
    11. <body class="zc-body">
    12.   ​
    13.   <div id="myChart" class="chart--container">
    14.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    15.   </div>
    16.  
    17. </body>
    18.  
    19. </html>
    1. .zc-body {
    2.   background: #fff;
    3. }
    4.  
    5. .chart--container {
    6.   height: 100%;
    7.   width: 100%;
    8.   min-height: 530px;
    9. }
    10.  
    11. .zc-ref {
    12.   display: none;
    13. }
    1. let cols = 40,
    2.   rows = 10;
    3. let img = 'data:image/png;base64,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';
    4.  
    5. let plots = [{
    6.     text: 'Walmart',
    7.     color: '#47AC1C',
    8.     employees: 2200000,
    9.     medianpay: 19177
    10.   },
    11.   {
    12.     text: 'Amazon',
    13.     color: '#301058',
    14.     employees: 798000,
    15.     medianpay: 28466
    16.   },
    17.   {
    18.     text: 'Yum China',
    19.     color: '#B2101D',
    20.     employees: 450000,
    21.     medianpay: 9111
    22.   },
    23.   {
    24.     text: 'Kroger',
    25.     color: '#9D7A00',
    26.     employees: 435000,
    27.     medianpay: 21075
    28.   },
    29.   {
    30.     text: 'Home Depot',
    31.     color: '#DB00E3',
    32.     employees: 415700,
    33.     medianpay: 21095
    34.   },
    35.   {
    36.     text: 'Berkshire H.',
    37.     color: '#0023C6',
    38.     employees: 391500,
    39.     medianpay: 53510
    40.   },
    41.   {
    42.     text: 'FedEx',
    43.     color: '#3A5D0F',
    44.     employees: 389000,
    45.     medianpay: 50017
    46.   },
    47.   {
    48.     text: 'IBM',
    49.     color: '#8113B0',
    50.     employees: 383800,
    51.     medianpay: 54491
    52.   },
    53.   {
    54.     text: 'UPS',
    55.     color: '#D90015',
    56.     employees: 377640,
    57.     medianpay: 53443
    58.   },
    59.   {
    60.     text: 'Target Corp.',
    61.     color: '#296D62',
    62.     employees: 368000,
    63.     medianpay: 20581
    64.   }
    65. ];
    66.  
    67. let chartConfig = {
    68.   graphset: [{
    69.       type: 'scatter',
    70.       height: '100%',
    71.       width: 18 * cols + 40,
    72.       x: 0,
    73.       y: 0,
    74.       title: {
    75.         text: 'Top 10 United States Largest Private Employers (as of 2020)'
    76.       },
    77.       plotarea: {
    78.         maskTolerance: [99, 99],
    79.         margin: '50px 20px 100px 20px'
    80.       },
    81.       legend: {
    82.         borderWidth: 0,
    83.         height: '80px',
    84.         layout: '2x5',
    85.         margin: 'auto auto 0 auto',
    86.         offsetY: '10px',
    87.         marker: {
    88.           type: 'rectangle',
    89.           backgroundColor: 'none',
    90.           borderWidth: 0,
    91.           width: '16px',
    92.           height: '32px'
    93.         }
    94.       },
    95.       scaleX: {
    96.         visible: false
    97.       },
    98.       scaleY: {
    99.         mirrored: true,
    100.         visible: false
    101.       },
    102.       tooltip: {
    103.         text: '<b>%plot-text:</b> %data-employees employees (%data-percent%)',
    104.         backgroundColor: '#eee',
    105.         borderColor: '#333',
    106.         fontSize: '17px',
    107.         padding: '20px',
    108.         fontWeight: null,
    109.         thousandsSeparator: ','
    110.       },
    111.       plot: {
    112.         animation: {
    113.           effect: 'ANIMATION_FADE_IN',
    114.           method: 'ANIMATION_LINEAR',
    115.           sequence: 'ANIMATION_BY_PLOT',
    116.           speed: 150
    117.         },
    118.         marker: {
    119.           type: 'rectangle',
    120.           backgroundColor: 'none',
    121.           width: '16px',
    122.           height: '32px'
    123.         },
    124.         hoverMarker: {
    125.           type: 'none',
    126.           visible: false
    127.         }
    128.       },
    129.       series: []
    130.     },
    131.     {
    132.       type: 'hbar',
    133.       width: '300px',
    134.       height: '100%',
    135.       x: 18 * cols + 40,
    136.       y: 0,
    137.       plotarea: {
    138.         margin: '20px 20px 70px 100px'
    139.       },
    140.       tooltip: {
    141.         visible: false
    142.       },
    143.       scaleX: {
    144.         visible: false
    145.       },
    146.       scaleY: {
    147.         lineWidth: 0,
    148.         guide: {
    149.           visible: false
    150.         },
    151.         item: {
    152.           visible: false
    153.         },
    154.         label: {
    155.           text: 'Median annual pay',
    156.           align: 'left',
    157.           color: '#000',
    158.           fontSize: '15px',
    159.           padding: 0
    160.         },
    161.         tick: {
    162.           visible: false
    163.         }
    164.       },
    165.       source: {
    166.         text: 'Source: Wikipedia',
    167.         align: 'left',
    168.         target: '_blank',
    169.         url: 'https://en.wikipedia.org/wiki/List_of_largest_employers_in_the_United_States'
    170.       },
    171.       plot: {
    172.         animation: {
    173.           effect: 'ANIMATION_EXPAND_BOTTOM',
    174.           method: 'ANIMATION_LINEAR',
    175.           sequence: 'ANIMATION_BY_PLOT',
    176.           speed: 150
    177.         },
    178.         barSpace: 0.1,
    179.         barsSpaceLeft: 0.1,
    180.         barsSpaceRight: 0.1,
    181.         valueBox: [{
    182.             text: '$%node-value',
    183.             placement: 'top-out',
    184.             rules: [{
    185.               rule: '%node-value > 25000',
    186.               placement: 'top-in',
    187.               color: '#fff'
    188.             }],
    189.             thousandsSeparator: ','
    190.           },
    191.           {
    192.             text: '%plot-text',
    193.             color: '#000',
    194.             placement: 'bottom-out'
    195.           }
    196.         ]
    197.       },
    198.       series: []
    199.     }
    200.   ]
    201. };
    202.  
    203. // calculate number of items per plot
    204. let total_employees = 0;
    205. for (let p = 0; p < plots.length; p++) {
    206.   total_employees += plots[p].employees;
    207. }
    208. let total_items = 0
    209. for (let p = 0; p < plots.length; p++) {
    210.   let pc = (plots[p].employees / total_employees);
    211.   let items = Math.round((cols * rows) * pc);
    212.   if (p === plots.length - 1) {
    213.     // avoid rounding conflicts
    214.     plots[p].items = (cols * rows) - total_items;
    215.   } else {
    216.     plots[p].items = items;
    217.   }
    218.   plots[p].dataPercent = (100 * pc).toFixed(2);
    219.   total_items += items;
    220. }
    221.  
    222. let col = 0,
    223.   row = 0;
    224. for (let p = 0; p < plots.length; p++) {
    225.   chartConfig.graphset[1].series.push({
    226.     text: plots[p].text,
    227.     values: [plots[p].medianpay],
    228.     backgroundColor: plots[p].color
    229.   });
    230.   chartConfig.graphset[0].series.push({
    231.     text: plots[p].text,
    232.     dataPercent: plots[p].dataPercent,
    233.     dataEmployees: plots[p].employees,
    234.     tooltip: {
    235.       color: plots[p].color
    236.     },
    237.     marker: {
    238.       backgroundRepeat: 'no-repeat',
    239.       backgroundImage: img,
    240.       backgroundPosition: -p * 16 + 'px 0px'
    241.     },
    242.     legendMarker: {
    243.       backgroundRepeat: 'no-repeat',
    244.       backgroundImage: img,
    245.       backgroundPosition: -p * 16 + 'px 0px'
    246.     },
    247.     values: []
    248.   });
    249.   for (let n = 0; n < plots[p].items; n++) {
    250.     chartConfig.graphset[0].series[p].values.push([col, row]);
    251.     col++;
    252.     if (col === cols) {
    253.       col = 0;
    254.       row++;
    255.     }
    256.   }
    257. }
    258.  
    259. zingchart.render({
    260.   id: 'myChart',
    261.   width: '100%',
    262.   height: '100%',
    263.   output: 'svg',
    264.   data: chartConfig
    265. });