Chart.js. ASP. Legend template
I've looked everywhere for the answer to this question. Chances are, it's so simple and stupid that most people won't come across it. I am very new to using JavaScript / JQuery and am primarily working in .NET ... specifically C # and Web Apps.
My question is the following.
I am using Chart.js to draw a donut chart in my ASP web application. Everything works fine. but when i go to set parameters for legend it doesn't recognize multiple values, i assume they are defined in Chart.js file.
name.toLowerCase()
segements.length .. ect., It states "Unknown Object"
Here is the line:
legendTemplate: <%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
Note. When I use a standard HTML file it works great.
My guess is that the "<%" needs to be escaped or something else, due to the fact that they are used on the server side.
Any help would be greatly appreciated.
+3
source to share
4 answers
Details Features Cost System permissions-%>
<%--Donut/Pie Chart--%>
<div class="col-md-10">
<div style="background-color:#e2e9f6; padding: 2em; height:375px;">
<canvas width="658" height="375" id="doughnut" style="width: 527px; height: 300px;"></canvas>
</div>
</div>
<div id="pieLegend"></div>
</div>
<%--Donut Chart--%>
<script>
$(function ()
{
var iPropertyDetails = $('.property_details').val();
var iPropertyAttributes = $('.property_features').val();
var iPropertyHistory = $('.property_history').val();
var iPropertyAvm = $('.property_avm').val();
var iPropertyPermits = $('.property_permits').val();
var iPropertySystems = $('.property_systems').val();
var data =
[
{
value: Number(iPropertyDetails),
color: "#f56954",
highlight: "#f56954",
label: "Property Details"
},
{
value: Number(iPropertyAttributes),
color: "#00a65a",
highlight: "#00a65a",
label: "Property Features"
},
{
value: Number(iPropertyHistory),
color: "#f39c12",
highlight: "#f39c12",
label: "History"
},
{
value: Number(iPropertyAvm),
color: "#3c8dbc",
highlight: "#3c8dbc",
label: "Value",
},
{
value: Number(iPropertyPermits),
color: "#00c0ef",
highlight: "#00c0ef",
label: "Permited Work",
},
{
value: Number(iPropertySystems),
color: "#d2d6de",
highlight: "#d2d6de",
label: "Systems Work"
}
];
var options =
{
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout: 50, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: true,
//Boolean - whether to make the chart responsive to window resizing
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,
legendTemplate: '<%="<:=name.toLowerCase():>-legend\"><: for (var i=0; i<segments.length; i++){:><li><span style=\"background-color:<:=segments[i].fillColor:>\"></span><:if(segments[i].label){:><:=segments[i].label:><:}:></li><:}:></ul>".Replace(":", "%")%>'
<%--legendTemplate: "<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" --%>
};
var ctx = $("#doughnut").get(0).getContext("2d");
var chart = new Chart(ctx);
var doughnut = chart.Doughnut(data, options);
var legend = doughnut.generateLegend();
$('#pieLegend').append(legend);
});
</script>
0
source to share
You need to replace this:
<%=texthere%>
with this
<%="<%=texthere%" + ">" %>
and this one
<%texthere%>
with this
<%="<%texthere%" + ">" %>
Replace texthere with your code of course.
So in your case try
legendTemplate: <%= "<%=name.toLowerCase()%" + ">" %>-legend\"><%="<% for (var i=0; i<segments.length; i++){%" + ">" %><li><span style=\"background-color:<%= "<%=segments[i].fillColor%" + ">" %>\"></span><%="<%if(segments[i].label){%" + ">" %><%= "<%=segments[i].label%><%}%" + ">" %></li><%="<%}%" + ">" %></ul>"
0
source to share