• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
    
      <div id='myChart'></div>
    
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "type": "bubble-pie",
          "title": {
            "text": "Average Annual Expenditures in the U.S."
          },
          "subtitle": {
            "text": "Source: U.S. Bureau of Labor Statistics<br>http://www.bls.gov/news.release/cesan.nr0.htm",
            "font-weight": "normal"
          },
          "plot": {
            "values": [ //Bubbles
              [0, 51442, 51442],
              [1, 51100, 51100],
              [2, 53495, 53495]
            ],
            "data-bubble": ["2012", "2013", "2014"], //Year
            "data-bubblesize": ["$51,442", "$51,100", "$53,495"], //Total Expenditures
            "tooltip": {
              "text": "%data-pie: $%data-v (or %data-pv%)",
            },
            "min-size": 40,
            "max-size": 50
          },
          "scale-x": {
            "labels": ["2012", "2013", "2014"],
            "offset-start": 75,
            "offset-end": 75
          },
          "scale-y": {
            "values": "51100:53495:798.333",
            "format": "$%v",
            "decimals": 0,
            "short": true,
            "short-unit": "k",
            "offset-start": 75,
            "offset-end": 75
          },
          "series": [{ //Pie Slice 1
              "data-v": [6599, 6602, 6759],
              "data-pie": "Food",
              "value-box": {
                "text": "%data-bubblesize",
                "placement": "bottom",
                "font-color": "black",
              }
            },
            { //Pie Slice 2
              "data-v": [16887, 17148, 17798],
              "data-pie": "Housing",
            },
            { //Pie Slice 3
              "data-v": [1736, 1604, 1786],
              "data-pie": "Apparel and Services",
            },
            { //Pie Slice 4
              "data-v": [8998, 9004, 9073],
              "data-pie": "Transportation",
            },
            { //Pie Slice 5
              "data-v": [3556, 3631, 4290],
              "data-pie": "Healthcare",
            },
            { //Pie Slice 6
              "data-v": [2605, 2482, 2728],
              "data-pie": "Entertainment"
            },
            { //Pie Slice 7
              "data-v": [7504, 7362, 7514],
              "data-pie": "Contributions"
            },
            { //Pie Slice 8
              "data-v": [3557, 3267, 3548],
              "data-pie": "Other"
            }
          ],
          "legend": {
            "header": {
              "text": "Expenditure Breakdown",
              "padding-top": 8,
            },
            "item": {
              "text": "%data-pie"
            },
            "align": "right",
            "vertical-align": "middle",
            "width": "25%"
          },
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          width: "100%"
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
    
      <div id='myChart'></div>
    
    </body>
    
    </html>
    
          
    var myConfig = {
      "type": "bubble-pie",
      "title": {
        "text": "Average Annual Expenditures in the U.S."
      },
      "subtitle": {
        "text": "Source: U.S. Bureau of Labor Statistics<br>http://www.bls.gov/news.release/cesan.nr0.htm",
        "font-weight": "normal"
      },
      "plot": {
        "values": [ //Bubbles
          [0, 51442, 51442],
          [1, 51100, 51100],
          [2, 53495, 53495]
        ],
        "data-bubble": ["2012", "2013", "2014"], //Year
        "data-bubblesize": ["$51,442", "$51,100", "$53,495"], //Total Expenditures
        "tooltip": {
          "text": "%data-pie: $%data-v (or %data-pv%)",
        },
        "min-size": 40,
        "max-size": 50
      },
      "scale-x": {
        "labels": ["2012", "2013", "2014"],
        "offset-start": 75,
        "offset-end": 75
      },
      "scale-y": {
        "values": "51100:53495:798.333",
        "format": "$%v",
        "decimals": 0,
        "short": true,
        "short-unit": "k",
        "offset-start": 75,
        "offset-end": 75
      },
      "series": [{ //Pie Slice 1
          "data-v": [6599, 6602, 6759],
          "data-pie": "Food",
          "value-box": {
            "text": "%data-bubblesize",
            "placement": "bottom",
            "font-color": "black",
          }
        },
        { //Pie Slice 2
          "data-v": [16887, 17148, 17798],
          "data-pie": "Housing",
        },
        { //Pie Slice 3
          "data-v": [1736, 1604, 1786],
          "data-pie": "Apparel and Services",
        },
        { //Pie Slice 4
          "data-v": [8998, 9004, 9073],
          "data-pie": "Transportation",
        },
        { //Pie Slice 5
          "data-v": [3556, 3631, 4290],
          "data-pie": "Healthcare",
        },
        { //Pie Slice 6
          "data-v": [2605, 2482, 2728],
          "data-pie": "Entertainment"
        },
        { //Pie Slice 7
          "data-v": [7504, 7362, 7514],
          "data-pie": "Contributions"
        },
        { //Pie Slice 8
          "data-v": [3557, 3267, 3548],
          "data-pie": "Other"
        }
      ],
      "legend": {
        "header": {
          "text": "Expenditure Breakdown",
          "padding-top": 8,
        },
        "item": {
          "text": "%data-pie"
        },
        "align": "right",
        "vertical-align": "middle",
        "width": "25%"
      },
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: "100%"
    });