Home forums Using CanvasJS Inserting multiple pie charts on one page

This topic contains 1 reply, has 2 voices, and was last updated by  Indranil Deo 4 weeks, 1 day ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #20007

    Noirdesir19
    Member

    Hi, I’m trying to insert multiple pie charts inside my web page but they don’t load and I don’t understand exactly why.

    I put the script to create my charts inside a loop that will feed the different charts with its designated data.
    Here is the loop that should create the charts:

     for (int i = 0; i < Model.ListButtons.Count(); i++)
            {
                int ok = (int)Model.ListButtonChart[i][0].Percentage;
                int warning = (int)Model.ListButtonChart[i][1].Percentage;
                int nok = (int)Model.ListButtonChart[i][2].Percentage;
                int na = (int)Model.ListButtonChart[i][3].Percentage;
    
                <span>@Model.ListButtons[i].Name</span>
                ViewBag.myId = "button" + i;
                
                <div id="@ViewBag.myId" style="height: 150px; width: 150px;"></div>
                <script type="text/javascript">
                    window.onload = function () {
                        
                        var test = "test";
                        console.log(test);
    
                        var chartData = @Html.Raw(@JsonConvert.SerializeObject(Model.ListButtonChart));
    
                        console.log(chartData[@i]);
                        var chart = new CanvasJS.Chart(@Html.Raw(@JsonConvert.SerializeObject(@ViewData["myId"])), {
                            title: {
                                    
                                text: @Html.Raw(@JsonConvert.SerializeObject(@Model.ListButtons[i].Name)),
                                    },
                                data: [
                                        { y: chartData[0].Percentage, legendText: chartData[0].Name },
                                        { y: chartData[1].Percentage, legendText: chartData[1].Name },
                                        { y: chartData[2].Percentage, legendText: chartData[2].Name },
                                    ]
                        });
                        chart.render();
                        
                    };
                </script>
    
            }

    It seems that the script does not beyond the “windows.onload” line and I have no idea why.
    If anybody can help me I would be very grateful!

    #20010

    Indranil Deo
    Member

    @noirdesir19,

    Can you please create a sample project with a sample database and share it over Google-Drive or Onedrive so that we can understand your code better and help you out?

    ___________
    Indranil Deo,
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.