HTML and CSS Reference
As you can see, the ChartMaster table stores the pie chart title and the physical image file URL. The
ChartDetails table stores sector information such as names, values, and colors. Although this application
doesn't regenerate charts based on stored data, you could easily do so because the data is readily available
in these tables.
The ASP.NET MVC application has a single controller: ChartController . It contains code that saves a pie
chart as an image. It also saves the pie chart data into the ChartMaster and ChartDetails tables. The action
method of the ChartController class that does the job is shown in Listing 4-25.
Listing 4-25. Saving the Chart Image on the Server
public JsonResult SaveChart(string data, ChartMaster master, ChartDetail details)
Guid id = Guid.NewGuid();
string path = HttpContext.Server.MapPath("~/images/" + id.ToString() + ".png");
byte binaryData = Convert.FromBase64String(data);
FileStream file = new FileStream(path, FileMode.Create);
BinaryWriter bw = new BinaryWriter(file);
ChartDbEntities db = new ChartDbEntities();
master.Id = id;
master.ImageUrl = "~/images/" + id.ToString() + ".png";
foreach (ChartDetail detail in details)
detail.ChartId = master.Id;
return Json("Chart saved in the database!");
As you can see, the SaveChart() method accepts three parameters : canvas drawing data in Base64
format, a ChartMaster object, and an array of ChartDetail objects. These three parameters are sent from
the client-side jQuery code.
The code in SaveChart() should look familiar because previous sections have discussed these canvas-
saving techniques. Notice how a GUID serves dual purposes : acting as a chart ID and a physical file name.
The SaveChart() method essentially does two things: it saves the pie chart as a physical .png file on the
server and saves the chart data in the ChartMaster and ChartDetails tables. SaveChart() returns a success
message as a JsonResult object after a chart is saved on the server.