Blog Post: Bubble Pie Chart 1

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" 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%"
});