getKendoChart() is showing as undefiend in javascript

Question

I am forming the kendo char chart in the below way. In javascript getKendoChart is coming as undefined. Could you please check and let me know how to resolve this.

var rdChartBy = '@Model.paretoFilters.ReportBy';
    if(rdChartBy == 'Project Submitted')
        $("#rbnprojSub").prop("checked", true);
    if(rdChartBy == 'FA Completed')
        $("#rbnprojComp").prop("checked", true);
    var paretoData = @Html.Raw(Json.Encode(@Model.paretoChartData));

    var dsParetoData = new kendo.data.DataSource({
        data: paretoData
    });

    $("#ParetoChart").kendoChart({
        title: {
            text: "Pareto Chart Report",
            font: "bold 20px Arial,Helvetica,sans-serif",
            color: "brown"
        },

        dataSource: dsParetoData,
        series: [{
            type: "column",           
            categoryField: "Month",
            name : "No.Of Projects",
            field:"No_Of_Projects"
        },{
            type:"line",
            categoryField:"Month",           
            style: "rigid",
            name:"Cumilative%",
            field:"Cumulative"
        }],

        valueAxis: {
            title: {
                text: "No.OfProjects/Cumilative%",
                font: "bold 15px Arial,Helvetica,sans-serif",
                color: "brown"
            }
        },
        chartArea: {
            width: 850,
            height: 400
        },
        categoryAxis:{
            title: {
                text: "Month",
                font: "bold 18px Arial,Helvetica,sans-serif",
                color: "brown"
            },
            labels: { rotation: -45 },
            width:50
        },

        tooltip: {
            visible: true,
            template: "${series.name} : ${value}"
        }
    });

    function exportChart(e)
    {      
        debugger;

        var chart = $("#ParetoChart").getKendoChart();
        chart.exportImage().done(function (data) {
            kendo.saveAs({
                dataURI: data,
                fileName: "chart.png",
                proxyURL: "@Url.Action("Export_Save", "Chart_Api")"
            });
        });

score 1 · Answer 1 · answered Jun 02 '15 at 12:47

1

Try replacing

var chart = $("#ParetoChart").getKendoChart();

with

var chart = $("#ParetoChart").data("kendoChart");

answered Jun 02 '15 at 12:47

Robin Giltner

3,057
2
18
26

Strange, that exact code should work. See working sample http://jsbin.com/vigedu/1/edit?html,js,console,output So when you call var chart = $("#ParetoChart").data("kendoChart"); Does it throw an error onto the console ? Or is chart just null after that ? – Robin Giltner Jun 02 '15 at 13:25
Hi Robin,Its not throwing any error chart is showing as null.What else could be the reason. – Samanth Kolisetty Jun 03 '15 at 04:51
Hi Robin, This is the data i am getting var paretoData = [{"Month":"June2014","No_Of_Projects":"0","Cumulative":"0"},{"Month":"July2014","No_Of_Projects":"0","Cumulative":"0"},{"Month":"August2014","No_Of_Projects":"0","Cumulative":"0"},{"Month":"September2014","No_Of_Projects":"0","Cumulative":"0"}]; Please try in fiddler and see – Samanth Kolisetty Jun 03 '15 at 05:52
Here is your code, with your data, and it seems to work perfectly. http://jsbin.com/vigedu/2/edit?html,js,output Edit your original question, and include your js references you have on the page. – Robin Giltner Jun 03 '15 at 13:06
Hi Robin, I have tried by including JS files on my page but still my chart is coming as undefined. – Samanth Kolisetty Jun 03 '15 at 13:18
Which kendo js files are you including in your application ? And in what order ? – Robin Giltner Jun 03 '15 at 14:56
The files which u gave in fiddler I have included as it is. – Samanth Kolisetty Jun 04 '15 at 01:22
Hi Robin, What else might be the issue?? – Samanth Kolisetty Jun 05 '15 at 12:24
What was that fillder link you have ? – Robin Giltner Jun 05 '15 at 13:22
That jsbin appears to work fine. Must be something different in your application. – Robin Giltner Jun 09 '15 at 14:17
I have included the same in my project as well. Not sure what might be the issue. – Samanth Kolisetty Jun 10 '15 at 06:10
Hi Robin, Now i am able to export the chart image but i want to save in particular path without asking for save.Could you please help me on this. – Samanth Kolisetty Aug 20 '15 at 12:17
I believe that is just browser behavior. IE will prompt me to save/cancel, while Chrome will just download it to my Downloads folder. – Robin Giltner Aug 21 '15 at 14:46
Yes i understand but it is not hitting the controller after save the code is stopping after that. Is there any other way i can hit the controller? – Samanth Kolisetty Aug 27 '15 at 09:39
Hi Robin,Please help me on this – Samanth Kolisetty Sep 01 '15 at 13:32
It isn't hitting the proxyURL controller action ? If you watch fiddler, is it trying to make the call and returning a 404/403 or some other error ? – Robin Giltner Sep 01 '15 at 14:37
Now i am able to hit the controller but the image asks for save after controller code is executed but i want to save the image so that i can include that image in Excel. If possible could you please provide me one sample example? Thanks – Samanth Kolisetty Sep 02 '15 at 05:09
As I commented above, I think that is browser behavior and have no idea how to override that. – Robin Giltner Sep 02 '15 at 12:52
Hi Robin,Could you please help on this thread http://stackoverflow.com/questions/34334829/kendo-chart-rendering-very-slow – Samanth Kolisetty Dec 18 '15 at 05:06
Hi Robin, Could you please help me on this question.http://stackoverflow.com/questions/35747532/kendo-chart-category-axis-fix-number-of-labels – Samanth Kolisetty Mar 02 '16 at 12:42

getKendoChart() is showing as undefiend in javascript

1 Answers1