locked
Resizable Chart RRS feed

  • Question

  • User-655396119 posted

    Hello Everyone,

    I am trying to make kind of a drawing board where i can show a resizable, zoomable graph wich has some informations when you mouseover on it.

    I am making steps foerward so now i can ajust the size of the drawing Board, but i am not getting it how to make the Chart resizable for this it would be great if somebody has some ideas. I can ajust the drawingboard so for my understanding it must work,  ... but it dont ....any ideas why?

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
    
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
           <style type="text/css">
            .resizablecss{
                padding:0px;
                border-style:solid;
                border-width:2px;
                border-color:gray;
                cursor: se-resize;
            }
            .main{
                width:20px;
                height:20px;
                cursor: se-resize;
            }
            
        </style>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
        
            </div>
    
    
    
    <div id="div_disc" runat="server">
        <asp:Panel ID="PnlContainer" runat="server" BackColor="#E2E9E9" Height="580px" Width="1110px">
            <asp:Chart ID="Chart1" runat="server" Height="450px" Width="700px" BackColor="WhiteSmoke" Palette="SeaGreen" EnableViewState="True">
                <series>
                    <asp:Series ChartType="Line" Name="Series1" YValuesPerPoint="6">
                    </asp:Series>
                </series>
                <chartareas>
                    <asp:ChartArea Name="ChartArea1">
                        <AxisY IntervalAutoMode="VariableCount">
                        </AxisY>
                        <AxisX IntervalAutoMode="VariableCount">
                        </AxisX>
                        <AxisX2 IntervalAutoMode="VariableCount">
                        </AxisX2>
                        <AxisY2 IntervalAutoMode="VariableCount">
                        </AxisY2>
                    </asp:ChartArea>
                </chartareas>
            </asp:Chart>
          
        
            <cc1:ResizableControlExtender 
                ID="Chart1_ResizableControlExtender" 
                 
                HandleCssClass="main"
                ResizableCSSClass="resizablecss"
                BehaviorID="PnlContainer_ResizableControlExtender" 
                TargetControlID="PnlContainer" 
                MaximumHeight="900"
                MaximumWidth="1400"
                MinimumHeight="400"
                MinimumWidth="400"
                runat="server" HandleOffsetX="3" HandleOffsetY="3"/>
    
                <cc1:ResizableControlExtender 
                ID="ResizableControlExtender1" 
                HandleCssClass="main"
                ResizableCSSClass="resizablecss"
                BehaviorID="Chart1_ResizableControlExtender" 
                TargetControlID="Chart1" 
                MaximumHeight="900"
                MaximumWidth="1400"
                MinimumHeight="450"
                MinimumWidth="700"
                runat="server" HandleOffsetX="12" HandleOffsetY="12"/>
        
            <cc1:DragPanelExtender 
                ID="Chart1_DragPanelExtender" 
                runat="server" 
                BehaviorID="Chart1_DragPanelExtender" 
                DragHandleID="Chart1" 
                TargetControlID="Chart1" />
        </asp:Panel>
    </div>
           
        </form>
    </body>
    </html>

    and here the default.aspx.cs file

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Web.UI.DataVisualization.Charting;
    using System.Drawing;
    
    
    
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
            //Farbe des Diagramms
            //   Chart1.Col
            //     Chart1.ChartArea1.Border.Color = ColorTranslator.ToOle(Color.Gray);
    
            // Obere und untere Toleranzgrenzen
            StripLine stripline2 = new StripLine();
            stripline2.StripWidth = 0;
            stripline2.BorderWidth = 2;
            stripline2.BorderColor = Color.Red;
            stripline2.IntervalOffset = 130;
    
            stripline2.BackColor = Color.FromArgb(120, Color.Red);
    
            Chart1.ChartAreas[0].AxisY.StripLines.Add(stripline2);
    
    
            StripLine stripline1 = new StripLine();
            stripline1.StripWidth = 0;
            stripline1.BorderWidth = 2;
            stripline1.BorderColor = Color.Red;
            stripline1.IntervalOffset = 80;
    
    
            stripline1.BackColor = Color.FromArgb(120, Color.Red);
    
            Chart1.ChartAreas[0].AxisY.StripLines.Add(stripline1);
    
            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("1", 112, "120/130");
                dt.Rows.Add("2", 108, "110/131");
                dt.Rows.Add("3", 107, "100/132");
                dt.Rows.Add("4", 111, "115/133");
                dt.Rows.Add("5", 121, "130/134");
                dt.Rows.Add("6", 114, "135/135");
                dt.Rows.Add("7", 145, "SN:00D112301");
                dt.Rows.Add("8", 111, "110/131");
                dt.Rows.Add("9", 100, "100/132");
                dt.Rows.Add("10", 116, "115/133");
                dt.Rows.Add("11", 119, "130/134");
                dt.Rows.Add("12", 123, "135/135");
                dt.Rows.Add("13", 124, "120/130");
                dt.Rows.Add("14", 124, "110/131");
                dt.Rows.Add("15", 121, "100/132");
                dt.Rows.Add("16", 111, "115/133");
                dt.Rows.Add("17", 114, "130/134");
                dt.Rows.Add("18", 121, "135/135");
                dt.Rows.Add("19", 120, "120/130");
                dt.Rows.Add("20", 110, "110/131");
                dt.Rows.Add("21", 100, "100/132");
                dt.Rows.Add("22", 105, "115/133");
                dt.Rows.Add("23", 130, "130/134");
                dt.Rows.Add("24", 115, "135/135");
                dt.Rows.Add("25", 120, "120/130");
                dt.Rows.Add("26", 110, "110/131");
                dt.Rows.Add("27", 100, "100/132");
                dt.Rows.Add("28", 115, "115/133");
                dt.Rows.Add("29", 118, "130/134");
                dt.Rows.Add("30", 114, "135/135");
                dt.Rows.Add("31", 120, "120/130");
                dt.Rows.Add("32", 110, "110/131");
                dt.Rows.Add("33", 108, "100/132");
                dt.Rows.Add("34", 115, "115/133");
                dt.Rows.Add("35", 114, "130/134");
                dt.Rows.Add("36", 121, "135/135");
                dt.Rows.Add("37", 120, "120/130");
                dt.Rows.Add("38", 108, "110/131");
                dt.Rows.Add("39", 107, "100/132");
                dt.Rows.Add("40", 120, "115/133");
                dt.Rows.Add("41", 110, "130/134");
                dt.Rows.Add("42", 115, "135/135");
                dt.Rows.Add("43", 125, "120/130");
                dt.Rows.Add("44", 110, "110/131");
                dt.Rows.Add("45", 100, "100/132");
                dt.Rows.Add("46", 115, "115/133");
                dt.Rows.Add("47", 130, "130/134");
                dt.Rows.Add("48", 115, "135/135");
                dt.Rows.Add("49", 120, "120/130");
                dt.Rows.Add("50", 110, "110/131");
                dt.Rows.Add("51", 112, "120/130");
                dt.Rows.Add("52", 108, "110/131");
                dt.Rows.Add("53", 107, "100/132");
                dt.Rows.Add("54", 111, "115/133");
                dt.Rows.Add("55", 121, "130/134");
                dt.Rows.Add("56", 114, "135/135");
                dt.Rows.Add("57", 145, "120/130");
                dt.Rows.Add("58", 111, "110/131");
                dt.Rows.Add("59", 100, "100/132");
                dt.Rows.Add("60", 116, "115/133");
                dt.Rows.Add("61", 119, "130/134");
                dt.Rows.Add("62", 123, "135/135");
                dt.Rows.Add("63", 124, "120/130");
                dt.Rows.Add("64", 124, "110/131");
                dt.Rows.Add("65", 121, "100/132");
                dt.Rows.Add("66", 111, "115/133");
                dt.Rows.Add("67", 114, "130/134");
                dt.Rows.Add("68", 121, "135/135");
                dt.Rows.Add("69", 120, "120/130");
                dt.Rows.Add("70", 110, "110/131");
                dt.Rows.Add("71", 100, "100/132");
                dt.Rows.Add("72", 105, "115/133");
                dt.Rows.Add("73", 130, "130/134");
                dt.Rows.Add("74", 115, "135/135");
                dt.Rows.Add("75", 120, "120/130");
                dt.Rows.Add("76", 110, "110/131");
                dt.Rows.Add("77", 100, "100/132");
                dt.Rows.Add("78", 115, "115/133");
                dt.Rows.Add("79", 124, "130/134");
                dt.Rows.Add("80", 120, "135/135");
                dt.Rows.Add("81", 120, "120/130");
                dt.Rows.Add("82", 110, "110/131");
                dt.Rows.Add("83", 108, "100/132");
                dt.Rows.Add("84", 115, "115/133");
                dt.Rows.Add("85", 114, "130/134");
                dt.Rows.Add("86", 121, "135/135");
                dt.Rows.Add("87", 120, "120/130");
                dt.Rows.Add("88", 108, "110/131");
                dt.Rows.Add("89", 107, "100/132");
                dt.Rows.Add("90", 105, "115/133");
                dt.Rows.Add("91", 110, "130/134");
                dt.Rows.Add("92", 115, "135/135");
                dt.Rows.Add("93", 100, "120/130");
                dt.Rows.Add("94", 110, "110/131");
                dt.Rows.Add("95", 100, "100/132");
                dt.Rows.Add("96", 115, "115/133");
                dt.Rows.Add("97", 110, "130/134");
                dt.Rows.Add("98", 115, "135/135");
                dt.Rows.Add("99", 120, "120/130");
                dt.Rows.Add("100", 110, "110/131");
                dt.Rows.Add("101", 112, "120/130");
                dt.Rows.Add("102", 108, "110/131");
                dt.Rows.Add("103", 107, "100/132");
                dt.Rows.Add("104", 111, "115/133");
                dt.Rows.Add("105", 121, "130/134");
                dt.Rows.Add("106", 114, "135/135");
                dt.Rows.Add("107", 124, "120/130");
                dt.Rows.Add("108", 111, "110/131");
                dt.Rows.Add("109", 100, "100/132");
                dt.Rows.Add("110", 116, "115/133");
                dt.Rows.Add("111", 119, "130/134");
                dt.Rows.Add("112", 123, "135/135");
                dt.Rows.Add("113", 124, "120/130");
                dt.Rows.Add("114", 124, "110/131");
                dt.Rows.Add("115", 121, "100/132");
                dt.Rows.Add("116", 111, "115/133");
                dt.Rows.Add("117", 114, "130/134");
                dt.Rows.Add("118", 121, "135/135");
                dt.Rows.Add("119", 120, "120/130");
                dt.Rows.Add("120", 110, "110/131");
                dt.Rows.Add("121", 100, "100/132");
                dt.Rows.Add("122", 105, "115/133");
                dt.Rows.Add("123", 121, "130/134");
                dt.Rows.Add("124", 115, "135/135");
                dt.Rows.Add("125", 120, "120/130");
                dt.Rows.Add("126", 110, "110/131");
                dt.Rows.Add("127", 100, "100/132");
                dt.Rows.Add("128", 115, "115/133");
                dt.Rows.Add("129", 108, "130/134");
                dt.Rows.Add("130", 114, "135/135");
                dt.Rows.Add("131", 120, "120/130");
                dt.Rows.Add("132", 110, "110/131");
                dt.Rows.Add("133", 108, "100/132");
                dt.Rows.Add("134", 115, "115/133");
                dt.Rows.Add("135", 114, "130/134");
                dt.Rows.Add("136", 121, "135/135");
                dt.Rows.Add("137", 120, "120/130");
                dt.Rows.Add("138", 108, "110/131");
                dt.Rows.Add("139", 107, "100/132");
                dt.Rows.Add("140", 105, "115/133");
                dt.Rows.Add("141", 110, "130/134");
                dt.Rows.Add("142", 115, "135/135");
                dt.Rows.Add("143", 120, "120/130");
                dt.Rows.Add("144", 110, "110/131");
                dt.Rows.Add("145", 100, "100/132");
                dt.Rows.Add("146", 115, "115/133");
                dt.Rows.Add("147", 130, "130/134");
                dt.Rows.Add("148", 115, "135/135");
                dt.Rows.Add("149", 120, "120/130");
                dt.Rows.Add("150", 110, "110/131");
                dt.Rows.Add("151", 112, "120/130");
                dt.Rows.Add("152", 108, "110/131");
                dt.Rows.Add("153", 107, "100/132");
                dt.Rows.Add("154", 111, "115/133");
                dt.Rows.Add("155", 121, "130/134");
                dt.Rows.Add("156", 114, "135/135");
                dt.Rows.Add("157", 124, "120/130");
                dt.Rows.Add("158", 111, "110/131");
                dt.Rows.Add("159", 100, "100/132");
                dt.Rows.Add("160", 116, "115/133");
                dt.Rows.Add("161", 119, "130/134");
                dt.Rows.Add("162", 123, "135/135");
                dt.Rows.Add("163", 124, "120/130");
                dt.Rows.Add("164", 124, "110/131");
                dt.Rows.Add("165", 121, "100/132");
                dt.Rows.Add("166", 111, "115/133");
                dt.Rows.Add("167", 114, "130/134");
                dt.Rows.Add("168", 121, "135/135");
                dt.Rows.Add("169", 120, "120/130");
                dt.Rows.Add("170", 110, "110/131");
                dt.Rows.Add("171", 100, "100/132");
                dt.Rows.Add("172", 105, "115/133");
                dt.Rows.Add("173", 130, "130/134");
                dt.Rows.Add("174", 115, "135/135");
                dt.Rows.Add("175", 120, "120/130");
                dt.Rows.Add("176", 110, "110/131");
                dt.Rows.Add("177", 100, "100/132");
                dt.Rows.Add("178", 115, "115/133");
                dt.Rows.Add("179", 130, "130/134");
                dt.Rows.Add("180", 115, "135/135");
                dt.Rows.Add("181", 120, "120/130");
                dt.Rows.Add("182", 110, "110/131");
                dt.Rows.Add("183", 108, "100/132");
                dt.Rows.Add("184", 115, "115/133");
                dt.Rows.Add("185", 114, "130/134");
                dt.Rows.Add("186", 121, "135/135");
                dt.Rows.Add("187", 120, "120/130");
                dt.Rows.Add("188", 108, "110/131");
                dt.Rows.Add("189", 107, "100/132");
                dt.Rows.Add("190", 105, "115/133");
                dt.Rows.Add("191", 110, "130/134");
                dt.Rows.Add("192", 115, "135/135");
                dt.Rows.Add("193", 113, "120/130");
                dt.Rows.Add("194", 110, "110/131");
                dt.Rows.Add("195", 100, "100/132");
                dt.Rows.Add("196", 115, "115/133");
                dt.Rows.Add("197", 130, "130/134");
                dt.Rows.Add("198", 115, "135/135");
                dt.Rows.Add("199", 120, "120/130");
                dt.Rows.Add("200", 110, "110/131");
    
                Chart1.Series[0].ChartType = SeriesChartType.Line;
    
                Chart1.Series[0].XValueMember = "END_TIME";
                Chart1.Series[0].YValueMembers = "SERIES_01";
    
                Chart1.DataSource = dt;
                Chart1.DataBind();
    
                for (int i = 0; i < Chart1.Series[0].Points.Count; i++)
                {
                    Chart1.Series[0].Points[i].ToolTip = dt.Rows[i]["SERIES_01_TOOLTIP"].ToString();
                }
            }
        }
    }
    

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

    with friendly regards

    franz

    Thursday, August 27, 2015 6:58 AM

Answers

  • User1724605321 posted

    Hi fsampl,

    From my point of view , you cannot resize the server side chart control with ResizableControlExtender  .In order to resize chart, you need to get a new chart image from the server. You cannot just scale the image to fit new size, because it will degrade the quality of the image. You could also refer to link below for details :

    https://social.msdn.microsoft.com/Forums/vstudio/en-US/f01d6ab8-01a7-417b-b2ac-e94e677b2182

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 28, 2015 5:40 AM