You must be logged in to post your query.
Home › Forums › Chart Support › Multiple canvasjs charts in MVC partial views
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
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
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.
Could you please share your sample application code so that we can understand the issue properly and assist you in a much better way.
i have the same problem. this my partial view
<script src="https://cdn.canvasjs.com/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.
@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
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.
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
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?
You must be logged in to reply to this topic. Login/Register