CODEWITHSUNDEEP
javascriptasp.netjsonpdfc3.js
Le-Mr-Ruyk
Le-Mr-Ruyk

Reputation: 179

How to export c3js to PDF when it loads data from json get request?

I'm working on dashaboard stats on one of my projects, and I'm using the C3js to add charts to my dashboard, and all it works fine,

but when I wanna generate a pdf of this dashboard using Rotativa Plugin and wkhtmltopdf, but it doesn't work properly, it generates a pdf with data but not showing charts.

This happen only when I'm using Json, but when I insert data directly it works fine.

Conf Application:

Server-Side : ASP.Net MVC5

Client-Side :Javascript, Rotativa, C3js

Exemple

Controller : 

 public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Print()
    {
        return new ViewAsPdf("Index");
    }

    public JsonResult Data()
    {
        var d1 = new ArrayList() { "Data1", 1, 4, 7, 8, 10 };
        return Json( d1 , JsonRequestBehavior.AllowGet);
    }
}

The View :

<div id="chart" style="width:500px;height:300px"></div>
 @section scripts{
 <script>
  var chart = c3.generate({
  bindto: '#chart',
  data: {
    url: "http://localhost:58762/Home/Data",
    mimeType: 'json',
    type: 'bar',
}
});
</script>
}

Render in web page (Index Action) :

enter image description here

But, when I execute the Print action, It's samply blank without chart.

Update

I'm also trying to resolve the problem in a different way but without success : I retreive data with a simple ajax request and store the data in a variable, after I draw chart without calling ajax into the c3 chart function. the html render is absolutly fine, but the pdf print is not working. there is my file bellow : 

<div id="chart" style="width:500px;height:300px">Example 1</div>
@section scripts{
<script> 
    dataT= $.ajax({
        method:'GET',
        url: 'http://localhost:58762/Home/Data',
        context: document.body,
        global: false,
        async: false,
        success: function (result) {
            return result;
        }

    }).responseJSON;
    datad = [
    ['data1', 30, 200, 100, 400, 150, 250],
    ['data2', 130, 100, 140, 200, 150, 50]
    ];
    console.log('Datad: ' + datad);
    console.log('DateT: ' + dataT);
    var chart = c3.generate({
        data: {
            columns: dataT,
            type: 'bar'
            },
            bar: {
                width: {
                ratio: 0.5 
                }
            }
});
</script>

}

Upvotes: 1

Views: 803

Answers (2)

Le-Mr-Ruyk
Le-Mr-Ruyk

Reputation: 179

After trying a lot of solution and exploring a lot of topics, I come out with the conclusion that wkhtmltopdf is not able to resolve the Ajax call url, so I changed my thinking way and pass all data from the controller, and All it works like sharpe.

This is my solution :

View & Script : 

@{
ViewBag.Title = "Home Page";
}

<div id="chart" style="width:500px;height:300px">Lorem  Ipsum</div>

@section scripts{

<script>
var infos = @Html.Raw(Json.Encode(ViewBag.data));
var chart = c3.generate({
data: {
    columns:infos,
        mimeType: 'json',

        type: 'bar'
    },
    bar: {
    width: {
        ratio: 0.5
        }

  }
});


</script>

}

Controller : 

  public ActionResult Print()
    {
        var data = Data().Data;
        ViewBag.data = data;
        return new ViewAsPdf("Index");
    }

    public JsonResult Data()
    {
        var d1 = new ArrayList() { "data1", 30, 200, 100, 400, 150, 250 };
        var d2 = new ArrayList() { "data2", 130, 100, 140, 200, 150, 50 };
        var d = new ArrayList() { d1, d2 };
        return Json( d, JsonRequestBehavior.AllowGet);
    }

Result :

PDF Render

Upvotes: 1

damianmr
damianmr

Reputation: 2531

It might be any of these:

  1. The JavaScript default execution timeout is set by default to 200 and your request to data might be taking longer.

  2. Your server does not support cross origin requests, wkhtmltopdf runs the AJAX request from the filesystem, so if your server does not support CORS then it will just block the incoming request for data.

  3. C3JS simply does not work in the rendering engine of wkhtmltopdf

These are the things that I would try:

  • For (1): check in the documentation how to increase this number
  • For (2): check this issue in Rotativa GitHub's page:https://github.com/webgio/Rotativa/issues/79#issuecomment-75938649
  • For (3): to debug this problem and be sure of this, just remove the call to c3 and make a simple print of the data returned by the server (you will have to make your own AJAX call probably). If you see the data, then add the call to C3. If you don't see the chart, then it means that C3 has some sort of incompatibility with the rendering engine (wkhtmltopdf).

Upvotes: 1

Related Questions