Hi,

I am trying to export a chart to a Base64 image.

When I am using the following code, I am getting back the image of the table

$data["base64_chart"][0] = $data["report"]->export()->settings(array("resourceWaiting"=>2000))->png(array("width"=>"400px","height"=>"300px"))->toBase64();

When I try to add the PDF view, I am receiving back an empty image

$data["base64_chart"][0] = $data["report"]->export("DoneAndPending.chart")->settings(array("resourceWaiting"=>2000))->png(array("width"=>"400px","height"=>"300px"))->toBase64();

The following is the chart definition

BarChart::create(array(
	"dataStore"=>$this->dataStore("data"),
	"columns"=>array(
		"mth"=>array(
			"type"=>"date",
		),
		"count"=>array(
			"label"=>"Done, Pending",
			"type"=>"number",
			"prefix"=>"",
			"config"=>array("backgroundColor"=>"rgba(170,190,211,0.8)","borderWidth"=>0
			) //you can write array here to have each column coloured differently :-)
		),
		"closed"=>array(
			"label"=>"Closed",
			"type"=>"number",
			"prefix"=>"",
			"config"=>array("backgroundColor"=>"rgba(170,230,235,0.8)","borderWidth"=>0
			)
		),
	),
	"options" => array(
		"scales"=>array(
			"yAxes"=>array(array(
				"type"=>"time",
				"offset"=>"true",
				"ticks"=>array(	"fontFamily"=>"'Lato', sans-serif",	"fontSize"=>14, ),
				"time"=>array(
					"unit"=>"month"
				)
			)),
			"xAxes"=>array(array(
				"ticks"=>array(	"fontFamily"=>"'Lato', sans-serif",	"fontSize"=>14, ),
			)),
		),
		"title"=>array(
			"font-size"=>19,
			"font-family"=>"'Lato', sans-serif"
		),
		"legend"=>array("labels"=>array("fontFamily"=>"'Lato', sans-serif",	"fontSize"=>14,)),
		"layout"=>array(
			"padding"=>array("left"=>8)
		),
		"tooltips"=>array(
			"mode"=>"index",
			"backgroundColor"=>"#294660",
			"displayColors"=>false,
			"cornerRadius"=>3,
			"xPadding"=>10,
			"yAlign"=>"bottom",
			"xAlign"=>"center",
			"width"=>"140",
			"titleFontColor"=>"#A2DEFD",
			"callbacks"=>array(
				"label"=>'function (tooltipItem, data) {
						return data.datasets[tooltipItem.datasetIndex].label +\':\' + tooltipItem.xLabel;
					}',
				"title"=>'function(tooltipItems, data) {
					return new Date(tooltipItems[0].yLabel).toLocaleDateString("en-us",{year:\'numeric\', month: \'short\'});
					}',
			))
	)
));

I am using PhantomJS 2.1.1 and KoolReport 4-5-1 package.

Please suggest how to generate a correct image of the chart. Kind regards,

Hi David, I have tried to implement your solution. When I load the report, I receive an error message in the browser: "Cannot read property 'isHtml' of null". There is also no graph displayed. After clicking the "Download PDF" link, I receive the pdf without the chart and I receive a new error message: "Unspecified chart type.". I have checked Apache2 error.log and there is nothing. Thanks

Hi, David! Yes, I did use your example according to your instruction. Thanks

Hi, Sorry for not reacting sooner. The problem, which I was referring to was described in topic #1451 and the solution of "options"=>array( "fixTheChart"=>true ) worked for me as well. The chartjs exporting to pdf was not possible in version 4.5.1. The very same code produced the expected result after upgrading to version 5.0.4. The only missing part is that the chart is black and white and I need it in color. Do you have any suggestion? Regards

Hi, David,

The solution for the problem was to use rgb colour definition and not rgba.

Regards