Answered by:
ChartJS not displaying inside Repeater

Question
-
User1126057398 posted
I am trying to add Chart[Using ChartJS] inside Repeater. But the issue is that it's not displaying. Below is the code:
<asp:Repeater ID="rptNutritionalChart" runat="server" OnItemDataBound="rptNutritionalChart_ItemDataBound">
<ItemTemplate>
<%#Eval("MEAL_PLAN_DESCRIPTION") %><br />
<asp:HiddenField ID="hfMealPlanId" Value='<%#Eval("MEAL_PLAN_ID") %>' runat="server" />
<ul>
<li>
<div class="col-sm-6">
<div class="chart">
<asp:Literal ID="ltCalorieChart" runat="server"></asp:Literal>
</div>
</div>
</li>
<li>
<div class="col-sm-6">
<div class="chart">
<%--<asp:Literal ID="ltComparisionChart" runat="server"></asp:Literal>--%>
</div>
</div>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>In .cs:
protected void rptNutritionalChart_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
//Bind Summary Chart
// lstNutritionalSummary
//Bind Detail Chart
HiddenField hfMealPlanId = (HiddenField)e.Item.FindControl("hfMealPlanId");
if(hfMealPlanId!=null && Convert.ToInt32(hfMealPlanId.Value)>0)
{
//Calorie Chart
Literal ltrCalorie = (Literal)e.Item.FindControl("ltCalorieChart");
if(ltrCalorie!=null)
{
CreateCalorieChart(ltrCalorie, lstNutritionalDtl.Where(d => d.MealTypeId == Convert.ToInt32(hfMealPlanId.Value)), Convert.ToInt32(hfMealPlanId.Value));
}
//Comparision Chart
Literal ltComparisionChart = (Literal)e.Item.FindControl("ltComparisionChart");
if (ltrCalorie != null)
{
// CreateComparisionChart(ltComparisionChart, lstNutritionalDtl.Where(d => d.MealTypeId == Convert.ToInt32(hfMealPlanId.Value)), Convert.ToInt32(hfMealPlanId.Value));
}
}
}private void CreateCalorieChart(Literal ltChartCalorie, IEnumerable<CurrentDietChartData> gbmeal, int mealtypeId)
{
String chart = string.Empty;
String chartId = String.Format("{0}{1}", "chart-canvasmt", mealtypeId);
// You can change your chart height by modify height value
chart = "<canvas id='" + chartId + "'></canvas><script>";
chart += "new Chart(document.getElementById('" + chartId + "'),{type: 'horizontalBar', data:{ labels: [";
String rwdata = string.Empty;
foreach (var fp in gbmeal)
rwdata += string.Format("'{0}',",fp.FoodProduct);
if(rwdata != string.Empty)
rwdata = rwdata.Substring(0, rwdata.Length - 1);
chart += rwdata;chart += "],datasets: [{ data: [";
// put data from database to chart
String value = string.Empty;
//for (int i = 0; i < tb.Rows.Count; i++)
foreach (var fp in gbmeal)
value += string.Format("{0},", fp.Calorie);
if (value != string.Empty)
value = value.Substring(0, value.Length - 1);
chart += value;chart += "],label: \"Calories\", borderColor: \"#3e95cd\",backgroundColor: \"#00e600\", scaleShowGridLines: false,showScale: false,fill: true}"; // Chart color
chart += "]}, options: { title: { display: true}, legend: {position: 'bottom'},scales: { xAxes: [{gridLines: {display:false}, ticks:{beginAtZero:true}}], yAxes: [{gridLines:{display:false},barPercentage: 0.2,maintainAspectRatio:false}]}}"; // Chart title
chart += "},{ responsive: true});";
chart += "</script>";ltChartCalorie.Text = chart;
}At runtime, it's creating script like below:
<canvas id='chart-canvasmt14'></canvas><script>new Chart(document.getElementById('chart-canvasmt14'),{type: 'horizontalBar', data:{ labels: ['Dalia (salted)'],datasets: [{ data: [332.00],label: "Calories", borderColor: "#3e95cd",backgroundColor: "#00e600", scaleShowGridLines: false,showScale: false,fill: true}]}, options: { title: { display: true}, legend: {position: 'bottom'},scales: { xAxes: [{gridLines: {display:false}, ticks:{beginAtZero:true}}], yAxes: [{gridLines:{display:false},barPercentage: 0.2,maintainAspectRatio:false}]}}},{ responsive: true});</script>
<canvas id='chart-canvasmt16'></canvas><script>new Chart(document.getElementById('chart-canvasmt16'),{type: 'horizontalBar', data:{ labels: ['Beans','Chikki'],datasets: [{ data: [80.00,290.00],label: "Calories", borderColor: "#3e95cd",backgroundColor: "#00e600", scaleShowGridLines: false,showScale: false,fill: true}]}, options: { title: { display: true}, legend: {position: 'bottom'},scales: { xAxes: [{gridLines: {display:false}, ticks:{beginAtZero:true}}], yAxes: [{gridLines:{display:false},barPercentage: 0.2,maintainAspectRatio:false}]}}},{ responsive: true});</script>
<canvas id='chart-canvasmt16'></canvas><script>new Chart(document.getElementById('chart-canvasmt16'),{type: 'horizontalBar', data:{ labels: ['Beans','Chikki'],datasets: [{ data: [80.00,290.00],label: "Calories", borderColor: "#3e95cd",backgroundColor: "#00e600", scaleShowGridLines: false,showScale: false,fill: true}]}, options: { title: { display: true}, legend: {position: 'bottom'},scales: { xAxes: [{gridLines: {display:false}, ticks:{beginAtZero:true}}], yAxes: [{gridLines:{display:false},barPercentage: 0.2,maintainAspectRatio:false}]}}},{ responsive: true});</script>
But Chart is not displayed?
Saturday, August 24, 2019 9:10 AM
Answers
-
User1126057398 posted
Solved it by making few changes. Firstly, changed chart id and other thing is rather then passing literal to method, initialized literal inside ItemDataBound like below:
protected void rptNutritionalChart_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
//Bind Detail Chart
HiddenField hfMealPlanId = (HiddenField)e.Item.FindControl("hfMealPlanId");
if(hfMealPlanId!=null && Convert.ToInt32(hfMealPlanId.Value)>0)
{
//Calorie Chart
Literal ltrCalorie = (Literal)e.Item.FindControl("ltCalorieChart");
if(ltrCalorie!=null)
{
ltrCalorie.Text = CreateCalorieChart(lstNutritionalDtl.Where(d => d.MealTypeId == Convert.ToInt32(hfMealPlanId.Value)), Convert.ToInt32(hfMealPlanId.Value));
}
//Comparision Chart
Literal ltComparisionChart = (Literal)e.Item.FindControl("ltComparisionChart");
if (ltrCalorie != null)
{
ltComparisionChart.Text = CreateComparisionChart(lstNutritionalDtl.Where(d => d.MealTypeId == Convert.ToInt32(hfMealPlanId.Value)), Convert.ToInt32(hfMealPlanId.Value));
}
}
}private string CreateCalorieChart(IEnumerable<CurrentDietChartData> gbmeal, int mealtypeId=0)
{
String chart = string.Empty;
String chartId = string.Empty;
if(mealtypeId!=0) //Detail Chart
chartId = String.Format("{0}{1}", "chart-canvasmt0", mealtypeId);
else //Summary Chart
chartId = "chart-canvasmts0";
// You can change your chart height by modify height value
chart = "<canvas id='" + chartId + "'></canvas><script>";
chart += "new Chart(document.getElementById('" + chartId + "'),{type: 'horizontalBar', data:{ labels: [";
String rwdata = string.Empty;
foreach (var fp in gbmeal)
rwdata += string.Format("'{0}',",fp.FoodProduct);
if(rwdata != string.Empty)
rwdata = rwdata.Substring(0, rwdata.Length - 1);
chart += rwdata;chart += "],datasets: [{ data: [";
// put data from database to chart
String value = string.Empty;
//for (int i = 0; i < tb.Rows.Count; i++)
foreach (var fp in gbmeal)
value += string.Format("{0},", fp.Calorie);
if (value != string.Empty)
value = value.Substring(0, value.Length - 1);
chart += value;chart += "],label: \"Calories\", borderColor: \"#3e95cd\",backgroundColor: \"#00e600\", scaleShowGridLines: false,showScale: false,fill: true}"; // Chart color
chart += "]}, options: { title: { display: true}, legend: {position: 'bottom'},scales: { xAxes: [{gridLines: {display:false}, ticks:{beginAtZero:true}}], yAxes: [{gridLines:{display:false},barPercentage: 0.2,maintainAspectRatio:false}]}}"; // Chart title
chart += "},{ responsive: true});";
chart += "</script>";return chart;
}private string CreateComparisionChart(IEnumerable<CurrentDietChartData> gbmeal, int mealtypeId=0)
{
String chart = string.Empty;
String chartId = string.Empty;
if (mealtypeId != 0)
chartId = String.Format("{0}{1}", "chart-canvascdcp0", mealtypeId);
else
chartId = "chart-canvascdcps0";
// You can change your chart height by modify height value
chart = "<canvas id='" + chartId + "'></canvas><script>";
chart += "new Chart(document.getElementById('" + chartId + "'),{type: 'bar', data:{ labels: [";
String rwdata = string.Empty;
foreach (var fp in gbmeal)
rwdata += string.Format("'{0}',", fp.FoodProduct);
if (rwdata != string.Empty)
rwdata = rwdata.Substring(0, rwdata.Length - 1);
chart += rwdata;// put data from database to chart
chart += "],datasets: [{ label: \"Carbohydrate\",backgroundColor: \"#6666ff\",data: [";
String value = string.Empty;
foreach (var fp in gbmeal)
value += string.Format("{0},", fp.Carbohydrate);
if (value != string.Empty)
value = value.Substring(0, value.Length - 1);
chart += value;
chart += "]},";
chart += "{label: \"Fat\",backgroundColor: \"#e64d00\",data: [";
value = string.Empty;
foreach (var fp in gbmeal)
value += string.Format("{0},", fp.Fat);
if (value != string.Empty)
value = value.Substring(0, value.Length - 1);
chart += value;
chart += "]},";
chart += "{label: \"Protein\",backgroundColor: \"#ffc266\",data: [";
value = string.Empty;
foreach (var fp in gbmeal)
value += string.Format("{0},", fp.Protein);
if (value != string.Empty)
value = value.Substring(0, value.Length - 1);
chart += value;
chart += "]},";chart += "]}, options: {scales: { xAxes: [{gridLines: {display:false}, ticks:{beginAtZero:true}, categoryPercentage: 0.3, barPercentage: 0.3,maintainAspectRatio:false}], yAxes: [{gridLines:{display:false}, ticks:{ beginAtZero: true}}]}, title: { display: true, position: 'bottom'}, legend: {position: 'bottom'}}"; // Chart title
chart += "},{ responsive: true});";
chart += "</script>";
return chart;
}- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Saturday, August 24, 2019 12:17 PM