Back

Pie Chart on Geo Chart

Map chart of the US, where each state displays a pie chart. With 'layers', you can display different chart types from ZoomCharts library on top of your map chart.

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 

    var sliceColors = ["#6f52b8","#ffd618","#2fc32f", "#b0dc0b", "#eab404", "#de672c"];
    var options = {
        area: { height: null },
        container: document.getElementById("demo"),
        data:[
            {
                id:"shapes",
                url:"/dvsl/data/geo-chart/states.json",
				perBoundsData: false
            }
        ],
        layers:[
            {
                id:"shapes",
                type:"shapes",
                data:{
                    id:"shapes"
                },
                style:{

                    nodeStyleFunction:function(node){
                        node.fillColor = "rgba(0, 153, 204, 0.4)";
                        node.lineColor = "#f3f3f3";
                        node.lineWidth = 1;
                    }
                }
            },
            {
                id: "pie",
                type: "charts",
                shapesLayer:"shapes",
                chartType: "piechart",
                settingsFunction: function (node, data) {
                    return {
                        pie: {
                            //radius: 20
                            radius: node.radius - 3,
                            innerRadius: 15,
                            style: {
                                sliceColors: sliceColors,
                                colorDistribution: "list",
                            }
                        },
                        area: {
                            width: 300,
                            height: null
                        },
                        labels: {
                            enabled: false
                        },
                        data: {
                            preloaded: {
                                subvalues: [{
                                    value: Math.random() * 100
                                }, {
                                    value: Math.random() * 50
                                }]
                            }
                        }
                    };
                }
            }
        ],
        navigation:{
            drilldownLayer: "shapes",
            initialLat: 39.87601941962116,
            initialLng: -102.87597656249999,
            initialZoom: 5,
            minZoom: 5
        }
    };

    chart = new GeoChart(options);

Data

Data 
//No separate data for this example