I am using following code to generate chart in Microsoft Access Form using web browser control and on most of the computers it is working completely fine including on Windows 7 SP1 and Windows 10 but on two PCs with windows 10, it is not showing up correctly. Urdu text is showing up incorrectly (characters mixed with each other as shown in below image).
I saved the following code in text file with extension html and opened it with internet Explorer on both PCs (one on which it works perfectly and other on which problem exists) and it worked on one PC and not on other PC.
I verified locale/regional settings on both PCs using Windows-Key + R and then using intl.cpl command and both PCs have same settings.
What could be causing this issue and how can I fix it. Please help.
Chart With Urdu Not Showing Correctly
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<title>Chart</title>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=Edge'>
<script>
function isPowerOfTen (n) { while (n >= 10 && n % 10 == 0) { n /= 10; } return n == 1; }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-colorschemes"></script>
<style>
body { margin: 0; padding: 0; }
#container { width: 100%; }
</style>
</head>
<body>
<div id='container'>
<canvas id='myChart'></canvas>
</div>
<script>
Chart.defaults.global.animation.duration = 0;
Chart.defaults.global.animation.easing = 'linear';
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['جنوری','فروری','مارچ',],
datasets: [
{label: 'تعداد' ,
data: [ 2, 4, 12],
backgroundColor: Chart['colorschemes'].tableau.Tableau20,
borderWidth: 1}
]
},
options: {
aspectRatio: 3.65166865315852,
title: {
display: true,
position: 'top',
text: 'مہینہ کے حساب سے تعداد',
fontFamily: 'Jameel Noori Nastaleeq',
fontSize: 25,
fontStyle: 'normal'
},
legend: {
display: false
},
scales: {
yAxes: [{
id: 'first-y-Axis',
display: true,
ticks: {
TicksMaxLimit: 5 ,
autoSkip: true
}
}],
xAxes: [{
id: 'first-x-Axis',
display: true,
ticks: {
fontFamily: 'Jameel Noori Nastaleeq',
autoSkip: false
}
}]
},
plugins: {
colorschemes: {
scheme: 'tableau.Tableau20'
}
}
}
});
</script>
</body>
</html>
You should try set your html language to urdu.
Change the following line in the html head