Hi Team,
I am using google chart in one of the report in my application . But when i try to generate the html through Httpwebrequest , elements related to google chart are not shown up in the html page so the report is generated without any chart.
HTML Code:
<html>
<head style="width:100%">
<style>
table {
border-collapse: separate !important;
}
.google-visualization-orgchart-node {
font-family: Calibri !important;
border: 2px solid black;
width: 256px;
}
.google-visualization-orgchart-node-large {
width: 256px;
}
.google-visualization-orgchart-table * {
padding: 0px;
}
.google-visualization-orgchart-table {
border: 2px solid black;
padding: 4px 6px 2px 6px;
}
.redline {
border: 2px solid red;
}
#chart_div_@ViewBag.Index .google-visualization-orgchart-linebottom {
border-bottom: 2px solid black;
}
#chart_div_@ViewBag.Index .google-visualization-orgchart-lineleft {
border-left: 2px solid black;
}
#chart_div_@ViewBag.Index .google-visualization-orgchart-lineright {
border-right: 2px solid black;
}
#chart_div_@ViewBag.Index .google-visualization-orgchart-linetop {
border-top: 2px solid black;
}
</style>
<script src="~/Scripts/twDealerDetail.js"></script>
<script type="text/javascript">
google.charts.load('current', { packages: ["orgchart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'TLEDenominator');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addRows([
[{ v: 'TLE Denominator', f: '<div style="width:160px;text-align:center;">TLE Denominator</div><div style="width:160px;"><img style="width:29px;" src="/Workout4/Contents/images/GreenCar.jpg" />+ <span style="width:37px;"><img style="width:29px;" src="@AppRoot/Contents/images/GreenWrench.jpg" /></span> + <span style="width:37px;"><img style="width:29px;" src="@AppRoot/Contents/images/Purple_Car.jpg" /></span>+ <span style="width:37px;"><img style="width:29px;" src="@AppRoot/Contents/images/PurpleWrench.jpg" /></span></div><div style="color:black; font-style:bold;border-top: 2px solid black;">@Model.TLEDenominator</div>' }, '', ''],
[{ v: 'Sales Only', f: '<div style="width:118px;text-align:center;">Active</div><div style="min-height:31px;align-items:center;display:flex;border-top: 2px solid black;"><span><img style="width:29px;" src="@AppRoot/Contents/images/GreenCar.jpg" /></span>Sales Only</div><div style="padding-top:4px;"><div style="float:left;width: 50%;border-right: 2px solid black;border-top: 2px solid black;"><span style="color:black; font-style:bold;">@Model.Sales</span></div><div style="width:50%;float:left;border-top: 2px solid black;"><span>@Model.Sales_Prcnt</span></div></div>' }, 'TLE Denominator', ''],
[{ v: 'Service Only', f: '<div style="width:118px;text-align:center;">Active</div><div style="min-height:31px;align-items:center;display:flex;border-top: 2px solid black;"><span><img style="width:29px;" src="@AppRoot/Contents/images/GreenWrench.jpg" /></span>Service Only</div><div style="padding-top:4px;"><div style="float:left;width: 50%;border-right: 2px solid black;border-top: 2px solid black;"><span style="color:black; font-style:bold;">@Model.Service</span></div><div style="width:50%;float:left;border-top: 2px solid black;"><span>@Model.Service_Prcnt</span></div></div>' }, 'TLE Denominator', ''],
[{ v: 'Sales & Service', f: '<div style="width:118px;text-align:center;">Active</div><div style="min-height:31px;align-items:center;display:flex;border-top: 2px solid black;"><span><img style="width:29px;" src="@AppRoot/Contents/images/GreenCar.jpg" /></span><div style="width:91px;">Sales & Service</div><span><img style="width:29px;" src="@AppRoot/Contents/images/GreenWrench.jpg" /></span></div><div style="padding-top:4px;"><div style="float:left;;width: 50%;border-right: 2px solid black;border-top: 2px solid black;"><span style="color:black; font-style:bold;">@Model.Sales_Service</span></div><div style="width:50%;float:left;border-top: 2px solid black;"><span>@Model.Sales_Service_Prcnt</span></div></div>' }, 'TLE Denominator', ''],
[{ v: 'Inactive Customers', f: '<div style="min-height:31px;align-items:center;display:flex;"><span><img style="width:29px;" src="@AppRoot/Contents/images/Purple_Car.jpg" /></span><div style="width:120px;">InActive Customers</div></div><div style="min-height:31px;align-items:center;display:flex;border-top: 2px solid black;"><span><img style="width:29px;" src="@AppRoot/Contents/images/PurpleWrench.jpg" /></span>Opportunity</div><div style="padding-top:4px;"><div style="float:left;width: 50%;border-right: 2px solid black;border-top: 2px solid black;"><span style="color:black; font-style:bold;">@Model.InActive_Customers</span></div><div style="width:50%;float:left;border-top: 2px solid black;"><span>@Model.InActive_Prcnt</span></div></div>' }, 'TLE Denominator', ''],
[{ v: 'Sales Last 6 months', f: '<div style="min-height:31px;align-items:center;display:flex;height:55px;"><span><img style="width:29px;" src="@AppRoot/Contents/images/GreenCar.jpg" /></span><div style="width:90px;">Last 6 months</div></div><div style="padding-top:0px;"><div style="float:left;width: 50%;border-right: 2px solid black;border-top: 2px solid black;"><span style="color:black; font-style:bold;">@Model.Sales_6Month</span></div><div style="width:50%;float:left;border-top: 2px solid black;"><span>@Model.Sales_6Month_Prcnt</span></div></div>' }, 'Sales Only', ''],
[{ v: 'Sales 6 to 12 months', f: '<div style="min-height:31px;align-items:center;display:flex;"><span><img style="width:29px;" src="@AppRoot/Contents/images/GreenCar.jpg" /></span><div style="width:93px;">6 to 12 months</div></div><div style="padding-top:4px;"><div style="float:left;width: 50%;border-right: 2px solid black;border-top: 2px solid black;border-bottom: 2px solid black;"><span style="color:black; font-style:bold;">@Model.Sales_6_12_Month</span></div><div style="width:50%;float:left;border-top: 2px solid black;border-bottom: 2px solid black;"><span>@Model.Sales_6_12_Month_Prcnt</span></div></div><div style="color:LimeGreen;font-style:bold;">At Risk</div>' }, 'Sales Only', ''],
[{ v: 'Service Last 6 months', f: '<div style="min-height:31px;align-items:center;display:flex;height:53px;"><span><img style="width:29px;" src="@AppRoot/Contents/images/GreenWrench.jpg" /></span><div style="width:90px;">Last 6 months</div></div><div style="padding-top:4px;"><div style="float:left;width: 50%;border-right: 2px solid black;border-top: 2px solid black;"><span style="color:black; font-style:bold;">@Model.Service_6Month</span></div><div style="width:50%;float:left;border-top: 2px solid black;"><span>@Model.Service_6Month_Prcnt</span></div></div>' }, 'Service Only', ''],
[{ v: 'Service 6 to 12 months', f: '<div style="min-height:31px;align-items:center;display:flex;"><span><img style="width:29px;" src="@AppRoot/Contents/images/GreenWrench.jpg" /></span><div style="width:93px;">6 to 12 months</div></div><div style="padding-top:4px;"><div style="float:left;width: 50%;border-right: 2px solid black;border-top: 2px solid black;border-bottom: 2px solid black;"><span style="color:black; font-style:bold;">@Model.Service_6_12_Month</span></div><div style="width:50%;float:left;border-top: 2px solid black;border-bottom: 2px solid black;"><span>@Model.Service_6_12_Month_Prcnt</span></div></div><div style="color:LimeGreen;font-style:bold;">At Risk</div>' }, 'Service Only', ''],
[{ v: 'Sales & Service Last 6 months', f: '<div style="min-height:31px;align-items:center;display:flex;height:53px;"><span><img style="width:29px;" src="@AppRoot/Contents/images/GreenCar.jpg" /></span><div style="width:91px;"><div style="width:91px;">Last 6 months</div></div><span><img style="width:29px;" src="@AppRoot/Contents/images/GreenWrench.jpg" /></span></div><div style="padding-top:4px;"><div style="float:left;width: 50%;border-right: 2px solid black;border-top: 2px solid black;"><span style="color:black; font-style:bold;">@Model.Sales_Service_6Month</span></div><div style="width:50%;float:left;border-top: 2px solid black;"><span>@Model.Sales_Service_6Month_Prcnt</span></div></div>' }, 'Sales & Service', ''],
[{ v: 'Sales & Service 6 to 12 months', f: '<div style="min-height:31px;align-items:center;display:flex;"><span><img style="width:29px;" src="@AppRoot/Contents/images/GreenCar.jpg" /></span><div style="width:91px;"><div style="width:91px;">6 to 12 months</div></div><span><img style="width:29px;" src="@AppRoot/Contents/images/GreenWrench.jpg" /></span></div><div style="padding-top:4px;"><div style="float:left;width: 50%;border-right: 2px solid black;border-top: 2px solid black;border-bottom: 2px solid black;"><span style="color:black; font-style:bold;">@Model.Sales_Service_6_12_Month</span></div><div style="width:50%;float:left;border-top: 2px solid black;border-bottom: 2px solid black;"><span>@Model.Sales_Service_6_12_Month_Prcnt</span></div></div><div style="color:LimeGreen;font-style:bold">At Risk</div>' }, 'Sales & Service', '']
]);
data.setRowProperty(4, 'style', 'border: 2px solid red;background: white');
data.setRowProperty(6, 'style', 'border: 2px solid red;background: white');
data.setRowProperty(8, 'style', 'border: 2px solid red;background: white');
data.setRowProperty(10, 'style', 'border: 2px solid red;background: white');
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div_@ViewBag.Index'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, { allowHtml: true, size: 'large', color: 'white' });
}
</script>
</head>