student student - 2 months ago 25
Javascript Question

Unable to render DevExtreme pie chart in jsFiddle

In my fiddle, I'm trying to replicate plotting a DevExpress's DevExtreme doughnut chart:



var dataSource = [{
region: "Asia",
val: 4119626293
}, {
region: "Africa",
val: 1012956064
}, {
region: "Northern America",
val: 344124520
}, {
region: "Latin America and the Caribbean",
val: 590946440
}, {
region: "Europe",
val: 727082222
}, {
region: "Oceania",
val: 35104756
}];

$("#container").dxPieChart({
dataSource: dataSource,
title: "The Population of Continents and Regions",
tooltip: {
enabled: true,
format: "millions",
percentPrecision: 2,
customizeTooltip: function(arg) {
return {
text: arg.valueText + " - " + arg.percentText
};
}
},
legend: {
horizontalAlignment: "right",
verticalAlignment: "top",
margin: 0
},
series: [{
type: "doughnut",
argumentField: "region",
label: {
visible: true,
format: "millions",
connector: {
visible: true
}
}
}]
});

#container {
height: 440px;
width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>





This official code is working in ChartJS's fiddle.

Since I'm not doing it in an ASP.NET MVC project,
chartjs
after the DevExpress MVC scripts shall not be an issue


What am I missing here?

Answer

Check the console - it isn't finding the .dxPieChart function because it can't load the 'insecure' chart.js script:

'Mixed Content: The page at 'https://jsfiddle.net/xameeramir/51h3bmgf/' was loaded over HTTPS, but requested an insecure script 'http://cdn3.devexpress.com/jslib/15.2.10/js/dx.chartjs.js'. This request has been blocked; the content must be served over HTTPS.'

Maybe you find a https CDN link for the library?

Comments