Welcome Guest Search | Active Topics | Sign In | Register

Google-visualization-orgchart-table not displaying in HTML Options
Uma
Posted: Wednesday, May 13, 2020 6:54:17 AM
Rank: Newbie
Groups: Member

Joined: 5/13/2020
Posts: 8
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>
eo_support
Posted: Wednesday, May 13, 2020 12:53:23 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Hi,

Which product are you talking about?

Thanks!
Uma
Posted: Friday, May 15, 2020 11:34:00 AM
Rank: Newbie
Groups: Member

Joined: 5/13/2020
Posts: 8
Hi Team,
EO PDF tool failed to generate the google chart through htmlwebrequest.

eo_support
Posted: Friday, May 15, 2020 1:11:28 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Hi,

Please try to isolate the problem into a test project and send the test project to us. See here for more details:

https://www.essentialobjects.com/forum/test_project.aspx

Unless we have a test project, we have no way of testing the file you posted because it depends on external resources that we do not have. For example, your code uses "Scripts/twDealerDetail.js" and we do not have that file.

Once we have the test project, we will debug into it and see what we can find.

Thanks!
Uma
Posted: Tuesday, May 19, 2020 1:58:12 PM
Rank: Newbie
Groups: Member

Joined: 5/13/2020
Posts: 8
Hi Team,
I tried to upload the sample file. but, the project file size is 60 MB. Can you please help how to upload the project?
eo_support
Posted: Tuesday, May 19, 2020 1:59:40 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
You need to isolate the problem into a test project that does not contain anything else. Also make sure you do not include our DLLs.
Uma
Posted: Wednesday, May 20, 2020 8:39:51 AM
Rank: Newbie
Groups: Member

Joined: 5/13/2020
Posts: 8
Hi Team,
the sample project has been attached. Can you please verify and confirm the same?
eo_support
Posted: Wednesday, May 20, 2020 10:25:36 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Hi,

We have looked into the test project you sent to us. There are a few problems:

1. You are using an older version. Please update to the latest version first;
2. You will need to call RegisterFilter in your global class. See here for more details:

https://www.essentialobjects.com/doc/pdf/web/mvc.aspx#begin

3. You can NOT return void from your action method. MVCToPDF coverts the result of your action method to PDF file. So if the result of your action method is nothing, your PDF file will be nothing.

#3 is extremely important for you to understand how MVCToPDF works. Converting the result of your action method to PDF file is the only purpose of MVCToPDF because otherwise you can simply call HtmlToPdf.ConvertUrl/ConvertHtml directly.

Because of this, the first step for you to troubleshoot MVCToPDF issue is to make sure your action method do produce the correct result. You can do this simply by NOT calling RenderAsPDF. This will allow the result to be output to the screen directly. In your test project, if you commented out RenderAsPDF call (and the code that sets the ResultFileName), then you will get blank on your screen. This means you will absolutely get blank in your PDF file. So you must fix this to get the right result on screen first.

Hope this helps.

Thanks!
Uma
Posted: Wednesday, May 27, 2020 2:45:00 PM
Rank: Newbie
Groups: Member

Joined: 5/13/2020
Posts: 8
Hi Team,
Currently we have a purchased license for EO PDF [EO.Pdf.6.0.34]. how to we upgrade the latest version of EO PDF?
eo_support
Posted: Wednesday, May 27, 2020 4:29:29 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Hi,

You will need a new license if you only have version 6. Version 6 is an extremely old version that was released in 2014. We provide upgrade discount for 3 years so the upgrade window for that version has already closed a while ago in 2017.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.