[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
  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
  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

Similar Threads

  1. [CLOSED] Export Chart as Image
    By jchau in forum 2.x Legacy 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 Legacy Premium Help
    Replies: 4
    Last Post: Jun 27, 2013, 6:20 AM
  3. [CLOSED] Chart Export Data
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 08, 2012, 1:01 PM
  4. [CLOSED] export chart to SVG
    By CarpFisher in forum 2.x Legacy 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