Kendo Chart

Controller Code :

 public JsonResult FillScoreCard()

        {

            List<ChartMetadata> lst = new List<ChartMetadata>() { 

            new ChartMetadata(){ Value=100,Text="Siv",Code="#00FFFF"},

            new ChartMetadata(){ Value=200,Text="Sankar",Code="#FFFF00"},

            new ChartMetadata(){ Value=300,Text="Mahadev",Code="#4E9258"},

            };

            return Json(lst,JsonRequestBehavior.AllowGet);

        }

View code :

<div style="width:100%;">
    <div style="width:49%;float:left; border:1px solid #808080; margin-top:50px">

        <div id="ScoreCard" style="width:500px;"></div>

    </div>
    <div style="width:49%;float:right;border:1px solid #808080;margin-top:50px">

        <div id="PurchaseSummary" style="width:500px;"></div>

    </div>

</div>
<script>
    $(function () {
        $.ajax({
            url: '@Url.Action("FillScoreCard", "VendorPortal")',
            type: 'GET',
            dataType: 'json',
            cache: false,
            success: function (data1) {
                $("#ScoreCard").kendoChart({
                    dataSource: {
                        data: data1
                    },
                    title: {
                        text: "Score Card",
                        color: "#2B65EC"
                    },
                    legend: {
                        position: "left"
                    },
                    seriesDefaults: {
                        type: "column",
                        labels: {
                            visible: true,
                            background: "transparent"
                        }
                    },
                    categoryAxis: [{
                        field: "Text",
                        majorGridLines: {
                            visible: false
                        },
                     
                        title: {
                            text: "Criteria",
                            background: "#4682B4",
                            color: "#ffffff",
                            padding: 15

                        },
                        labels: {

                        }

                    }],
                    valueAxis: [{
                        title: {
                            text: "Count",
                            background: "#4682B4",
                            color: "#ffffff",
                            padding: 15,
                        },
                        majorUnit: 50,
                        max: 500,
                        min: 0 ,
                        majorGridLines: {
                            visible: false
                        },
                    }],
                    series: [{
                        field: "Value",
                        colorField: "Code"
                    }

                    ]
                });
            }

        });
        $.ajax({
            url: '@Url.Action("FillPurchaseSummary", "VendorPortal")',
            type: 'GET',
            dataType: 'json',
            cache: false,
            success: function (data1) {
                $("#PurchaseSummary").kendoChart({
                    dataSource: {
                        data: data1
                    },
                    title: {
                        text: "Purchase Summary",
                        color: "#2B65EC"
                    },
                    legend: {
                        position: "left"
                    },
                    seriesDefaults: {
                        type: "column",
                        labels: {
                            visible: true,
                            background: "transparent"
                        }
                    },
                    categoryAxis: [{
                        field: "Text",
                        majorGridLines: {
                            visible: false
                        },
                        title: {
                            text: "Status",
                            background: "#4682B4",
                            color: "#ffffff",
                            padding: 15
                        }

                    }],
                    valueAxis: [{
                        title: {
                            text: "Count",
                            background: "#4682B4",
                            color: "#ffffff",
                            padding: 15
                        },
                        majorUnit: 50,
                        max: 500,
                        min: 0,
                        majorGridLines: {
                            visible: false
                        },
                    }],
                    series: [{

                        field: "Value",
                        colorField: "Code"
                    }

                    ]
                });
            }

        });

    });

</script>


Y-axis value fill dynamically


<script>


$(function () {

       




$.ajax({


url: '@Url.Action("FillScoreCard", "VendorPortal")',

type: 'GET',

dataType: 'json',

cache: false,






data:{VendorId:@Model.VendorId},


success: function (data1) {

var max1=0;

var interval=0;

for(var i=0;i<data1.length;i++)

if(max1<data1[i].Value)






max1=data1[i].Value;


max1=max1*2;


if(max1<=100)






interval=5;


else if(max1>100 && max1<=200)






interval=10;


else if(max1>200 && max1<=300)






interval=20;


else





interval=50;


$("#ScoreCard").kendoChart({






dataSource: {


data: data1


},





legend: {


position: "left"





},


seriesDefaults: {


type: "column",






labels: {


visible: true,

background: "transparent"





}


},


categoryAxis: [{


field: "Text",






majorGridLines: {


visible: false





},


title: {


text: "(Product Count) Criteria",

background: "#4682B4",

color: "#ffffff",






padding: 10


},


labels: {


}


}],


valueAxis: [{


title: {


text: "Count",

background: "#4682B4",

color: "#ffffff",






padding: 10,


},


majorUnit: interval,


max: max1,


min: 0,


majorGridLines: {


visible: false





},


}],


series: [{


field: "Value",

colorField: "Code"





}


]


});


}


});


$.ajax({


url: '@Url.Action("FillPurchaseSummary", "VendorPortal")',

type: 'GET',

dataType: 'json',

cache: false,






data:{VendorId:@Model.VendorId},


success: function (data1) {

var max1=0;

var interval=0;

for(var i=0;i<data1.length;i++)

if(max1<data1[i].Value)






max1=data1[i].Value;


max1=max1*2;


if(max1<=100)






interval=5;


else if(max1>100 && max1<=200)






interval=10;


else if(max1>200 && max1<=300)






interval=20;


else





interval=50;


$("#PurchaseSummary").kendoChart({






dataSource: {


data: data1


},





legend: {


position: "left"





},


seriesDefaults: {


type: "column",






labels: {


visible: true,

background: "transparent"





}


},


categoryAxis: [{


field: "Text",






majorGridLines: {


visible: false





},


title: {


text: "Status",

background: "#4682B4",

color: "#ffffff",






padding: 10


}


}],


valueAxis: [{


title: {


text: "Count",

background: "#4682B4",

color: "#ffffff",






padding: 10


},


majorUnit: interval,


max: max1,


min: 0,


majorGridLines: {


visible: false





},


}],


series: [{


field: "Value",

colorField: "Code"





}


]


});


}


});


});


</script>