Home forums Using CanvasJS Multiple canvasjs charts in MVC partial views

This topic contains 8 replies, has 5 voices, and was last updated by  Vishwas R 2 months, 2 weeks ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #12976

    darrenst
    Member

    I need to show 6-7 charts located in different MVC partial views.

    Each pair of charts is located on a separate partial view

    At the moment “Only” the last view is being rendered. I am not much a javascript coder but suspect its the multiple Window.onload functions events that is causing the issue.

    I changed one partial view to call the Document ready event which worked, however I need to show 2 more charts.

    Can you suggest a method to overcome this limitation whilst keeping the chart html and js located withing the partial view.

    many thanks

    #12991

    Bivek Singh
    Participant

    Darrenst,

    Please check the container IDs. ID should be different for every container. We would need a sample code in order to properly understand the problem and resolve it.

    Bivek,
    Team CanvasJS

    • This reply was modified 1 year, 9 months ago by  Bivek Singh.
    #12994

    darrenst
    Member

    Hi, yes the container Ids are unique.

    The issue I suspect is because I am running multiple script tags each with Window.Onload.

    It seems the last Window.onload block is taking prescidence

    please advise.

    #13037

    Bivek Singh
    Participant

    Darrenst,

    Could you please share your sample application code so that we can understand the issue properly and assist you in a much better way.

    #20791

    arbitus40
    Member

    i have the same problem.
    this my partial view
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    <script>
    window.onload = function () {
    var chart= new CanvasJS.Chart(“chart”, {
    theme: “light1”, // “light1”, “light2”, “dark1”, “dark2”
    exportEnabled: true,
    animationEnabled: true,
    title: {
    text: “Analisis de Daños”
    },
    subtitles: [{
    text: “Vandrservices”
    }],
    data: [{
    type: “pie”,
    startAngle: 180,
    toolTipContent: “<b>{label}</b>: {y}%”,
    showInLegend: “true”,
    legendText: “{label}”,
    indexLabel: “{label} – {y}%”,
    dataPoints: @Html.Raw(ViewBag.DataPoints)
    }]
    });
    chart.render();
    }
    </script>

    <div id=”chart” style=”height: 300px; width: 100%;”></div>

    and i used in a a index page to create many chart, but only show the last one, i am working with mvc.

    #20792

    Vishwas R
    Keymaster

    @arbitus40,

    Please take a look at Rendering Multiple Charts within a Page in ASP.NET MVC Samples. You can download ASP.NET MVC samples from download page.


    Vishwas R
    Team CanvasJS

    #20879

    zika93
    Member

    First, dont include canvas.js script every time. Then, you need unique id for div
    <div >>>> id=”chart” <<< style=”height: 300px; width: 100%;”></div>
    I have created wrapped for canvas.js model by generating random guid from which I set my id to div and then I am using the same id in script to generate canvas.js chart.

    #20888

    arbitus40
    Member

    thanks for your healp, i try in this way, but didnot work
    <script>
    window.onload = function () {

    var chart= new CanvasJS.Chart(@Html.Raw(ViewBag.nombre), {
    theme: “light1”, // “light1”, “light2”, “dark1”, “dark2”
    exportEnabled: true,
    animationEnabled: true,
    title: {
    text: “Analisis de Daños”
    },
    subtitles: [{
    text: @Html.Raw(ViewBag.nombre)
    }],
    data: [{
    type: “pie”,
    startAngle: 180,
    toolTipContent: “<b>{label}</b>: {y}%”,
    showInLegend: “true”,
    legendText: “{label}”,
    indexLabel: “{label} – {y}%”,
    dataPoints: @Html.Raw(ViewBag.DataPoints)
    }]
    });
    chart.render();
    }
    </script>

    <div id=@Html.Raw(ViewBag.nombre) style=”height: 300px; width: 100%;”></div>

    still only show the last chart
    please some help

    #20892

    Vishwas R
    Keymaster

    @arbitus40,

    Can you kindly share sample project along with sample data over Google-drive or Onedrive so that we can look at your code, understand it better and help you out?


    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.