I am getting the following error when trying to generate PDF after converting a Pie Chart to Image. Can someone advise what is wrong in my HTML file?
**Additional information: Invalid nested tag body found, expected closing tag script.**
The following call in BaseHtmlToPDF.cs raise the exception
parser.Parse(reader);
The is is my HTML file
<html>
<head>
<title> Chart</title>
<link href="https://localhost:44302/Content/report-pdf.css" rel="stylesheet" />
<link href="https://localhost:44303/Content/nv.d3.css" rel="stylesheet" />
<link href="https://localhost:44303/css/app.css" rel="stylesheet" />
<script type="text/javascript" src="https://localhost:44303/Scripts/d3.min.js"></script>
<script type="text/javascript" src="https://localhost:44303/Scripts/d3.tip.v0.6.3.js"></script>
<script type="text/javascript" src="https://localhost:44303/Scripts/nv.d3.js"></script>
</head>
<body class="reportBody">
<div id="SummaryChart">
<table cellpadding="5" cellspacing="0" width="100%" border="0">
<tr>
<td class="title-con">
<h2>IdleTime (Hours)</h2>
</td>
</tr>
<tr>
<td>
<div id="SummaryChart" style="height:500px">
<svg></svg>
</div>
</td>
</tr>
</table>
</div>
<script>
var values = [];
var data = [{
values: values,
key: 'IdleTime'
}];
data[0].values.push({"y": undefined, "x" : '2015/03/01'});
data[0].values.push({"y": undefined, "x" : '2015/03/22'});
data[0].values.push({"y": undefined, "x" : '2015/04/20'});
data[0].values.push({"y": undefined, "x" : '2015/04/21'});
data[0].values.push({"y": 19.5, "x" : '2015/04/22'});
data[0].values.push({"y": undefined, "x" : '2015/04/23'});
data[0].values.push({"y": undefined, "x" : '2015/04/24'});
data[0].values.push({"y": undefined, "x" : '2015/04/29'});
data[0].values.push({"y": undefined, "x" : '2015/04/30'});
init_graphs(data);
function init_graphs(data) {
nv.addGraph(function () {
var chart = nv.models.multiBarChart();
chart.xAxis.tickFormat(function (d) {
var dateTimeFormat = 'dd-MMM-yyyy';
dateTimeFormat = dateTimeFormat.replace('dd', '%d');
dateTimeFormat = dateTimeFormat.replace('MMM', '%b');
dateTimeFormat = dateTimeFormat.replace('yyyy', '%Y');
return d3.time.format(dateTimeFormat)(new Date(d));
});
chart.yAxis.tickFormat(d3.format(',.1f'));
chart.showLegend(false)
chart.xAxis.axisLabel('Time');
chart.yAxis.axisLabel('NPT Hours');
chart.showControls(false);
chart.margin({ left: 90, top: 90, bottom: 50, right: 20 });
chart.transitionDuration(0);
var max = 19.5;
var scale = calculate(0, !max || max < 10 ? 10 : max, 10);
chart.yDomain([scale.niceMin, scale.niceMax]);
d3.select('#SummaryChart svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function niceNum(range, round) {
// exponent of range
var exponent;
// fractional part of range
var fraction;
// nice, rounded fraction
var niceFraction;
exponent = Math.floor(Math.log(range)/Math.LN10);
fraction = range / Math.pow(10, exponent);
if (round) {
if (fraction < 1.5) niceFraction = 1;
else if (fraction < 3) niceFraction = 2;
else if (fraction < 7) niceFraction = 5;
else niceFraction = 10;
} else {
if (fraction <= 1) niceFraction = 1;
else if (fraction <= 2) niceFraction = 2;
else if (fraction <= 5) niceFraction = 5;
else niceFraction = 10;
}
return niceFraction * Math.pow(10, exponent);
}
function calculate (min, max, maxTicks) {
maxTicks = maxTicks ? maxTicks : 10;
var range = niceNum(max - min, false);
var tickSpacing = niceNum(range / (maxTicks - 1), true);
var niceMin = Math.floor(min / tickSpacing) * tickSpacing;
var niceMax = Math.ceil(max / tickSpacing) * tickSpacing;
var tickValues = [];
for (var value = niceMin; value <= niceMax; value += tickSpacing)
tickValues.push(value);
return { niceMin: niceMin, niceMax: niceMax, tickSpacing: tickSpacing, tickValues: tickValues };
}
}
</script>
</body>
</html>
