Hi,
I have created a 3D pie chart inside a ejDialog control. I am trying to add functionality so that the user can do a server side export it to png or excel. I cannot find documentation on how to do this specifically for ASP.Net Core EJ1. (All the other types have lots of documentation....)
I tried following this older forum post (to save as png), https://www.syncfusion.com/forums/128915/how-to-render-chart-image-run-time-and-save-it-to-a-file. However I get an "FormatException: The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters." error on Convert.FromBase64String().
Here is some code from my view:
// the dialog that contains the pie chart
List<string> stageAvgButtons = new List<string>() { "close", "print", "save", "excel" };
<ej-dialog id="StageAveragesDialog" show-on-init="false" title="Stage Averages" width="1000" is-responsive="true" action-buttons="@stageAvgButtons" action-button-click="stageAvgButtonsClick">
<e-dialog-position x-value="441px" y-value="153.6px" />
<e-content-template>
<div id="chartStageAvg"></div>
</e-content-template>
</ej-dialog>
// opens the dialog and creates the chart
function openStageAverages() {
var popupobj = $("#customWaiting").data("ejWaitingPopup");
popupobj.show();
var avgDialog = $("#StageAveragesDialog").ejDialog("instance");
//avgDialog.width = 1000;
avgDialog.open();
$.ajax({
url: "/Telecom/StageAverageDataSource",
type: "GET",
data: { "projId": @ProjId },
success: function (dataPoints) {
if (dataPoints.length > 0) {
$("#chartStageAvg").ejChart({
commonSeriesOptions:
{
labelPosition: 'outside',
tooltip: { visible: true, format: "#point.x# : #point.y# Days" },
marker:
{
dataLabel:
{
shape: 'none',
visible: true,
textPosition: 'top',
border: { width: 1 },
connectorLine: { height: 70, stroke: "black" }
}
}
},
series: [{
points: dataPoints,
explodeIndex: 0,
border: { width: 2, color: 'white' },
type: 'pie',
labelPosition: 'outside',
startAngle: 145
}],
//Enabling 3D Chart
enable3D: true,
enableRotation: true,
depth: 30,
tilt: -30,
rotation: -30,
perspectiveAngle: 90,
isResponsive: true,
load: "onchartload",
title: { text: "" },
size: { height: "600", width: "970" },
legend: { visible: false }
});
} else {
$("#chartStageAvg").html("There is not enough data to create the pie chart.");
}
var popupobj = $("#customWaiting").data("ejWaitingPopup");
popupobj.hide();
}
});
}
function stageAvgButtonsClick(args) {
switch (args.currentTarget.toUpperCase()) {
case "PRINT":
try {
var chartObj = $("#chartStageAvg").ejChart("instance");
chartObj.print("chartStageAvg");
} catch {
alert("There is not enough data to create the pie chart.");
}
break;
case "SAVE":
try {
var chartObj = $("#chartStageAvg").ejChart("instance");
exporting = chartObj.model.exportSettings;
exporting.mode = "server";
exporting.type = "png";
exporting.action = "/Telecom/ExportStageAverages";
chartObj.export();
} catch {
alert("There is not enough data to create the pie chart.");
}
break;
case "EXCEL":
// will add code here for excel
default:
alert("Action " + args.currentTarget + " not defined.");
break;
}
}
From the controller:
public void ExportStageAverages(string Data, string ChartModel)
{
ChartProperties propObj = ConvertChartObject(ChartModel);
string type = propObj.ExportSettings.Type.ToString().ToLower();
if (type == "png")
{
//Data = Data.Remove(0, Data.IndexOf(',') + 1);
//MemoryStream stream = new MemoryStream(Convert.FromBase64String(Data));
string fullPath = _hostingEnvironment.WebRootPath + @"\XlsIO\Telecom\Download\";
using (FileStream fs = new FileStream(fullPath + "Averages.png", FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(Data);
//byte[] data = Convert.
bw.Write(data);
bw.Dispose();
}
}
} else
{
// code for export to excel will go here
}
}
private ChartProperties ConvertChartObject(string ChartModel)
{
var settings = new JsonSerializerSettings
{
NullValueHandling = NullValueHandling.Ignore,
MissingMemberHandling = MissingMemberHandling.Ignore
};
ChartProperties chartProp = new ChartProperties();
chartProp = JsonConvert.DeserializeObject<ChartProperties>(ChartModel, settings);
return chartProp;
}
Thanks,
Chris
