Slice data plots

Click the button to slice out Microsoft from the rest of the plots

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"
    @dataPlotClick="onSliceClick"
    ref="fc"
    ></fusioncharts>
    <br>
        <div class="change-type">
            <div>
            <input name='items' type="radio" v-model="radioValue" @change="onChangeItem" value="none" checked/>
            <label>None</label>
            </div>
            <div>
            <input name='items' type="radio" v-model="radioValue" @change="onChangeItem" value="0" />
            <label>Apache</label>
            </div>
            <div>
            <input name='items' type="radio" v-model="radioValue" @change="onChangeItem" value="1" />
            <label>Microsoft</label>
            </div>
            <div>
            <input name='items' type="radio" v-model="radioValue" @change="onChangeItem" value="2" />
            <label>Zeus</label>
            </div>
            <div>
            <input name='items' type="radio" v-model="radioValue" @change="onChangeItem" value="3" />
            <label>Other</label>
            </div>
        </div>
</div>

CSS

.change-type {
  margin: auto;
  text-align:center;
  padding-top: 5px;
}

.change-type>div {
  display: inline-flex;
  position: relative;
  margin: 0 5px;
}

.change-type label {
  position: relative;
  padding: 5px 10px 5px 30px;
  border-radius: 4px;
}

.change-type input {
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  position: absolute;
}

.change-type label:before,
.change-type label:after {
  content: "";
  position: absolute;
}

.change-type label:before {
  display: block;
  background: #fff;
  border: 2px solid #949697;
  box-shadow: none;
  border-radius: 50%;
  top: 5px;
  left: 7px;
  width: 1rem;
  height: 1rem;
}

.change-type label:after {
  width: 0.65rem;
  height: 0.65rem;
  top: 9.5px;
  left: 12px;
  border-radius: 50%;
}

.change-type input:checked~label {
  color: #48b884;
  font-weight: 600;
  box-shadow: 0 4px 9px 0 rgba(104, 105, 128, .22);
}

.change-type input:checked~label:before {
  color: #fff;
  box-shadow: none;
  border: 2px solid #48b884;
}

.change-type input:checked~label:after {
  background: #55bd8d;
}

Vue

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

var dataSource = {
    "chart": {
    "caption": "Market Share of Web Servers",
    "plottooltext": "<b>$percentValue</b> of web servers run on $label servers",
    "showLegend": "1",
    "showPercentValues": "1",
    "legendPosition": "bottom",
    "useDataPlotColorForLabels": "1",
    "enableMultiSlicing": "0",
    "theme": "fusion",
    "showlegend":"0"
    },
    "data": [
        {
            "label": "Apache",
            "value": "32647479"
        },
        {
            "label": "Microsoft",
            "value": "22100932"
        }, {
            "label": "Zeus",
            "value": "14376"
        }, {
            "label": "Other",
            "value": "18674221"
        }
    ]
}; 

var app = new Vue({
    el: '#app',
    data: {
        type: 'pie2d',
        width: '100%',
        height: '400',
        dataFormat: 'json',
        dataSource: dataSource,
        radioValue: 'none',
        lastActive: 'none'
    },
    methods: {
        // function to slice items when radio buttons are clicked using the slicePlotItems api
        onChangeItem: function () {
            const chart = this.$refs.fc.chartObj,
                lastActive = this.lastActive,
                value = this.radioValue;
            this.lastActive = value;
            if (value === 'none') {
                chart.slicePlotItem(lastActive, false);
            } else {
                chart.slicePlotItem(value, true);
            }
        },
        // function to actiavte radio buttons when plots are clicked
        onSliceClick: function (e) {
            var isSliced = e.data.isSliced;
            if (isSliced) {
                this.lastActive = this.radioValue = 'none'
            } else {
                this.lastActive = this.radioValue = e.data.index
            }
        }
    }
});