RangeSelection.cshtml

@using Syncfusion.EJ2;
@section ControlsSection{
    <script src="~/Scripts/theme-color.js"></script>
    <div class="col-md-8 control-section">
      @Html.EJS().Chart("container").Series(series =>
 {
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Scatter).XName("xValue").YName("yValue")
     .Marker(mr=>mr.Width(10).Height(10).Shape(Syncfusion.EJ2.Charts.ChartShape.Pentagon))
     .DataSource(ViewBag.dataSource).Name("Product A").Add();
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Scatter).XName("xValue")
     .Marker(mr => mr.Width(10).Height(10).Shape(Syncfusion.EJ2.Charts.ChartShape.Triangle))
     .YName("yValue1").DataSource(ViewBag.dataSource).Name("Product B").Add();

 }).PrimaryXAxis(px => px.Title("Countries").Minimum(1970).Maximum(2016).MajorGridLines(mg=>mg.Width(0))
       ).PrimaryYAxis(py => py.LabelFormat("{value}%").Title("Sale").Interval(25).Maximum(100).Minimum(0).MajorGridLines(mg=>mg.Width(0))
       ).Title("Profit Comparision of A and B").ChartArea(area => area.Border(br=>br.Color("transparent"))).Load("load").SelectionMode(Syncfusion.EJ2.Charts.SelectionMode.DragXY).Render()
        </div>
<div class="col-md-4 property-section">
    <table id="property" title="Properties" style="width: 100%">
        <tr style="height: 50px">
            <td style="width: 60%">
                <div>Selection Mode:</div>
            </td>
            <td style="width: 40%;">
                <div style="margin-left: -70px">
                    @Html.EJS().DropDownList("selmode").Index(0).DataSource(ViewBag.data).Value("DragXY").Change("selectionMode").Render()
                </div>
            </td>
        </tr>
        <tr id='' style="height: 50px">
            <td style="width: 80%">
                <div> Enable Multi Selection:</div>
            </td>
            <td>
                <input type="checkbox" id="select" style="margin-top: 15px; margin-left: -60px">
            </td>
        </tr>
    </table>
</div>
         @*custom code start*@
    <style>
        #control-container {
            padding: 0px !important;
        }
    </style>
             @*custom code end*@
    <script>
             @*custom code start*@
        var load = function (args) {
            var selectedTheme = themeName ? themeName : 'Material';
            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast');

        };
                 @*custom code end*@
        document.getElementById('select').onchange = function () {
            var chart = document.getElementById('container').ej2_instances[0];
            var element = (document.getElementById('select'));
            chart.allowMultiSelection = element.checked;
            chart.series[0].animation.enable = false;
            chart.series[1].animation.enable = false;
            chart.refresh();
        };
        var selectionMode = function () {
            var chart = document.getElementById('container').ej2_instances[0];
            var mode = document.getElementById('selmode').ej2_instances[0];
            chart.selectionMode = mode.value;
            chart.series[0].animation.enable = false;
            chart.series[1].animation.enable = false;
            chart.refresh();
        }
    </script>
}
         @*custom code start*@
@section Meta{
                    <meta name="description" content="This example demonstrates the Range Selection in ASP.NET MVC Chart control. Explore here for more details."/>
                }
         @*custom code end*@
@section ActionDescription{
    <p>
    This sample illustrates the range selection feature in chart. Data can be selected under region by drag and drop.
</p>
    }
@section Description{
    <p>
    This sample demonstrates the selection behavior in a chart. Any point or a series can be selected in a chart by clicking or touching the point.
    We can also select the point while loading chart through <code>selectedDataIndexes</code> properties. Click to select a point or series, click and drag to enable rectangular selection.
    Rectangular selection will return the collection point that are selected under the region.
</p>
<p>
    Tap to select a point or series, double tap and drag to enable rectangular selection in touch enabled devices.
</p>
<p>
    Chart supports seven mode of selection which can be set using <code>SelectionMode</code> property.
</p>
<ul>
    <li><code>Series</code> - Select the series in chart.</li>
    <li><code>Point</code> - Select a point in the series .</li>
    <li><code>Cluster</code> - Select a group of points in the chart.</li>
    <li><code>DragXY</code> - Rectangular selection with respect to both axis.</li>
    <li><code>DragX</code> - Rectangular selection with respect to horizontal axis.</li>
    <li><code>DragY</code> - Rectangular selection with respect to vertical axis.</li>
    <li><code>Lasso</code> - Select free form of selection area points.</li>
</ul>
<br>
}
@section Title{
                    <title>ASP.NET MVC Chart Range Selection Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of Range Selection in ASP.NET MVC Chart Control</h1>
                }