locked
How to make Charts interactive? RRS feed

  • Question

  • User-655396119 posted

    Hello,

    I'm pritty new to this community and I do have 2 essential questions about charts especially linecharts. I want to show some line charts on a homepage, for this I created a webpage project in visual studio 2013. I could manage to insert a database connection to the slq server and inserted a line chart on the webpage. Now I can see my values in a linecharts. Thats great but the next step is huge and I am not sure if I am going in the right direction. I want to stay as long as possible in the visual studio framework and programm in C# if needed. So far now to my needs.

    Currently my chart is only a picture on the webpage. But my needs are to visualize some informations about the measurement points (for example serialnumber, date, worker all kinds of extra stuff) from the database. Therefore I need to know how can i implement a mouseover information for those data?

    Also I want to insert some Lines to a linechart diagram so everyone can see an upper or an lower tolerance so the information if this measurement point is in the tolerance or not.

    Of course this toppic has been asked thousends of times I couldnt find some toppics for especialy those 2 problems.

    It would be great if somebody could give me some advices :-)

    with friendly regards

    franz

    Thursday, August 20, 2015 4:47 AM

Answers

  • User61956409 posted

    Hi franz,

    Welcome to ASP.NET forum.

    need to know how can i implement a mouseover information for those data?

    We could show “serialnumber”, “date”, “worker” information in ToolTip, if we hover on the point, the information will be displayed. The following sample is for your reference.

    <asp:Chart ID="Type_1_Chart" runat="server">
        <Series>
            <asp:Series Name="Series1"></asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
        </ChartAreas>
    </asp:Chart>
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("END_TIME");
            dt.Columns.Add("SERIES_01");
            dt.Columns.Add("SERIES_01_TOOLTIP");
    
            dt.Rows.Add("7/13/2015", 120, "7/13");
            dt.Rows.Add("7/14/2015", 93, "7/14");
            dt.Rows.Add("7/15/2015", 116, "7/15");
            dt.Rows.Add("7/16/2015", 215, "7/16");
            dt.Rows.Add("7/17/2015", 198, "7/17");
    
            Type_1_Chart.Series[0].ChartType = SeriesChartType.Line;
    
            Type_1_Chart.Series[0].XValueMember = "END_TIME";
            Type_1_Chart.Series[0].YValueMembers = "SERIES_01";          
    
            Type_1_Chart.DataSource = dt;
            Type_1_Chart.DataBind();
    
            for (int i = 0; i < Type_1_Chart.Series[0].Points.Count; i++)
            {
                Type_1_Chart.Series[0].Points[i].ToolTip = dt.Rows[i]["SERIES_01_TOOLTIP"].ToString();
            }
        }
    } 
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 20, 2015 10:37 PM
  • User-655396119 posted

    thanks mate ! where to donate?

    i also found out how to insert some lines with striplines. :-)

    chart

    next questions are zooming in all directions for more than 1000 values and making also dots on the values to visualise them better.

    but thank you very much fei han!!! :-) :-)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 25, 2015 10:58 AM

All replies

  • User61956409 posted

    Hi franz,

    Welcome to ASP.NET forum.

    need to know how can i implement a mouseover information for those data?

    We could show “serialnumber”, “date”, “worker” information in ToolTip, if we hover on the point, the information will be displayed. The following sample is for your reference.

    <asp:Chart ID="Type_1_Chart" runat="server">
        <Series>
            <asp:Series Name="Series1"></asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
        </ChartAreas>
    </asp:Chart>
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("END_TIME");
            dt.Columns.Add("SERIES_01");
            dt.Columns.Add("SERIES_01_TOOLTIP");
    
            dt.Rows.Add("7/13/2015", 120, "7/13");
            dt.Rows.Add("7/14/2015", 93, "7/14");
            dt.Rows.Add("7/15/2015", 116, "7/15");
            dt.Rows.Add("7/16/2015", 215, "7/16");
            dt.Rows.Add("7/17/2015", 198, "7/17");
    
            Type_1_Chart.Series[0].ChartType = SeriesChartType.Line;
    
            Type_1_Chart.Series[0].XValueMember = "END_TIME";
            Type_1_Chart.Series[0].YValueMembers = "SERIES_01";          
    
            Type_1_Chart.DataSource = dt;
            Type_1_Chart.DataBind();
    
            for (int i = 0; i < Type_1_Chart.Series[0].Points.Count; i++)
            {
                Type_1_Chart.Series[0].Points[i].ToolTip = dt.Rows[i]["SERIES_01_TOOLTIP"].ToString();
            }
        }
    } 
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 20, 2015 10:37 PM
  • User-655396119 posted

    thanks mate ! where to donate?

    i also found out how to insert some lines with striplines. :-)

    chart

    next questions are zooming in all directions for more than 1000 values and making also dots on the values to visualise them better.

    but thank you very much fei han!!! :-) :-)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 25, 2015 10:58 AM