Export multiple charts

Use Batch Export to export multiple charts as a single image/PDF

by Ashok Mandal

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="app">
    <fusioncharts
    :type="type"
    :width="width"
    :height="height"
    :dataFormat="dataFormat"
    :dataSource="dataSource.columnData"
    ></fusioncharts>
    <fusioncharts
    width="800"
    height="600"
    type="stackedcolumn2d"
    dataFormat="json"
    :dataSource="dataSource.stackedColumnData">
    </fusioncharts>
    <div class="button">
        <button class='btn btn-outline-secondary btn-sm' @click="exportToPdf">Export both charts as a single PDF</button>
    </div>
</div>

CSS

.btn {
    display: inline-block;
    outline:none;
    line-height: 1;
    font-family: sans-serif;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.65;
    border-radius: .5rem;
    transition: all .35s ease;
}

.btn-outline-secondary {
    color: #6957da;
    background-color: transparent;
    background-image: none;
    border-color: #6957da;
}

.btn-sm {
    font-size: 13px;
    font-size: 0.75rem;
    padding: 5px 15px;
    border-radius: .2rem;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6957da;
    border-color: #6957da;
}
.button {
  text-align: center;
}

Vue

// register VueFusionCharts plugin
Vue.use(VueFusionCharts, FusionCharts)

var dataSource = {
    "columnData":
    {
        "chart": {
            "caption": "Countries With Most Oil Reserves [2017-18]",
            "subCaption": "In MMbbl = One Million barrels",
            "xAxisName": "Country",
            "yAxisName": "Reserves (MMbbl)",
            "numberSuffix": "K",
            "theme": "fusion"
        },
        "data": [{
            "label": "Venezuela",
            "value": "290"
        }, {
            "label": "Saudi",
            "value": "260"
        }, {
            "label": "Canada",
            "value": "180"
        }, {
            "label": "Iran",
            "value": "140"
        }, {
            "label": "Russia",
            "value": "115"
        }, {
            "label": "UAE",
            "value": "100"
        }, {
            "label": "US",
            "value": "30"
        }, {
            "label": "China",
            "value": "30"
        }]
    },
    "stackedColumnData":
    {
      "chart": {
        "caption": "Yearly Energy Production Rate",
        "subCaption": " Top 5 Developed Countries",
        "numbersuffix": " TWh",
        "showSum": "1",
        "plotToolText": "$label produces <b>$dataValue</b> of energy from $seriesName",
        "theme": "fusion"
      },
      "categories": [
        {
          "category": [
            {
              "label": "Canada"
            },
            {
              "label": "China"
            },
            {
              "label": "Russia"
            },
            {
              "label": "Australia"
            },
            {
              "label": "United States"
            },
            {
              "label": "France"
            }
          ]
        }
      ],
      "dataSet": [
        {
          "seriesName": "Coal",
          "data": [
            {
              "value": "400"
            },
            {
              "value": "830"
            },
     ...