CODEWITHSUNDEEP
asp.netajaxvb.net
Selrac
Selrac

Reputation: 2293

Popup chart in vb.net on mouse over

I'm looking to simulate the functionality of FINVIZ.COM where, when you hover over a value (the Ticker simbol in their case) a chart pops up.

Is this possible to do it in asp.net? Maybe be using an AJAX control?

Any hints will be apprecaited

Thanks

Upvotes: 0

Views: 1403

Answers (2)

Selrac
Selrac

Reputation: 2293

I managed to do it with the help from another stackoverflow page (jQuery popup div in gridview)

Here is my code example in case it helps anyone:

Style

     .HoverDesc{
        Position:relative;
    }

    .HoverDesc Strong{
        display:block;
        line-height:20px;
        white-space:nowrap;
        cursor:pointer;
    }
    .HoverDesc p{
        z-index:5;
        display:none;
        padding:10px;
        margin:0;
        background:#ccc;
        position:absolute;
        top:20px;
        left:0;            
    }

jQuery Include

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
    jQuery(document).ready(function ($) {
        $('.HoverDesc').hover(function () {
            $(this).find('p').show(200);
        }, function () {
            $(this).find('p').hide(100);
        });
    });
 </script>

ASPX GridView

<asp:GridView ID="Table0" runat="server" AutoGenerateColumns="False" DataSourceID="SQL">
    <Columns>
        <asp:BoundField DataField="name" HeaderText="Group" SortExpression="name" />
        <asp:BoundField DataField="ASL" HeaderText="SL" ReadOnly="True" />
        <asp:TemplateField>
            <ItemTemplate>
                <div class="HoverDesc">
                    <asp:Image ID="Image5" runat="server" Height="20px" src="Images/Icons/iGreen.png" />
                    <p>
                        <asp:Chart ID="Chart2" runat="server" DataSourceID="SqlDataSource1" Height="141px">
                            <Series>
                                <asp:Series ChartType="Line" Name="Series1" XValueMember="date" YValueMembers="Value">
                                </asp:Series>
                            </Series>
                            <ChartAreas>
                                <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
                            </ChartAreas>
                        </asp:Chart>
                    </p>
                </div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

I have to figure out how to link the row information to the query now, so that the chart displayed is relevant to the row I'm hovering, but that is another story...

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28437

You may want to look at: http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591

Download the demo and browse through. You will find examples of doing exactly what you want.

Read more about it here: http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx

Upvotes: 1

Related Questions