locked
ChartJS not displaying inside Repeater RRS feed

  • 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