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

I found a solution for my problem.

Step 1: Create a kendo map first

    $("#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 called onShapeCreated, this function will call every time after a form created in Kendo map

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

      

        
        
        
      

    

Step 2: If you want to create a map in a state, you need to find the position of that state to find which uses the following 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 a pie chart on the map, first we need to create a div container and add it to the map in order to 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 this 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 to correctly place the map on the map.

    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
        });

}