The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] Export grid and pie chart to PDF

  1. #1

    [CLOSED] Export grid and pie chart to PDF

    Hi Team,

    I have reports cshtml page which contains pie chart and summary grid.

    How can I export pie chart and grid data to pdf?

    Regards,
    Chinni
    Last edited by Daniil; Aug 06, 2013 at 8:25 AM. Reason: [CLOSED]
  2. #2
    Daniil Veriga
    Developer & Support Expert
  3. #3
    Hi Team,

    Please find the below which i have used to display pie chart.

    
    @{
        ViewBag.Title = "Report";
        Layout = "~/Views/Common/_BaseContent.cshtml";
        var X = Html.X();
    }
    
    @section headtag
    {
        <script type="text/javascript">
            var tipRenderer = function (storeItem, item) {
                //calculate percentage.
                var total = 0;
                App.ReportsPieChart.getStore().each(function (rec) {
                    total += rec.get('TestcaseCount');
                });
                this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('TestcaseCount') / total * 100) + '%');
            }
        </script>
    }
    @{
    
        //pie chart related fields                                                                        
        var pieChartTip = X.ChartTip()
                            .TrackMouse(true)
                            .Width(180)
                            .Height(28)
                            .Renderer(r => r.Fn = "tipRenderer");
    
        var pieChartSeriesLabel = X.SeriesLabel()
                                    .Field(new[] { "Name" })
                                    .Font("18px Arial")
                                    .Orientation(Ext.Net.Orientation.Vertical);
                            
        var nameModelField = X.ModelField().Name("Name");
        var testcaseCountModelField = X.ModelField().Name("TestcaseCount");
        var pieChartFieldsModel = X.Model()
                                   .Fields(nameModelField,
                                    testcaseCountModelField);
    
        var pieChartData = new object[]
                            {
                                new{
                                    Name= "Passed Test cases",
                                    TestcaseCount =4
                                },
                                new{
                                    Name= "Failed Test cases",
                                    TestcaseCount = 6
                                }
                            };
        var pieChartStore = X.Store()
                             .Data(Model)
                             .Model(pieChartFieldsModel)
                             .Data(pieChartData);
                            
        var pieChartSeries = X.PieSeries()
                              .AngleField("TestcaseCount")
                              .ShowInLegend(true)
                              .Donut(0)
                              .Label(pieChartSeriesLabel)
                              .Tips(pieChartTip)
                              .ColorSet(new string [] {"Green","Red"});
    
        Ext.Net.Chart reportsPieChart = X.Chart()
                               .ID("ReportsPieChart")
                               .Animate(true)
                               .AutoShow(true)
                               .Shadow(true)
                               .InsetPadding(60)
                               .LegendConfig(X.ChartLegend().Position(Ext.Net.LegendPosition.Right))
                               .StyleSpec("background:#fff;")
                               .Store(pieChartStore)
                               .Series(pieChartSeries);
    
                                   
        var pieChartPanel = X.Panel()
                             //.Title("Pie Chart ")
                             .Layout(Ext.Net.LayoutType.Fit)
                             .Frame(false)
                             .Height(300)
                             .Items(reportsPieChart);
    
                             
                             
        var generatePDFButton = X.Button()
                                 .ID("generatePDF")
                                 .Text("Export PDF")
                                 .DirectEvents(de =>
                                 {                                 
                                     de.Click.IsUpload = true;
                                     de.Click.Url = "/Report/GeneratePDF";
                                 });                         
                             
        
    var testcaseReportsFormPanel = X.Panel()
                                     .ID("reportsPanel")
                                     .Title("Pie chart")
                                     .Expand()
                                     .Padding(20)
                                     .Items(
                                     generatePDFButton,
                                        pieChartPanel
                                        ); 
    }
    @section wizard_step
    {
     @(testcaseReportsFormPanel)
    }
    I am using itextsharp to generate PDF file. I am able to add image files to PDF document.


    But before adding i need to save this pdf as an image and send reference of pie chart image file path to pdf document.


    How can i save that above chart to image.

    Please do the needful.

    Regards,
    Chinni
  4. #4
    Daniil Veriga
    Developer & Support Expert
  5. #5
    Hi Daniil,

    Where do i need to call the below line?

    var svgString = Ext.draw.engine.SvgExporter.self.generate({}, chartCmp.surface);
    Is it in java script, then its not working for me. Do i need to add any DLL?

    Regards,
    Chinni
    Last edited by Daniil; Jul 30, 2013 at 1:20 PM. Reason: Please use [CODE] tags
  6. #6
    Yes, it is JavaScript.

    Quote Originally Posted by chinninani View Post
    then its not working for me.
    Is there any error? What do you use instead of "chartCmp"? It must be a reference to your Chart.

    Quote Originally Posted by chinninani View Post
    Do i need to add any DLL?
    To get an SVG string and send it to server you won't require any additional dlls.

    However, to convert it PDF, you will probably require something, because there is no a ready solution in Ext.NET.

    Vladimir suggested something here.
    http://forums.ext.net/showthread.php?18279#post78845
    Daniil Veriga
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Export Chart as Image
    By jchau in forum 2.x Premium Help
    Replies: 7
    Last Post: Feb 28, 2014, 5:14 AM
  2. [CLOSED] How to Export SVG chart from code behind
    By feanor91 in forum 2.x Premium Help
    Replies: 4
    Last Post: Jun 27, 2013, 6:20 AM
  3. [CLOSED] Chart Export Data
    By cwolcott in forum 2.x Premium Help
    Replies: 5
    Last Post: Nov 08, 2012, 1:01 PM
  4. [CLOSED] export chart to SVG
    By CarpFisher in forum 2.x Premium Help
    Replies: 30
    Last Post: Jun 07, 2012, 7:49 AM
  5. Replies: 1
    Last Post: Apr 19, 2010, 2:44 PM

Posting Permissions

Subscribe now to get the latest Ext.NET happenings in our newsletter.