Back

Partial slice swipe

Demo of how PieChart can be used to also input data - swipe each slice and see the results.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

    pc = new PieChart({
        container: document.getElementById("demo"),
        theme: PieChart.themes.flat,
        data: {
            preloaded: {
                "subvalues": [
                    { "value": 0, "name": "Location" },
                    { "value": 0, "name": "Parking" },
                    { "value": 0, "name": "Variety of payments methods (credit cards, checks)accepted " },
                    { "value": 0, "name": "Small typical wait time" },
                    { "value": 0, "name": "Reservations available" },
                    { "value": 0, "name": "Attractive interior" },
                    { "value": 0, "name": "Sanitation rating" },
                    { "value": 0, "name": "Food menu" },
                    { "value": 0, "name": "Quantity and quality of food" },
                    { "value": 0, "name": "Dessert menu" },
                    { "value": 0, "name": "Beverage menu" },
                    { "value": 0, "name": "Wine list and bar" },
                    { "value": 0, "name": "Offers and promotions" },
                    { "value": 0, "name": "Variety of prices" },
                    { "value": 0, "name": "Smoking and nonsmoking sections" },
                    { "value": 0, "name": "Acoustics and music" }
                ]
            }
        },
        labels: {
            insideLabel: "always"
        },
        slice: {
            styleFunction: sliceStyle
        },
        filters: {
             allowZeroValues: true
        },
        interaction: {
            scrolling: {
                enabled: true
            },
            selection: {
                partialSwipe: true,
                maxSwipeDistance: 50
            }
        }
    });

    function sliceStyle(slice, data) {
        var alpha = 1;
        var color = "240,237,237";
        if (slice.id != null) {
            var vote = parseInt((slice.selection / 10).toFixed(0));
            slice.label.text = data.name;
            slice.insideLabel.text = vote;
            if (vote >= 5) {
                alpha = (0.5 / 5) * vote;
                color = "102,235,94";
            } else if (vote > 0) {
                color = "204,201,201";
            }
        }
        slice.fillColor = "rgba(" + color + "," + alpha + ")";
        slice.lineColor = "#B2B0B0";
        slice.insideLabel.textStyle.fillColor = "black";
    }

Data

Data 
//No separate data for this example