Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    Chart/ User Interaction / Drag and Drop
    Allow Drag
    Drag Type
    Series Type
    <%@ Page Title="Chart-Data Editing-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This sample demonstrates how to perform drag and drop for series types using Syncfusion ASP.NET Web Forms Chart control" MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true" CodeBehind="DragDrop.aspx.cs" Inherits="WebSampleBrowser.Chart.DragDrop" %>
    
    <asp:Content ID="Content4" runat="server" ContentPlaceHolderID="SampleHeading">
        <span class="sampleName">Chart/ User Interaction / Drag and Drop</span>
    </asp:Content>
    <asp:Content ID="ControlContent" runat="server" ContentPlaceHolderID="ControlsSection">  
        <div>
            <ej:Chart ClientIDMode="Static" ID="Chart1" runat="server" Width="700" Height="600" IsResponsive="true" OnClientLoad="chartLoad">           
                <PrimaryXAxis  Title-Text="Months" ValueType="Datetime" LabelFormat="MMM/yyyy" IntervalType="Months" EdgeLabelPlacement="Shift"/>
                <PrimaryYAxis Title-Text="Sales Count" />
                <CommonSeriesOptions Type="Line" EnableAnimation="true" Tooltip-Visible="true" Marker-Visible="true">
                    <DragSettings Enable="true" />
                </CommonSeriesOptions>
                <Series>                
                    <ej:Series Name="Product 1" XName="XValue1" YName="YValue1" Size="Size1"></ej:Series>
                    <ej:Series Name="Product 2" XName="XValue2" YName="YValue2" Size="Size2"></ej:Series>
                </Series>                     
                <Title Text="Sales Prediction of Products"></Title>
                <Legend Visible="True"></Legend>
            </ej:Chart> 
        </div> 
    </asp:Content>
    
    <asp:Content ID="Content3" runat="server" ContentPlaceHolderID="PropertySection">
        <div id="sampleProperties">
            <div class="prop-grid">                
                            <div class="row" style="margin: 10px 0;">
                                <div class="col-md-3">
                                    Allow Drag
                                </div>
                                <div class="col-md-3 aligntop">
                                    <input type="checkbox" checked="checked"  id="enabledrag"/>
                                </div>
                                </div>
                            <div class="row" style="margin: 10px 0;">
                                <div class="col-md-3">
                                      Drag Type
                                </div>
                                <div class="col-md-3 aligntop">
                                    <select name="selectIndex" autocomplete="off" id="dragtype" style="width:100px;">
                                        <option value="XY">XY</option>
                                        <option value="X">X</option>
                                        <option value="Y">Y</option>
                                    </select>
                                </div>
                                
                            </div>
                            
                            <div class="row" style="margin: 10px 0;">
                                <div class="col-md-3">
                                     Series Type
                                </div>
                                <div class="col-md-3 aligntop">
                                    <select name="selectIndex" autocomplete="off" id="charttype">
                                        <option value=0>Line</option>
                                        <option value=1>Spline</option>
                                        <option value=2>Area</option>
                                        <option value=3>Column</option>
                                        <option value=4>Bar</option>
                                        <option value=5>Bubble</option>
                                        <option value=6>Scatter</option>
                                        <option value=7>Step Area</option>
                                        <option value=8>Step Line</option>
                                        <option value=9>Spline Area</option>
                                    </select>
                                </div>
                            </div>                
            </div>
        </div>
                        
        <script type="text/javascript">
           
            $('#enabledrag').change(function () {
                var chart = $("#Chart1").ejChart("instance");
                for (var i = 0; i < chart.model.series.length; i++) {
                    if ($("#enabledrag").is(":checked"))
                        chart.model.series[i].dragSettings.enable = true;
                    else
                        chart.model.series[i].dragSettings.enable = false;
                }
                chart.redraw();
            });        
            $('#dragtype').change(function () {
                var option = $("#dragtype option:selected").text();
                $("#Chart1").ejChart("option", { "commonSeriesOptions": { dragSettings: { type: option } } });
            });
            $('#charttype').change(function () {
                var option = $("#charttype option:selected").text();
                option = option.replace(/\s/g, '');
                var seriestype = option.toLowerCase();
                $("#Chart1").ejChart("option", { "commonSeriesOptions": { type: option } });
                if (seriestype == "bar" || seriestype == "column" || seriestype == "bubble")
                    $("#Chart1").ejChart("option", { "commonSeriesOptions": { marker: { visible: false } } });
                else if (seriestype == "scatter")
                    $("#Chart1").ejChart("option", { "commonSeriesOptions": { marker: { size: { height: 10, width: 10 } } } });
                else
                    $("#Chart1").ejChart("option", { "commonSeriesOptions": { marker: { visible: true, size: { height: 6, width: 6 } } } });
            });
    
            $("#sampleProperties").ejPropertiesPanel();
    
        </script>
      
    </asp:Content>
    
    
    using Syncfusion.JavaScript.DataVisualization;
    using Syncfusion.JavaScript.DataVisualization.Models;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebSampleBrowser.Chart
    {
        public partial class DragDrop : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                this.Chart1.PrimaryXAxis.Range.Min = new DateTime(2015, 01, 01);
                this.Chart1.PrimaryXAxis.Range.Max = new DateTime(2015, 05, 01);
                this.Chart1.PrimaryXAxis.Range.Interval = 1;
    
                this.Chart1.PrimaryYAxis.Range.Min = 500;
                this.Chart1.PrimaryYAxis.Range.Max = 1500;
                this.Chart1.PrimaryYAxis.Range.Interval = 100;
    
                List<DatetimeData1> data = new List<DatetimeData1>();
    
                data.Add(new DatetimeData1(new DateTime(2015, 01, 01), 950, 700, 9.5, 7));
                data.Add(new DatetimeData1(new DateTime(2015, 02, 01), 1200, 900, 12, 9));
                data.Add(new DatetimeData1(new DateTime(2015, 03, 01), 1000, 800, 10, 8));
                data.Add(new DatetimeData1(new DateTime(2015, 04, 01), 1350, 1050, 13.5, 10.5));
                data.Add(new DatetimeData1(new DateTime(2015, 05, 01), 1150, 950, 11.5, 9.5));
    
                //Binding Datasource to Chart
                this.Chart1.DataSource = data;
                this.Chart1.DataBind();
            }
        }
       
    }
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Data;
    using System.ComponentModel;
    using System.Web.Script.Serialization;
     [Serializable]
        public class DatetimeData1
        {
            public DatetimeData1(DateTime xval, double yvalue1, double yvalue2, double size1, double size2)
            {
                this.XValue1 = xval;
                this.XValue2 = xval;
                this.YValue1 = yvalue1;
                this.YValue2 = yvalue2;
                this.Size1 = size1;
                this.Size2 = size2;
            }
            public DateTime XValue1
            {
                get;
                set;
            }
            public DateTime XValue2
            {
                get;
                set;
            }
            public double YValue1
            {
                get;
                set;
            }
            public double YValue2
            {
                get;
                set;
            }
            public double Size1
            {
                get;
                set;
            }
            public double Size2
            {
                get;
                set;
            }
        }