Results 1 to 6 of 6

Thread: [CLOSED] Export grid and pie chart to PDF

  1. #1
    Premium Member
    Join Date
    Jan 2013
    Posts
    27

    [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
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    26,722
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  3. #3
    Premium Member
    Join Date
    Jan 2013
    Posts
    27
    Hi Team,

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

    Code:
    @{
        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
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    26,722
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  5. #5
    Premium Member
    Join Date
    Jan 2013
    Posts
    27
    Hi Daniil,

    Where do i need to call the below line?

    Code:
    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
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    26,722
    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
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

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