Home

fx-pie-charts

Live demos for JavaScript plugins & modules by Amphiluke

Below, you'll find some demos using fx-pie-charts, a JavaScript module for pie charts plotting.

Example #1: Using the module in jQuery environment

Show source 
var colors = ["red", "green", "blue"];
$("#chart-wrap-jquery").fxPieChart({
    data: [12, 20, 15], // an attribute `data-fx-chart="12,20,15"` may be used instead
    colors: colors,
    handlers: {
        click: function (event, pieIndex) {
            $("#selected-pie").html(
                "\x3Cspan style='color:" + colors[pieIndex] + "'\x3E" +
                colors[pieIndex] + "\x3C/span\x3E pie is clicked"
            );
        }
    }
});

Click some pie

Example #2: Using the module as a standalone script

Show source 
var data = document.getElementById("chart-wrap-standalone").getAttribute("data-fx-chart").split(",");
fxPieChart({
    container: "chart-wrap-standalone", // target container's id is required in standalone mode
    colors: ["red", "blue", "yellow", "maroon", "silver", "#0a0"],
    handlers: {
        mouseover: function (e, index) {
            document.getElementById("hovered-pie-data").innerHTML = data[index];
        }
    }
});

Hover the mouse pointer over some pie to see its value

Links