How to place pie charts instead of markers in kendo ui maps

Question

I need to create a map widget using kendo map UI .I have to replace the markers with pie chart like this . Is it possible to create a map widget using kendo ??? , If it is possible how can I do that .I dont know how to make this I'm new to Kendo. Please Help me...

Answer 1

I found a solution for my problem.

Step 1: First create a kendo map

    $("#geoMap").kendoMap({
        renderAs: "canvas",
        center: [39.6924, -97.3370],
        zoom: 4,
        controls: {
            attribution: false,
            navigator: false,
            zoom: false
        },
        layers: [{
            type: "shape",
            dataSource: {
                type: "geojson",
                transport: {
                    read: "/Scripts/kendo/us.geo.json"
                }
            },
            style: {
                stroke: {
                    color: "#A3A396"
                },
                fill: {
                    color: "#E6E6D4"
                }
            }
        }],
        shapeCreated: onShapeCreated,
        reset: reset
    });

Create a function named onShapeCreated, this function will call each time after the shape created in Kendo map

function onShapeCreated(event)
{
 .......
}

Step 2 : If you want to create a map on a state then you need to find the position of that state to find that use the below function

function getShapePositions(event)
{
        var result = {};
        var segments = event.shape.segments;
        result.minX = Number.MAX_VALUE;
        result.maxX = Number.MIN_VALUE;

        result.minY = Number.MAX_VALUE;
        result.maxY = Number.MIN_VALUE;
        if (segments) {
            for (var i = 0; i < segments.length; i++) {
                var anchor = segments[i].anchor();
                result.minX = Math.min(result.minX, anchor.x);
                result.maxX = Math.max(result.maxX, anchor.x);

                result.minY = Math.min(result.minY, anchor.y);
                result.maxY = Math.max(result.maxY, anchor.y);
            }
        }

        result.width = result.maxX - result.minX;
        result.height = result.maxY - result.minY;

        return result;

}

Step 3: To create the pie chart on map, first we need to create a container div and append it to the map to do that use the following code

var chartDiv = $("<div id=" + event.shape.dataItem.properties.code + " class='state-code-label'></div>")
                .appendTo(event.sender.scrollElement); 

Step 4. After creating the container, create a pie chart using that container

  function createPieChart(chartDiv)
{
        $(chartDiv).kendoChart({
            renderAs: "canvas",
            title: {
                visible: false
            },
            transitions: false,
            legend: {
                visible: false
            },
            chartArea: {
                height: 100,
                width: 100,
                background: ""
            },
            data: [{
                    category: "Test",
                    value: 53.8,
                    color: "#9de219"
                },{
                    category: "Test1",
                    value: 3.6,
                    color: "#033939"
                }]
            }],
            seriesDefaults: {
                labels: {
                    visible: false
                },
                overLay: {
                    gradient: null
                }
            },
            seriesColors: ["#8F0000", "#CCCCCC"],
            series: [{
                type: "pie",
                field: "Amount",
                categoryField: "Category"
            }],
            tooltip: {
                visible: false
            }
        });
}

Step 5 : Finally use the position object for placing the chart on map correctly.

    chartDiv.css({
        top: position.minY + position.height / 2 - chartDiv.height() / 2,
        left: position.minX + position.width / 2 - chartDiv.width() / 2
    });

Now The onShapeCreated function will look like this

function onShapeCreated(event)
{
     var position = getShapePositions(event);

        var chartDiv = $("<div id=" + event.shape.dataItem.properties.code + " class='state-code-label'></div>")
                        .appendTo(event.sender.scrollElement);

createPieChart(chartDiv);

        chartDiv.css({
            top: position.minY + position.height / 2 - chartDiv.height() / 2,
            left: position.minX + position.width / 2 - chartDiv.width() / 2
        });

}