👍:0
I have found the solution myself. Strangely enough, what made it work was moving the code that instantiates the chart object to the same Smarty template where I am calling the dialog. In that case, the canvas does have a size, and the chart is drawn correctly.
It is also displayed correctly inside the Bootstrap tab, and I can switch between tabs and the chart still works.
(In my case, the chart is being displayed in the first tab, which is set to active. If the chart is in another tab that’s not active yet, I need to use “$(‘#tab1’).on(‘shown.bs.tab’, function (e)” instead of “$(document).ready(function()”)
So the code now looks like this:
<script>
var buttons = {
Join: {
text: '{translate id=1434}',
click: function(e) {
e.preventDefault();
showLoadingScreen();
showMiniSearchLoadingScreen();
performAction({
action: "addPlayer",
playerid: {$playerdetails.player_id},
starting: 1,
leagueid: memberleagueid
});
// close dialog after adding player
$( this ).dialog( "destroy" );
}
}
}
$( "#dialog" ).dialog({
resizable: false,
width: 855,
height: 650,
modal: true,
dialogClass: 'no-close fixed-dialog player-profile-dialog',
buttons: buttons,
}).attr('id', 'dialog');
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=700,width=960,left=10,top=10,resizable=no,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
$(document).ready(function() {
// Get context with jQuery - using jQuery's .get() method.
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
var options = {
//animation: false,
//scaleoverride: true,
responsive: false,
maintainAspectRatio: true,
bezierCurve: false,
animationSteps: 1,
scaleShowGridLines: true,
scaleShowLabels: true,
pointHitDetectionRadius: 5,
pointDotRadius: 3,
pointDotStrokeWidth: 0,
scaleFontColor: "#2b2b2b",
tooltipFillColor: "rgba(255, 255, 255, 0.8)",
tooltipFontColor: "#2b2b2b",
tooltipFontSize: 12,
multiTooltipKeyBackground: "transparent",
tooltipStrokeColor: "rgba(43,43,43,0.7)",
tooltipTitleFontColor: "#2b2b2b",
multiTooltipTemplate: {literal}'<% if (datasetLabel) {%><%= datasetLabel %>: <%= value %> <%if ( optional.ranking ) {%> - {/literal}{translate id=480}{literal}: <%= optional.ranking %> <%} }%>',{/literal}
legendTemplate: {literal}"<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){ if (datasets[i].label) {%><li><span class=\"chartLegendColor\" style=\"background-color:<%=datasets[i].pointColor%>\"></span><%if(datasets[i].label){%><span class=\"chartLegendLabel\"><%=datasets[i].label%></span><%}%></li><%} }%></ul>"{/literal}
};
var myLineChart = new Chart(ctx).Line(data, options);
});