Multiple canvasjs charts in MVC partial views

[darrenst]

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

[Bivek Singh]

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 8 years ago by Bivek Singh.

[darrenst]

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.

[Bivek Singh]

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.

[arbitus40]

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.

[Vishwas R]

@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

[zika93]

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.

[arbitus40]

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

[Vishwas R]

@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