Good day can anyone help me right align columns in javascript
All the numbers with percentages must be right align. I have been struggling to figure this out for a week.
Please see code below
function Graphs() {
// Private methods
function singleGraphHTML(i, pod, podCount, tab_sub)
{
var podLayoutTemplate = ["lg-1-1", "lg-1-2", "lg-1-2", "lg-1-2", "lg-1-3", "lg-1-3"];
var podHeight = "";
podCount = podCount > 6 ? podCount = 6 : podCount;
if ((podCount - i == 5 || podCount - i == 3 || podCount <= 2) && (podCount == podCount - i || podCount <= 2)) {
podHeight = "full";
} else if (podCount == 4) {
podHeight = "half";
}
var contentHtml = "";
switch (pod.data.selected_summary_graph_type.toLowerCase()) {
case "datagrid":
var buttonLabel = (tab_sub === undefined ? pod.data.pod_tab_sub : tab_sub === "" ? pod.data.pod_tab : pod.data.pod_title_text);
if (buttonLabel.length > 28)
buttonLabel = buttonLabel.substr(0, 28) + "..";
contentHtml += "<div class=\"collapsable open cell " + podLayoutTemplate[podCount - 1] + "\">" +
"<button class=\"heading\">" + buttonLabel + "</button>";
if (pod.data.legend.length > 0) {
contentHtml += "<a href=\"#\" class=\"key ion-information-circled\">" +
"<div>";
for (var k = 0; k < pod.data.legend.length; k++) {
contentHtml += "<span><span style=\"background-color: #" + pod.data.legend[k].sColor + ";\"></span>" + pod.data.legend[k].sName + "</span>";
}
contentHtml += "</div>" +
"</a>";
}
contentHtml += "<a href=\"#\" class=\"more\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + (tab_sub !== undefined && tab_sub !== "" ? pod.data.controluid : "") + "\">More <span class=\"icon ion-chevron-right\"></span></a>" +
"<div class=\"content\">" +
"<div class=\"chart-name\">" + pod.data.pod_description_text + "</div>" +
"<div class=\"card " + podHeight + "\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + pod.data.controluid + "\">" +
"<div class=\"charts1\">" +
"<table id=\"Chart_dataGrid_" + i + "\" class=\"chart\">";
if (pod.data.tableColumns) {
var columnWidthArray = [];
var columnWidth = 0;
contentHtml += "<thead>";
contentHtml += "<tr>";
for (var l = 0; l < pod.data.tableColumns.length; l++) {
columnWidth = (pod.data.tableColumns[l].length < 14 ? 16 * 8 : pod.data.tableColumns[l].length * 8);
//columnWidth = "";
columnWidthArray.push(columnWidth);
contentHtml += "<th>" + pod.data.tableColumns[l] + "</th>";
//contentHtml += "<th style=\"" + (pod.data.tableColumns[l].length >= 8 && columnWidth < 120 ? "font-size: 13px; " : "") + (pod.data.tableColumns[l].length >= 12 && columnWidth < 140 ? "font-size: 12px; " : "") + "\">" + pod.data.tableColumns[l] + "</th>";
}
contentHtml += "</tr>";
contentHtml += "</thead>";
} else {
contentHtml += "<thead>";
contentHtml += "<tr>";
contentHtml += "<th style=\"width: 25%\">Departments</th>";
try {
(pod.data.summaryData[0].fScore2 !== undefined ? contentHtml += "<th colspan=\"2\" style=\"width: 20%\">Number</th>" : contentHtml += "<th style=\"width: 20%\">Number</th>");
(pod.data.summaryData[0].fScore2 !== undefined ? contentHtml += "<th style=\"width: 15%\">Movement</th>" : "");
} catch (e) {
contentHtml += "<th style=\"width: 25%\">Number</th>";
}
contentHtml += "</tr>";
contentHtml += "</thead>";
}
var colName = [];
try {
for (var m = 0; m < pod.data.columns.length; m++) {
if (Array.isArray(pod.data.columns[m])) {
for (var n = 0; n < pod.data.columns[m].length; n++) {
colName.push(pod.data.columns[m][n]);
}
} else {
colName.push(pod.data.columns[m]);
}
}
} catch (e) { }
var recordsetLength = pod.data.summaryData.length <= 5 ? pod.data.summaryData.length : pod.data.summaryData.length;
for (var l = 0; l < recordsetLength; l++) {
if (colName.length > 0) {
contentHtml += "<tr>";
for (var m = 0; m < pod.data.columns.length; m++) {
for (var field in pod.data.summaryData[l]) {
if (field === pod.data.columns[m]) {
var preFix = pod.data.summaryData[l]["sPrefix"] !== undefined ? pod.data.summaryData[l]["sPrefix"] : "";
var postFix = pod.data.summaryData[l]["sPostfix"] !== undefined ? pod.data.summaryData[l]["sPostfix"] : "";
var value = pod.data.summaryData[l][field];
if (value.toString().substr(0, 3) == "- 1") {
value = "N/A";
}
var color = pod.data.summaryData[l][field + "_color"];
color = color !== "" && color !== undefined ? " <span class=\"color\" style=\"background: #" + color + "\"></span>" : " <span class=\"color\"></span>";
contentHtml += "<td class=\"" + (!isNaN(value) || (!isNaN(value.toString().substr(1, value.length)) || value == "N/A") ? "text-right" : "") + "\">" + (!isNaN(value) ? preFix : "") + value + (!isNaN(value) ? postFix : "") + color + "</td>";
}
}
}
contentHtml += "</tr>";
} else {
var color1 = pod.data.summaryData[l].fScore_color;
var color2 = pod.data.summaryData[l].fScore2_color;
color1 = color1 !== "" && color1 !== undefined ? " <span class=\"color\" style=\"background: #" + color1 + "\"></span>" : " <span class=\"color\"></span>";
color2 = color2 !== "" && color2 !== undefined ? " <span class=\"color\" style=\"background: #" + color2 + "\"></span>" : " <span class=\"color\"></span>";
var preFix = pod.data.summaryData[l]["sPrefix"] !== undefined ? pod.data.summaryData[l]["sPrefix"] : "";
var postFix = pod.data.summaryData[l]["sPostfix"] !== undefined ? pod.data.summaryData[l]["sPostfix"] : "";
var value1 = pod.data.summaryData[l].fScore;
if (value1.toString().substr(0, 3) == "- 1") {
value1 = "N/A";
}
if (pod.data.summaryData[l].fScore2) {
var value2 = pod.data.summaryData[l].fScore2;
if (value2.toString().substr(0, 3) == "- 1") {
value2 = "N/A";
}
}
contentHtml += "<tr>";
contentHtml += "<td>" + pod.data.summaryData[l].sLabel + "</td>";
contentHtml += "<td class=\"" + (!isNaN(value1) || (!isNaN(value1.toString().substr(1, value1.length)) || value1 == "N/A") ? "text-right" : "") + "\">" + (!isNaN(value1) ? preFix : "") + value1 + (!isNaN(value1) ? postFix : "") + color1 + "</td>";
(value2 !== undefined ? contentHtml += "<td class=\"" + (!isNaN(value2) || (!isNaN(value2.toString().substr(1, value2.length)) || value2 == "N/A") ? "text-right" : "") + "\">" + (!isNaN(value2) ? preFix : "") + value2 + (!isNaN(value2) ? postFix : "") + color2 + "</td>" : "");
(pod.data.summaryData[l].iTotal !== undefined ? contentHtml += "<td class=\"" + (!isNaN(pod.data.summaryData[l].iTotal) || (!isNaN(pod.data.summaryData[l].iTotal.toString().substr(1, pod.data.summaryData[l].iTotal.length)) || pod.data.summaryData[l].iTotal == "N/A") ? "text-right" : "") + "\">" + pod.data.summaryData[l].iTotal + "</td>" : "");
(pod.data.summaryData[l].fScore_movement !== undefined ? contentHtml += "<td class=\"" + (!isNaN(pod.data.summaryData[l].fScore_movement) || (!isNaN(pod.data.summaryData[l].fScore_movement.toString().substr(1, pod.data.summaryData[l].fScore_movement.length)) || pod.data.summaryData[l].fScore_movement == "N/A") ? "text-right" : "") + "\">" + pod.data.summaryData[l].fScore_movement + "</td>" : "");
contentHtml += "</tr>";
}
}
contentHtml += "</table>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
break;
case "pie":
var buttonLabel = (tab_sub === undefined ? pod.data.pod_tab_sub : tab_sub === "" ? pod.data.pod_tab : pod.data.pod_title_text);
if (buttonLabel.length > 28)
buttonLabel = buttonLabel.substr(0, 28) + "..";
contentHtml += "<div class=\"collapsable open cell " + podLayoutTemplate[podCount - 1] + "\">" +
"<button class=\"heading\">" + buttonLabel + "</button>";
if (pod.data.legend.length > 0) {
contentHtml += "<a href=\"#\" class=\"key ion-information-circled\">" +
"<div>";
for (var k = 0; k < pod.data.legend.length; k++) {
contentHtml += "<span><span style=\"background-color: #" + pod.data.legend[k].sColor + ";\"></span>" + pod.data.legend[k].sName + "</span>";
}
contentHtml += "</div>" +
"</a>";
}
contentHtml += "<a href=\"#\" class=\"more\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + (tab_sub !== undefined && tab_sub !== "" ? pod.data.controluid : "") + "\">More <span class=\"icon ion-chevron-right\"></span></a>" +
"<div class=\"content\">" +
"<div class=\"chart-name\">" + pod.data.pod_description_text + "</div>" +
"<div class=\"card " + podHeight + "\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + pod.data.controluid + "\">" +
"<div class=\"charts\">" +
"<div id=\"Chart_Pie_1_" + i + "\" class=\"chart\"></div>" +
"<div id=\"Chart_Pie_2_" + i + "\" class=\"chart\"></div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
break;
case "overall":
var buttonLabel = (tab_sub === undefined ? pod.data.pod_tab_sub : tab_sub === "" ? pod.data.pod_tab : pod.data.pod_title_text);
if (buttonLabel.length > 28)
buttonLabel = buttonLabel.substr(0, 28) + "..";
contentHtml += "<div class=\"collapsable open cell " + podLayoutTemplate[podCount - 1] + "\">" +
"<button class=\"heading\">" + buttonLabel + "</button>";
if (pod.data.legend.length > 0) {
contentHtml += "<a href=\"#\" class=\"key ion-information-circled\">" +
"<div>";
for (var k = 0; k < pod.data.legend.length; k++) {
contentHtml += "<span><span style=\"background-color: #" + pod.data.legend[k].sColor + ";\"></span>" + pod.data.legend[k].sName + "</span>";
}
contentHtml += "</div>" +
"</a>";
}
contentHtml += "<a href=\"#\" class=\"more\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + (tab_sub !== undefined && tab_sub !== "" ? pod.data.controluid : "") + "\">More <span class=\"icon ion-chevron-right\"></span></a>" +
"<div class=\"content\">" +
"<div class=\"chart-name\">" + pod.data.pod_description_text + "</div>" +
"<div class=\"card " + podHeight + "\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + pod.data.controluid + "\">" +
"<div class=\"charts\">" +
"<div id=\"Chart_Overall_1_" + i + "\" class=\"chart\"></div>" +
"<div id=\"Chart_Overall_2_" + i + "\" class=\"chart\"></div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
break;
case "bar":
var buttonLabel = (tab_sub === undefined ? pod.data.pod_tab_sub : tab_sub === "" ? pod.data.pod_tab : pod.data.pod_title_text);
if (buttonLabel.length > 28)
buttonLabel = buttonLabel.substr(0, 28) + "..";
contentHtml += "<div class=\"collapsable open cell " + podLayoutTemplate[podCount - 1] + "\">" +
"<button class=\"heading\">" + buttonLabel + "</button>";
if (pod.data.legend.length > 0) {
contentHtml += "<a href=\"#\" class=\"key ion-information-circled\">" +
"<div>";
for (var k = 0; k < pod.data.legend.length; k++) {
contentHtml += "<span><span style=\"background-color: #" + pod.data.legend[k].sColor + ";\"></span>" + pod.data.legend[k].sName + "</span>";
}
contentHtml += "</div>" +
"</a>";
}
contentHtml += "<a href=\"#\" class=\"more\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + (tab_sub !== undefined && tab_sub !== "" ? pod.data.controluid : "") + "\">More <span class=\"icon ion-chevron-right\"></span></a>" +
"<div class=\"content\">" +
"<div class=\"chart-name\">" + pod.data.pod_description_text + "</div>" +
"<div class=\"card " + podHeight + "\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + pod.data.controluid + "\">" +
"<div class=\"charts\">" +
"<div id=\"Chart_Bar_" + i + "\" class=\"chart\"></div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
break;
case "column":
var buttonLabel = (tab_sub === undefined ? pod.data.pod_tab_sub : tab_sub === "" ? pod.data.pod_tab : pod.data.pod_title_text);
if (buttonLabel.length > 28)
buttonLabel = buttonLabel.substr(0, 28) + "..";
contentHtml += "<div class=\"collapsable open cell " + podLayoutTemplate[podCount - 1] + "\">" +
"<button class=\"heading\">" + buttonLabel + "</button>";
if (pod.data.legend.length > 0) {
contentHtml += "<a href=\"#\" class=\"key ion-information-circled\">" +
"<div>";
for (var k = 0; k < pod.data.legend.length; k++) {
contentHtml += "<span><span style=\"background-color: #" + pod.data.legend[k].sColor + ";\"></span>" + pod.data.legend[k].sName + "</span>";
}
contentHtml += "</div>" +
"</a>";
}
contentHtml += "<a href=\"#\" class=\"more\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + (tab_sub !== undefined && tab_sub !== "" ? pod.data.controluid : "") + "\">More <span class=\"icon ion-chevron-right\"></span></a>" +
"<div class=\"content\">" +
"<div class=\"chart-name\">" + pod.data.pod_description_text + "</div>" +
"<div class=\"card " + podHeight + "\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + pod.data.controluid + "\">" +
"<div class=\"charts\">" +
"<div id=\"Chart_Column_" + i + "\" class=\"chart\"></div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
break;
case "linestraight":
var buttonLabel = (tab_sub === undefined ? pod.data.pod_tab_sub : tab_sub === "" ? pod.data.pod_tab : pod.data.pod_title_text);
if (buttonLabel.length > 28)
buttonLabel = buttonLabel.substr(0, 28) + "..";
contentHtml += "<div class=\"collapsable open cell " + podLayoutTemplate[podCount - 1] + "\">" +
"<button class=\"heading\">" + buttonLabel + "</button>";
if (pod.data.legend.length > 0) {
contentHtml += "<a href=\"#\" class=\"key ion-information-circled\">" +
"<div>";
for (var k = 0; k < pod.data.legend.length; k++) {
contentHtml += "<span><span style=\"background-color: #" + pod.data.legend[k].sColor + ";\"></span>" + pod.data.legend[k].sName + "</span>";
}
contentHtml += "</div>" +
"</a>";
}
contentHtml += "<a href=\"#\" class=\"more\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + (tab_sub !== undefined && tab_sub !== "" ? pod.data.controluid : "") + "\">More <span class=\"icon ion-chevron-right\"></span></a>" +
"<div class=\"content\">" +
"<div class=\"chart-name\">" + pod.data.pod_description_text + "</div>" +
"<div class=\"card " + podHeight + "\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + pod.data.controluid + "\">" +
"<div class=\"charts\">" +
"<div id=\"Chart_LineStraight_" + i + "\" class=\"chart\"></div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
break;
case "linesmooth":
var buttonLabel = (tab_sub === undefined ? pod.data.pod_tab_sub : tab_sub === "" ? pod.data.pod_tab : pod.data.pod_title_text);
if (buttonLabel.length > 28)
buttonLabel = buttonLabel.substr(0, 28) + "..";
contentHtml += "<div class=\"collapsable open cell " + podLayoutTemplate[podCount - 1] + "\">" +
"<button class=\"heading\">" + buttonLabel + "</button>";
if (pod.data.legend.length > 0) {
contentHtml += "<a href=\"#\" class=\"key ion-information-circled\">" +
"<div>";
for (var k = 0; k < pod.data.legend.length; k++) {
contentHtml += "<span><span style=\"background-color: #" + pod.data.legend[k].sColor + ";\"></span>" + pod.data.legend[k].sName + "</span>";
}
contentHtml += "</div>" +
"</a>";
}
contentHtml += "<a href=\"#\" class=\"more\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + (tab_sub !== undefined && tab_sub !== "" ? pod.data.controluid : "") + "\">More <span class=\"icon ion-chevron-right\"></span></a>" +
"<div class=\"content\">" +
"<div class=\"chart-name\">" + pod.data.pod_description_text + "</div>" +
"<div class=\"card " + podHeight + "\" data-tab=\"" + pod.data.pod_tab + "\" data-tab_sub=\"" + pod.data.pod_tab_sub + "\" data-controluid=\"" + pod.data.controluid + "\">" +
"<div class=\"charts\">" +
"<div id=\"Chart_LineSmooth_" + i + "\" class=\"chart\"></div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
break;
default:
}
return contentHtml;
}
function singleGraphJS(i, pod, tab, tab_sub)
{
var grahpcolors = ["a", "b", "c", "d", "e"];
var contentStyle = "";
switch (pod.data.selected_summary_graph_type.toLowerCase()) {
case "datagrid":
// Bind charts: dataGrid
var chart = _content.find("#Chart_dataGrid_" + i).get(0);
$("th", $(chart)).each(function (thIndex) {
$this = $(this);
BraxtonPeformax.Application.AdjustFontSize(this, true);
$("tr", $(chart)).each(function (trindex) {
if ($("tbody tr:nth-child(" + (trindex + 1) + ") td:nth-child(" + (thIndex + 1) + ")", $(chart)).hasClass("text-right")) {
$this.addClass("text-center");
}
});
});
$more = $(chart).parents(".cell").children("a.more");
$graph = $(chart).parents(".card");
$more.add($graph).bind("click", function (e) {
e.preventDefault();
e.stopPropagation();
setHistory("single", tab, $(this).data("tab"), tab_sub, $(this).data("tab_sub"), pod.data.selected_single_view_detail, $(this).data("controluid"));
});
break;
case "pie":
var labels = [[], []];
var series = [[], []];
var colors = [[], []];
var colName = [];
try {
for (var m = 0; m < pod.data.columns.length; m++) {
if (Array.isArray(pod.data.columns[m])) {
for (var n = 0; n < pod.data.columns[m].length; n++) {
colName.push(pod.data.columns[m][n]);
}
} else {
colName.push(pod.data.columns[m]);
}
}
} catch (e) { }
contentStyle += "<style>";
for (var k = 0; k < pod.data.summaryData.length; k++) {
if (colName.length > 1000) {
for (var m = 0; m < pod.data.columns.length; m++) {
for (var field in pod.data.summaryData[k]) {
if (field === pod.data.columns[m]) {
var preFix = pod.data.summaryData[k]["sPrefix"] !== undefined ? pod.data.summaryData[k]["sPrefix"] : "";
var postFix = pod.data.summaryData[k]["sPostfix"] !== undefined ? pod.data.summaryData[k]["sPostfix"] : "";
var value = pod.data.summaryData[k][field];
if (value.toString().substr(0, 3) !== "- 1") {
value = (!isNaN(value) ? preFix : "") + value + (!isNaN(value) ? postFix : "");
} else {
value = "N/A";
}
var color = pod.data.summaryData[k][field + "_color"];
}
}
}
} else {
labels[0].push("<div>" + pod.data.summaryData[k].sLabel + "</div>" + " <span>" + (pod.data.summaryData[k].sPrefix !== undefined ? pod.data.summaryData[k].sPrefix : "") + pod.data.summaryData[k].fScore_date + " " + parseFloat(pod.data.summaryData[k].fScore) + (pod.data.summaryData[k].sPostfix !== undefined ? pod.data.summaryData[k].sPostfix : "") + (pod.data.summaryData[k].iCount !== undefined ? ' (' + pod.data.summaryData[k].iCount + ')' : "") + "</span>");
series[0].push({
meta: (pod.data.summaryData[k].fScore_date ? pod.data.summaryData[k].fScore_date + " " : "") + "<b>" + (pod.data.summaryData[k].sPrefix !== undefined ? pod.data.summaryData[k].sPrefix : "") + parseFloat(pod.data.summaryData[k].fScore) + (pod.data.summaryData[k].sPostfix !== undefined ? pod.data.summaryData[k].sPostfix : "") + "</b>",
value: (pod.data.summaryData[k].fScore.toString().substr(0, 3) !== "- 1" ? parseFloat(pod.data.summaryData[k].fScore) : 0)
});
colors[0].push(pod.data.summaryData[k].fScore_color);
if (pod.data.summaryData[k].fScore2 !== undefined) {
labels[1].push("<div>" + pod.data.summaryData[k].sLabel + "</div>" + " <span>" + (pod.data.summaryData[k].sPrefix !== undefined ? pod.data.summaryData[k].sPrefix : "") + pod.data.summaryData[k].fScore2_date + " " + parseFloat(pod.data.summaryData[k].fScore2) + (pod.data.summaryData[k].sPostfix !== undefined ? pod.data.summaryData[k].sPostfix : "") + (pod.data.summaryData[k].iCount !== undefined ? ' (' + pod.data.summaryData[k].iCount + ')' : "") + "</span>");
series[1].push({
meta: (pod.data.summaryData[k].fScore2 ? pod.data.summaryData[k].fScore2 + " " : "") + "<b>" + (pod.data.summaryData[k].sPrefix !== undefined ? pod.data.summaryData[k].sPrefix : "") + parseFloat(pod.data.summaryData[k].fScore2) + (pod.data.summaryData[k].sPostfix !== undefined ? pod.data.summaryData[k].sPostfix : "") + "</b>",
value: (pod.data.summaryData[k].fScore2.toString().substr(0, 3) !== "- 1" ? parseFloat(pod.data.summaryData[k].fScore2) : 0)
});
colors[1].push(pod.data.summaryData[k].fScore2_color);
contentStyle += "#Chart_Pie_1_" + i + " .ct-series-" + grahpcolors[k] + " .ct-slice-donut { stroke: #" + colors[0][k] + " } ";
contentStyle += "#Chart_Pie_1_" + i + " .ct-legend .ct-series-" + k + ":before { background-color: #" + colors[0][k] + "; border-color: #" + colors[0][k] + "; } ";
contentStyle += "#Chart_Pie_2_" + i + " .ct-series-" + grahpcolors[k] + " .ct-slice-donut { stroke: #" + colors[1][k] + " } ";
contentStyle += "#Chart_Pie_2_" + i + " .ct-legend .ct-series-" + k + ":before { background-color: #" + colors[1][k] + "; border-color: #" + colors[1][k] + "; } ";
} else {
contentStyle += "#Chart_Pie_1_" + i + " .ct-series-" + grahpcolors[k] + " .ct-slice-donut { stroke: #" + colors[0][k] + " } ";
contentStyle += "#Chart_Pie_1_" + i + " .ct-legend .ct-series-" + k + ":before { background-color: #" + colors[0][k] + "; border-color: #" + colors[0][k] + "; } ";
}
}
}
contentStyle += "</style>";