How to use D3.js for Server Side Chart Generation in .NET (Part 3)

How to use D3.js for Server Side Chart Generation in .NET

Part 1: Creating a Donut Chart using D3.js
Part 2: Render/Export D3.js Chart as PNG Image using PhantomJS
Part 3: Creating a simple REST Service using ASP.NET Web API

In order to make our Chart Generation logic reusable I have decided to put it in a simple RESTful Service that will be implemented using ASP.NET Web API. We need to take all files that we created in previous parts of this series and place it in one temporary folder that will be used for Chart Generation.

I have decided to use C:\Temp\Chart folder,  and have copied following content:

donut_template.html

phantomjs.exe

render.js

As you can see, phantomjs.exe and render.js are files that we used in Part 2 of our series. donut_template.html is actually donut.html file from the Part 1 with one following change:
I have removed the explicit definition of our dataset used for rendering of Donut Chart:

var data = [{ label: 'Here', value: 190000, color: "#1e398f" },

            { label: 'Some', value: 50000, color: "#f7a600" },

            { label: 'Labels', value: 420000, color: "#e17e62" },

            { label: 'Needed', value: 1530000, color: "#985181" }];

var data = $$$PAYLOADINJECTION$$$;

This line will be used later in REST Service for Injecting the JSON dataset from our Server Side Model.

Now we can focus on creating a REST Service using ASP.NET Web API.
To do that, do the following steps:

1. Start new ASP.NET Web Application Project in Visual Studio and chose Empty Template with Web API added core references
2. Add new Model, name it ChartModel and add following definitions:
   

   namespace ChartService.Models

   {

       public class ChartModel

       {

           public string label { get; set; }

           public int value { get; set; }

           public string color { get; set; }

       }

   }

3. Now add new Controller, name it ChartController and place following code inside:
   

   using System.Linq;

   using System.Net;

   using System.Net.Http;

   using System.Net.Http.Headers;

   using System.Web.Hosting;

   using System.Web.Http;

   using Newtonsoft.Json;

   using ChartService.Models;

   namespace ChartService.Controllers

   {

       public class ChartController : ApiController

       {

           public HttpResponseMessage Post([FromBody] IEnumerable<ChartModel> payload)

           {

               String imageFile = GenerateChartImage(payload);

               MemoryStream imageStream = ReadChartImage(imageFile);

               var result = new HttpResponseMessage(HttpStatusCode.OK);

               result.Content = new ByteArrayContent(imageStream.ToArray());

               result.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");

               return result;

           }

           private string GenerateChartImage(IEnumerable<ChartModel> payload)

           {

               Guid chartID = Guid.NewGuid();

               string templatePath = @"C:\Temp\Chart\donut_template.html";

               string htmlPath = String.Format(@"C:\Temp\Chart\{0}.html", chartID);

               string pngPath = String.Format(@"C:\Temp\Chart\{0}.png", chartID);

               // Read HTML Template File

               string html = File.ReadAllText(templatePath);

               // Create copy with Payload

               html = html.Replace("$$$PAYLOADINJECTION$$$", JsonConvert.SerializeObject(payload));

               File.WriteAllText(htmlPath, html);

               // Start PhantomJS as Hidden Process in Background

               ProcessStartInfo startInfo = new ProcessStartInfo();

               startInfo.CreateNoWindow = false;

               startInfo.UseShellExecute = false;

               startInfo.FileName = Path.Combine(@"C:\Temp\Chart\", "phantomjs.exe");

               startInfo.WorkingDirectory = @"C:\Temp\Chart\";

               startInfo.WindowStyle = ProcessWindowStyle.Hidden;

               startInfo.Arguments = "render.js \"" + htmlPath + "\" \"" + pngPath + "\"";

               try

               {

                   using (Process phantomJsProc = Process.Start(startInfo))

                   {

                       phantomJsProc.WaitForExit();

                       return pngPath;

                   }

               }

               catch (Exception)

               {

                   throw;

               }

               finally

               {

                   // At the end, don't forget to delete temp. generated files

                   File.Delete(htmlPath);

               }

           }

           private static MemoryStream ReadChartImage(string imageFile)

           {

               FileStream fileStream = new FileStream(imageFile, FileMode.Open);

               Image image = Image.FromStream(fileStream);

               MemoryStream memoryStream = new MemoryStream();

               image.Save(memoryStream, ImageFormat.Png);

               // Dispose objects and delete the temp. generated files

               image.Dispose();

               fileStream.Close();

               File.Delete(imageFile);

               return memoryStream;

           }

       }

   }

Now with this Implementation of ChartController.cs we can simply POST a JSON Payload containing our dataset that will be injected into our donut_template.html file.

After that we will run render.js on PhantomJS as hidden background process on our new generated html file and generate the PNG Image file that will be delivered in response to our http request as “image/png” content type.

You can easily test the functionality of code in Fiddler by composing the POST request to your new REST Service:

By Executing your request you should get following response of your request:

Now we have a nice REST Web API Service that uses D3.js Chart Library for Server Side generating, pre-rendering and delivering of Charts Images.

Now you can create a ASP.NET Web Application that will use the new REST Service to dynamically generate and display the Chart.