This is a migrated thread and some comments may be shown as answers.

Drill through on Bar Chart

1 Answer 74 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 15 Oct 2015, 01:15 PM

I would like to implement a drill through type action on a bar charts series.

Here is what i have so far:

@(Html.Kendo().Chart<BetaSMTRApp.Business.PrivateReportCardCumulativeInvestments>()
                            .Name("ChartInvestmentCumulations_" + item.FUND_INT.ToString())
                            //.Title("Cumulative Investments")
                            .Legend(legend => legend
                                        .Position(ChartLegendPosition.Top)
                                    )
                            .DataSource(dataSource => dataSource
                                            .Read(read => read.Action("GetCumulativeInvestments", "PrivateReportCard", new { fundInt = item.FUND_INT }))
                                          )
 
                            .Series(series =>
                            {
                                series.Column(model => model.Commitments).Name("Commitments").Color("Red");
                                series.Column(model => model.Distributions).Name("Distributions").Color("Green");
                                series.Column(model => model.Draw_Down).Name("DrawDowns").Color("Yellow");
                                series.Column(model => model.Fees).Name("Fees").Color("Brown");
                            })
                            .CategoryAxis(axis => axis
                                .Categories(model => model.YearCategory)
 
                            )
                            .ValueAxis(axis => axis.Numeric()
                                .Labels(labels => labels
                                    .Format("${0}")
                                )
                            )
                            .Tooltip(tooltip => tooltip
                                    .Visible(true)
                                    .Template("#= series.name #: #= value #")
                            )
                            .Events (events=>events.SeriesClick("onSeriesClick"))
 
)

 

Javascript/JQuery

function onSeriesClick(e) {
    $("#window").data("kendoWindow").open();
    $("#undo").hide();
};

Kendo Window

@(Html.Kendo().Window()
    .Name("window")
    .Title("About Alvar Aalto")
    .Content(@<text>
        <div class="armchair">
            <img src="@Url.Content("~/content/web/window/armchair-402.png")"
                 alt="Artek Alvar Aalto - Armchair 402" />
            Artek Alvar Aalto - Armchair 402
        </div>
 
        <p>
            Alvar Aalto is one of the greatest names in modern architecture and design.
            Glassblowers at the iittala factory still meticulously handcraft the legendary
            vases that are variations on one theme, fluid organic shapes that let the end user
            ecide the use. Interpretations of the shape in new colors and materials add to the
            growing Alvar Aalto Collection that remains true to his original design.
        </p>
 
        <p>
            Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland,
            was noted for his humanistic approach to modernism. He studied architecture at the
            Helsinki University of Technology from 1916 to 1921. In 1924 he married architect
            Aino Marsio.
        </p>
 
        <p>
            Alvar Aalto was one of the first and most influential architects of the Scandinavian
            modern movement, and a member of the Congres Internationaux d'Architecture Moderne.
            Major architectural works include the Finlandia Hall in Helsinki, Finland,
            and the campus of Helsinki University of Technology.
        </p>
 
        <p>
            Source:
            <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a>
        </p>
    </text>)
    .Draggable()
    .Resizable()
    .Visible(false)
    .Width(600)
    .Actions(actions => actions.Pin().Minimize().Maximize().Close())
)

Oh and yes i know that the window is displaying static text... i will eventually be putting in a Grid to display the detail records (and question #2 relates to it) 

 

Here are my 2 issues/questions:

1. The window does pop up when i click on a series.  However the page behind it goes white and only the contents of the window appear.  Is there a way to allow the calling web page still appear (and not go blank).

2. In the javascript call to open the window is it possible to pass the contents of e to it (e contains parameter values that i want to use in the pop up window).

Thanks,

Corey

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 20 Oct 2015, 07:39 AM
Hello Corey,

There are not any known reasons for the page to become blank when opening a window. Can the problem be reproduced on your side in our demos? If not, then could you provide a runnable sample that demonstrates the problem?

I am not sure if I understand the other question but if the content should be loaded from the server and you need to pass the series click parameters to the action method, then you can set the data option in the object passed to the refresh method. If the content should not be loaded from the server then please clarify how should the parameters be used in the window.

Regards,
Daniel
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chart
Asked by
Paul
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or