Polar Chart

[email2rajivsingh@gmail.comParticipant]

Hi,

How can I remove the values displayed on category axis (1-100)? please suggest

var sampleData = [
{ID: 1,Salient: 151,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 2,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 3,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 4,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 5,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 6,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 7,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 8,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 9,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 10,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 11,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 12,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 13,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 14,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 15,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 16,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 17,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 18,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 19,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 20,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 21,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 22,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 23,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 24,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 25,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 26,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 27,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 28,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 29,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 30,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 31,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 32,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 33,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 34,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 35,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 36,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 37,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 38,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 39,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 40,Salient: 151,Different: 0,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 41,Salient: 151,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 42,Salient: 0,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 43,Salient: 0,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 44,Salient: 0,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 45,Salient: 0,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 46,Salient: 0,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 47,Salient: 0,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 48,Salient: 0,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 49,Salient: 0,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 50,Salient: 0,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 51,Salient: 0,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 52,Salient: 0,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 53,Salient: 0,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 54,Salient: 0,Different: 92,Meaningful: 0,Power: 24.9,Index: 100},
{ID: 55,Salient: 0,Different: 92,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 56,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 57,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 58,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 59,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 60,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 61,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 62,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 63,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 64,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 65,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 66,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 67,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 68,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 69,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 70,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 71,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 72,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 73,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 74,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 75,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 76,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 77,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 78,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 79,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 80,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 81,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 82,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 83,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 84,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 85,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 86,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 87,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 88,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 89,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 90,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 91,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 92,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 93,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 94,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 95,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 96,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 97,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 98,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 99,Salient: 0,Different: 0,Meaningful: 124,Power: 24.9,Index: 100},
{ID: 100,Salient: 151,Different: 0,Meaningful: 124,Power: 24.9,Index: 100}
];
var settings = {
title: “”,
description: “”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 5 },
source: sampleData,
categoryAxis:
{
dataField: ‘ID’,
unitInterval: 1,
minValue: 1,
maxValue: 100,
valuesOnTicks: false,
displayValueAxis: false,
showTickMarks: false,
showGridLines: false,
gridLinesColor:’#FFFFF’
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
polar: true,
startAngle: 285,
radius: 180,
showLabels: false,
type: ‘splinearea’,

valueAxis:
{
description: ‘Index Value’,
showGridLines: false,
showTickMarks: false,
showLabels: false,
displayValueAxis: false,
formatSettings: { decimalPlaces: 0 }
},
series: [
{ dataField: ‘Power’, displayText: ‘Power’, opacity: 1, lineWidth: 1, radius: 2, lineWidth: 2 },
{ dataField: ‘Index’, displayText: ‘Index’,fillColor:’#FFFFFF’, opacity: 0.2, lineWidth: 2, radius: 1, lineColor:’#eeeeee’,lineWidth: 2 },
{ dataField: ‘Salient’, displayText: ‘Salient’, color:’#054498′,opacity: 1, lineWidth: 1, radius: 2, lineWidth: 2 },
{ dataField: ‘Different’, displayText: ‘Different’, color:’#9e052e’,opacity: 1, lineWidth: 1, radius: 2, lineWidth: 2 },
{ dataField: ‘Meaningful’, displayText: ‘Meaningful’, color:’#83ba11′,opacity: 1, lineWidth: 1, radius: 2, lineWidth: 2 }

]
}
]
};
$(‘#jqxChart’).jqxChart(settings);

[DimitarParticipant]

Hello email2rajivsingh@gmail.com,

Please modify your categoryAxis property as follows:

categoryAxis:
{
dataField: ‘ID’,
unitInterval: 1,
minValue: 1,
maxValue: 100,
valuesOnTicks: false,
displayValueAxis: false,
showTickMarks: false,
showGridLines: false,
gridLinesColor:’#FFFFF’,
formatFunction: function () {
    return '';
}
},

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[email2rajivsingh@gmail.comParticipant]

Hi Dimitar,

Thank you sooo much!!
One more help required, the edges are not round and at intersections, you’ll notice extreme jagged edges. Any idea how to make them round?

Thanks!

Cheers,
Rajiv

[DimitarParticipant]

Hi Rajiv,

This can be due to using older browsers (such as Internet Explorer 8), which utilize a different render engine. Please try running your example in Google Chrome. Do you experience the same issue?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts