Remove From My Forums

Resizable Chart

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

0

Sign in to vote
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

Answered by:

Resizable Chart

Question

Answers