[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

Hi @chinninani,

Export Chart
http://forums.ext.net/showthread.php?18279

Export GridPanel
http://forums.ext.net/showthread.php?22814

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

Vladimir explains here:
http://forums.ext.net/showthread.php?18279#post78844

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

Yes, it is JavaScript.

Quote:

---

Originally Posted by chinninani

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

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