Search results

Export and print

Export

The rendered range navigator can be exported to JPEG, PNG, SVG, or PDF format using the export method in the range navigator. The input parameters for this method are Export Type for format and fileName for result.

tagHelper
export.cs
<ejs-rangenavigator id="rangeNavigator" valueType="DateTime" labelFormat="MMM-yy">
    <e-rangenavigator-rangenavigatorseriescollection>
        <e-rangenavigator-rangenavigatorseries xName="x" yName="y" dataSource="ViewBag.dataSource">
        </e-rangenavigator-rangenavigatorseries>
    <e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>

<ejs-button id="export">
</ejs-button>

<script>
document.getElementById('export').onclick = function () {
                var control = document.getElementById('export').ej2_instances[0];
                control.export("PNG", "range");
            };
</script>
public IActionResult Index()
        {
            List <data>dataSource = new List<data>
            {
                new data { x = new DateTime(2005, 01, 01), y = 21, y1 = 28 },
                new data { x = new DateTime(2006, 01, 01), y = 24, y1 = 44 },
                new data { x = new DateTime(2007, 01, 01), y = 36, y1 = 48 },
                new data { x = new DateTime(2008, 01, 01), y = 38, y1 = 50 },
                new data { x = new DateTime(2009, 01, 01), y = 54, y1 = 66 },
                new data { x = new DateTime(2010, 01, 01), y = 57, y1 = 78 },
                new data { x = new DateTime(2011, 01, 01), y = 70, y1 = 84 },
            };
            ViewBag.dataSource = dataSource;
            return View();
        }
        public class data
        {
            public DateTime x;
            public double y;
            public double y1;
        }

Print

The rendered range navigator can be printed directly from the browser by calling the public method print. The ID of the range navigator div element must be passed as argument to that method.

tagHelper
print.cs
<ejs-rangenavigator id="rangeNavigator" valueType="DateTime" labelFormat="MMM-yy">
     <e-rangenavigator-rangenavigatorseriescollection>
        <e-rangenavigator-rangenavigatorseries xName="x" yName="y" dataSource="ViewBag.dataSource">
        </e-rangenavigator-rangenavigatorseries>
    <e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>

<ejs-button id="print">
</ejs-button>

<script>
document.getElementById('print').onclick = function () {
                var chart = document.getElementById('print-container').ej2_instances[0];
                chart.print();
            };
</script>
public IActionResult Index()
        {
            List <data>dataSource = new List<data>
            {
                new data { x = new DateTime(2005, 01, 01), y = 21, y1 = 28 },
                new data { x = new DateTime(2006, 01, 01), y = 24, y1 = 44 },
                new data { x = new DateTime(2007, 01, 01), y = 36, y1 = 48 },
                new data { x = new DateTime(2008, 01, 01), y = 38, y1 = 50 },
                new data { x = new DateTime(2009, 01, 01), y = 54, y1 = 66 },
                new data { x = new DateTime(2010, 01, 01), y = 57, y1 = 78 },
                new data { x = new DateTime(2011, 01, 01), y = 70, y1 = 84 },
            };
            ViewBag.dataSource = dataSource;
            return View();
        }
        public class data
        {
            public DateTime x;
            public double y;
            public double y1;
        }
Contents
Contents