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?
