I am trying to generate a responsive dojocharts for mobile and tablets.
Here I had already trying though media queries through CSS. but its not working properly.
So anyone please suggest me how can I make my dojo chart responsive.
Below is my example for dojo responsive chart.but not working.
<script>
require(["dojox/charting/Chart",
"dojox/charting/plot2d/Pie",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/MoveSlice",
"dojo/fx/easing",
"dojox/charting/action2d/Tooltip",
"dojox/charting/themes/MiamiNice",
"dojox/charting/widget/Legend",
"dojo/ready"
],
function(Chart, Pie, Highlight, MoveSlice, easing, Tooltip, MiamiNice, Legend, ready) {
ready(function() {
var chartTwo = new Chart("chartTwo");
chartTwo.setTheme(MiamiNice)
.addPlot("default", {
type: Pie,
font: "normal normal 11pt Tahoma",
fontColor: "black",
animate: {
duration: 1000,
easing: easing.cubicIn
},
labelOffset: -30,
radius: 150
}).addSeries("Series A", [{
"y": 101,
67,
"text": "INDIA",
"tooltip": "INDIA"
}, {
"y": 339.86,
"text": "USA",
"tooltip": "USA"
}, {
"y": 329.73,
"text": "UK",
"tooltip": "UK"
}, {
"y": 953.96,
"text": "UAE",
"tooltip": "UAE"
}]);
var anim_a = new MoveSlice(chartTwo, "default");
var anim_b = new Highlight(chartTwo, "default");
var anim_c = new Tooltip(chartTwo, "default");
chartTwo.render();
var legendTwo = new Legend({
chart: chartTwo
}, "legendTwo");
});
});
</script>
<body class="claro">
<div id="chartTwo" style="width: 600px; height: 350px;"></div>
<div id="legendTwo"></div>
So kindly request to everbody and also dojo community please suggest for this question for responsive dojocharts.
