• 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.  
    14.   <div id='myChart'></div>
    15.  
    16.   <script>
    17.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    18.     var myConfig = {
    19.       "type": "bubble-pie",
    20.       "title": {
    21.         "text": "Average Annual Expenditures in the U.S."
    22.       },
    23.       "subtitle": {
    24.         "text": "Source: U.S. Bureau of Labor Statistics<br>http://www.bls.gov/news.release/cesan.nr0.htm",
    25.         "font-weight": "normal"
    26.       },
    27.       "plot": {
    28.         "values": [ //Bubbles
    29.           [0, 51442, 51442],
    30.           [1, 51100, 51100],
    31.           [2, 53495, 53495]
    32.         ],
    33.         "data-bubble": ["2012", "2013", "2014"], //Year
    34.         "data-bubblesize": ["$51,442", "$51,100", "$53,495"], //Total Expenditures
    35.         "tooltip": {
    36.           "text": "%data-pie: $%data-v (or %data-pv%)",
    37.         },
    38.         "min-size": 40,
    39.         "max-size": 50
    40.       },
    41.       "scale-x": {
    42.         "labels": ["2012", "2013", "2014"],
    43.         "offset-start": 75,
    44.         "offset-end": 75
    45.       },
    46.       "scale-y": {
    47.         "values": "51100:53495:798.333",
    48.         "format": "$%v",
    49.         "decimals": 0,
    50.         "short": true,
    51.         "short-unit": "k",
    52.         "offset-start": 75,
    53.         "offset-end": 75
    54.       },
    55.       "series": [{ //Pie Slice 1
    56.           "data-v": [6599, 6602, 6759],
    57.           "data-pie": "Food",
    58.           "value-box": {
    59.             "text": "%data-bubblesize",
    60.             "placement": "bottom",
    61.             "font-color": "black",
    62.           }
    63.         },
    64.         { //Pie Slice 2
    65.           "data-v": [16887, 17148, 17798],
    66.           "data-pie": "Housing",
    67.         },
    68.         { //Pie Slice 3
    69.           "data-v": [1736, 1604, 1786],
    70.           "data-pie": "Apparel and Services",
    71.         },
    72.         { //Pie Slice 4
    73.           "data-v": [8998, 9004, 9073],
    74.           "data-pie": "Transportation",
    75.         },
    76.         { //Pie Slice 5
    77.           "data-v": [3556, 3631, 4290],
    78.           "data-pie": "Healthcare",
    79.         },
    80.         { //Pie Slice 6
    81.           "data-v": [2605, 2482, 2728],
    82.           "data-pie": "Entertainment"
    83.         },
    84.         { //Pie Slice 7
    85.           "data-v": [7504, 7362, 7514],
    86.           "data-pie": "Contributions"
    87.         },
    88.         { //Pie Slice 8
    89.           "data-v": [3557, 3267, 3548],
    90.           "data-pie": "Other"
    91.         }
    92.       ],
    93.       "legend": {
    94.         "header": {
    95.           "text": "Expenditure Breakdown",
    96.           "padding-top": 8,
    97.         },
    98.         "item": {
    99.           "text": "%data-pie"
    100.         },
    101.         "align": "right",
    102.         "vertical-align": "middle",
    103.         "width": "25%"
    104.       },
    105.     };
    106.  
    107.     zingchart.render({
    108.       id: 'myChart',
    109.       data: myConfig,
    110.       height: 400,
    111.       width: "100%"
    112.     });
    113.   </script>
    114. </body>
    115.  
    116. </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.  
    13.   <div id='myChart'></div>
    14.  
    15. </body>
    16.  
    17. </html>
    1.  
    1. var myConfig = {
    2.   "type": "bubble-pie",
    3.   "title": {
    4.     "text": "Average Annual Expenditures in the U.S."
    5.   },
    6.   "subtitle": {
    7.     "text": "Source: U.S. Bureau of Labor Statistics<br>http://www.bls.gov/news.release/cesan.nr0.htm",
    8.     "font-weight": "normal"
    9.   },
    10.   "plot": {
    11.     "values": [ //Bubbles
    12.       [0, 51442, 51442],
    13.       [1, 51100, 51100],
    14.       [2, 53495, 53495]
    15.     ],
    16.     "data-bubble": ["2012", "2013", "2014"], //Year
    17.     "data-bubblesize": ["$51,442", "$51,100", "$53,495"], //Total Expenditures
    18.     "tooltip": {
    19.       "text": "%data-pie: $%data-v (or %data-pv%)",
    20.     },
    21.     "min-size": 40,
    22.     "max-size": 50
    23.   },
    24.   "scale-x": {
    25.     "labels": ["2012", "2013", "2014"],
    26.     "offset-start": 75,
    27.     "offset-end": 75
    28.   },
    29.   "scale-y": {
    30.     "values": "51100:53495:798.333",
    31.     "format": "$%v",
    32.     "decimals": 0,
    33.     "short": true,
    34.     "short-unit": "k",
    35.     "offset-start": 75,
    36.     "offset-end": 75
    37.   },
    38.   "series": [{ //Pie Slice 1
    39.       "data-v": [6599, 6602, 6759],
    40.       "data-pie": "Food",
    41.       "value-box": {
    42.         "text": "%data-bubblesize",
    43.         "placement": "bottom",
    44.         "font-color": "black",
    45.       }
    46.     },
    47.     { //Pie Slice 2
    48.       "data-v": [16887, 17148, 17798],
    49.       "data-pie": "Housing",
    50.     },
    51.     { //Pie Slice 3
    52.       "data-v": [1736, 1604, 1786],
    53.       "data-pie": "Apparel and Services",
    54.     },
    55.     { //Pie Slice 4
    56.       "data-v": [8998, 9004, 9073],
    57.       "data-pie": "Transportation",
    58.     },
    59.     { //Pie Slice 5
    60.       "data-v": [3556, 3631, 4290],
    61.       "data-pie": "Healthcare",
    62.     },
    63.     { //Pie Slice 6
    64.       "data-v": [2605, 2482, 2728],
    65.       "data-pie": "Entertainment"
    66.     },
    67.     { //Pie Slice 7
    68.       "data-v": [7504, 7362, 7514],
    69.       "data-pie": "Contributions"
    70.     },
    71.     { //Pie Slice 8
    72.       "data-v": [3557, 3267, 3548],
    73.       "data-pie": "Other"
    74.     }
    75.   ],
    76.   "legend": {
    77.     "header": {
    78.       "text": "Expenditure Breakdown",
    79.       "padding-top": 8,
    80.     },
    81.     "item": {
    82.       "text": "%data-pie"
    83.     },
    84.     "align": "right",
    85.     "vertical-align": "middle",
    86.     "width": "25%"
    87.   },
    88. };
    89.  
    90. zingchart.render({
    91.   id: 'myChart',
    92.   data: myConfig,
    93.   height: 400,
    94.   width: "100%"
    95. });