Configuring CSS

Jan 6, 2014 at 11:58 AM
Hello.

I have a graph which was created with JQPlot and then annotated with some additional axis information. I need to render all of this to a .png file.

When I output the display with the code below I get the X-axis as expected but the Y-Axis is all scrunched up in the top left hand corner with each value overwriting the previous one. In addition there's no graph displayed. I assume this is down to not accessing the CSS file correctly but I have two style sheets so I can't see how to add them both. I've added only the JQPlot one as below in the code sample.

Any suggestions?

const string htmlString = "<html><body><div style=\"width:1000px; overflow-x:auto;\" class=\"TabCalendarContent\"><div class=\"cashflow-padding\" style=\"position: relative; overflow-x: auto; background: none repeat scroll 0% 0% rgb(255, 255, 255); display: block;\" id=\"Tabs1_Content0\"><div id=\"divChartMonthly\" style=\"width: 894px; height: 300px; overflow-x: auto; position: relative; margin-left: 3px;\" class=\"jqplot-target\"><canvas width=\"894\" height=\"300\" style=\"position: absolute; left: 0px; top: 0px;\" class=\"jqplot-base-canvas\"></canvas><div class=\"jqplot-title\" style=\"height: 0px; width: 0px;\"></div><div style=\"position: absolute; width: 894px; height: 13px; left: 0px; bottom: 0px; display: none;\" class=\"jqplot-axis jqplot-xaxis\"><div class=\"jqplot-xaxis-tick\" style=\"position: absolute; left: 57.6818px;\">31 Jan 14</div><div class=\"jqplot-xaxis-tick\" style=\"position: absolute; left: 133.545px;\">28 Feb 14</div><div class=\"jqplot-xaxis-tick\" style=\"position: absolute; left: 210.409px;\">31 Mar 14</div><div class=\"jqplot-xaxis-tick\" style=\"position: absolute; left: 286.273px;\">30 Apr 14</div><div class=\"jqplot-xaxis-tick\" style=\"position: absolute; left: 362.136px;\">31 May 14</div><div class=\"jqplot-xaxis-tick\" style=\"position: absolute; left: 439px;\">30 Jun 14</div><div class=\"jqplot-xaxis-tick\" style=\"position: absolute; left: 517.364px;\">31 Jul 14</div><div class=\"jqplot-xaxis-tick\" style=\"position: absolute; left: 591.227px;\">31 Aug 14</div><div class=\"jqplot-xaxis-tick\" style=\"position: absolute; left: 668.091px;\">30 Sep 14</div><div class=\"jqplot-xaxis-tick\" style=\"position: absolute; left: 744.955px;\">31 Oct 14</div><div class=\"jqplot-xaxis-tick\" style=\"position: absolute; left: 820.818px;\">30 Nov 14</div></div><div class=\"jqplot-axis jqplot-yaxis\" style=\"position: absolute; height: 300px; width: 34px; left: 0px; top: 0px;\"><div class=\"jqplot-yaxis-tick\" style=\"position: absolute; top: 270.5px;\">-10000</div><div class=\"jqplot-yaxis-tick\" style=\"position: absolute; top: 217.1px;\">-5000</div><div class=\"jqplot-yaxis-tick\" style=\"position: absolute; top: 163.7px;\">0</div><div class=\"jqplot-yaxis-tick\" style=\"position: absolute; top: 110.3px;\">5000</div><div class=\"jqplot-yaxis-tick\" style=\"position: absolute; top: 56.9px;\">10000</div><div class=\"jqplot-yaxis-tick\" style=\"position: absolute; top: 3.5px;\">15000</div></div><canvas width=\"894\" height=\"300\" class=\"jqplot-grid-canvas\" style=\"position: absolute; left: 0px; top: 0px;\"></canvas><canvas width=\"840\" height=\"267\" style=\"position: absolute; left: 44px; top: 10px;\" class=\"jqplot-series-shadowCanvas\"></canvas><canvas width=\"840\" height=\"267\" style=\"position: absolute; left: 44px; top: 10px;\" class=\"jqplot-series-shadowCanvas\"></canvas><canvas width=\"840\" height=\"267\" style=\"position: absolute; left: 44px; top: 10px;\" class=\"jqplot-series-shadowCanvas\"></canvas><canvas width=\"840\" height=\"267\" style=\"position: absolute; left: 44px; top: 10px;\" class=\"jqplot-series-canvas\"></canvas><canvas width=\"840\" height=\"267\" style=\"position: absolute; left: 44px; top: 10px;\" class=\"jqplot-series-canvas\"></canvas><canvas width=\"840\" height=\"267\" style=\"position: absolute; left: 44px; top: 10px;\" class=\"jqplot-series-canvas\"></canvas><canvas width=\"840\" height=\"267\" style=\"position: absolute; left: 44px; top: 10px;\" class=\"jqplot-highlight-canvas\"></canvas><div class=\"jqplot-highlighter-tooltip\" style=\"position: absolute; left: 242.742px; top: 203.398px; display: none;\">-2,375</div><canvas width=\"840\" height=\"267\" style=\"position: absolute; left: 44px; top: 10px;\" class=\"jqplot-barRenderer-highlight-canvas\"></canvas><canvas width=\"840\" height=\"267\" style=\"position: absolute; left: 44px; top: 10px;\" class=\"jqplot-event-canvas\"></canvas></div><div style=\"margin-top: -15px; margin-bottom: 5px; position: relative;\" id=\"divMonthlyGraphTable\"><div id=\"divCashMonthly\" style=\" margin-top:30px\" class=\"tab_cash fl\">Cash </div><div id=\"divMonthly\" style=\"margin-left:47px\"><table class=\"tableStyle\" id=\"tbMonthly\" style=\"width:840px\"><tbody><tr><th scope=\"col\"><div style=\"width:73px; text-align:center;\">31 Jan 14</div></th><th scope=\"col\"><div style=\"width:73px; text-align:center;\">28 Feb 14</div></th><th scope=\"col\"><div style=\"width:73px; text-align:center;\">31 Mar 14</div></th><th scope=\"col\"><div style=\"width:73px; text-align:center;\">30 Apr 14</div></th><th scope=\"col\"><div style=\"width:73px; text-align:center;\">31 May 14</div></th><th scope=\"col\"><div style=\"width:73px; text-align:center;\">30 Jun 14</div></th><th scope=\"col\"><div style=\"width:73px; text-align:center;\">31 Jul 14</div></th><th scope=\"col\"><div style=\"width:73px; text-align:center;\">31 Aug 14</div></th><th scope=\"col\"><div style=\"width:73px; text-align:center;\">30 Sep 14</div></th><th scope=\"col\"><div style=\"width:73px; text-align:center;\">31 Oct 14</div></th><th scope=\"col\"><div style=\"width:73px; text-align:center;\">30 Nov 14</div></th></tr><tr><td scope=\"col\"><div style=\"width:73px;text-align:center;\">9,595</div></td><td scope=\"col\"><div style=\"width:73px;text-align:center;\">8,745</div></td><td scope=\"col\"><div style=\"width:73px;text-align:center;\">-2,375</div></td><td scope=\"col\"><div style=\"width:73px;text-align:center;\">-7,715</div></td><td scope=\"col\"><div style=\"width:73px;text-align:center;\">-7,285</div></td><td scope=\"col\"><div style=\"width:73px;text-align:center;\">-645</div></td><td scope=\"col\"><div style=\"width:73px;text-align:center;\">2,435</div></td><td scope=\"col\"><div style=\"width:73px;text-align:center;\">1,915</div></td><td scope=\"col\"><div style=\"width:73px;text-align:center;\">-4,745</div></td><td scope=\"col\"><div style=\"width:73px;text-align:center;\">-2,565</div></td><td scope=\"col\"><div style=\"width:73px;text-align:center;\">-3,935</div></td></tr></tbody></table></div></div></div><div style=\"position: relative; overflow-x: auto; background: none repeat scroll 0% 0% rgb(255, 255, 255); display: none;\" class=\"none\" id=\"Tabs1_Content1\"><div id=\"divChartWeekly\"></div><div style=\" margin-top:-25px; position: relative; display:none;\" id=\"divWeeklyGraphTable\"><div id=\"divCashWeekly\" style=\" margin-top:30px\" class=\"tab_cash fl\">Cash </div><div id=\"divWeekly\"><table class=\"tableStyle\" id=\"tbWeekly\"></table></div></div></div><div style=\"position: relative; overflow-x: auto; background: none repeat scroll 0% 0% rgb(255, 255, 255); display: none;\" class=\"none\" id=\"Tabs1_Content2\"><div id=\"divChartDaily\"></div><div style=\" margin-top:-15px; position: relative; display:none;\" id=\"divDailyGraphTable\"><div id=\"divCashDaily\" style=\" margin-top:30px\" class=\"tab_cash fl\">Cash </div><div id=\"divDaily\"><table class=\"tableStyle\" id=\"tbDaily\"></table></div></div></div></div></body></html>";

const string newPath = "C://test//Test.png";

string currentAppPath = HttpRuntime.AppDomainAppPath;
string cssFile = System.IO.File.ReadAllText(currentAppPath + "/Content/jquery.jqplot.min.css");

Bitmap m_Bitmap = new Bitmap(1000, 600);
SizeF maxSize2 = HtmlRenderer.HtmlRender.Measure(Graphics.FromImage(m_Bitmap), htmlString);
Size newSize = new Size((int)maxSize2.Width, (int)maxSize2.Height);

var css = HtmlRenderer.CssData.Parse(cssFile);
var img = HtmlRenderer.HtmlRender.RenderToImage(htmlString, newSize, Color.White, css);
img.Save(newPath, ImageFormat.Png);
Developer
Jan 6, 2014 at 2:36 PM
Your html uses elements that are currently not supported by HTML Renderer, sorry.
The library is designed mainly for text rendering, the HTML/CSS world is huge so fully supporting it is very hard.
Some day, I hope, I will have time to work on it.
Jan 6, 2014 at 3:11 PM
Thanks for the quick response. Much appreciated.