How to show a range at cicumference of donut?

[yvgamuParticipant]

I have to show a range 0 to 100 at circumference of half donut.How can I achieve it?

var DTO = [
{ “Fuel”: “diesel”, “Per”: 10 },
{ “Fuel”: “petrol”, “Per”: 10 },
{ “Fuel”: “Gas”, “Per”: 10 }

]

//prepare chart data as an array
var source =
{
datatype: “json”,
datafields: [
{ name: ‘Fuel’ },
{ name: ‘Per’}

],

localdata: DTO,

};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.localdata + ‘” : ‘ + error); } });

// prepare jqxChart settings
var settings = {
title: “MeterComms Health”,
description: “Data”,
enableAnimations: true,
showLegend: true,
showBorderLine: true,
legendPosition: { left: 520, top: 140, width: 100, height: 100 },
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
colorScheme: ‘scheme02’,
seriesGroups:
[
{
type: ‘donut’,
showLabels: true,
series:
[
{

dataField: ‘Per’, displayText: ‘Fuel’ ,

labelRadius: 120,
initialAngle: 0,
startAngle:0,
endAngle: 180,
radius: 170,
innerRadius: 90,
centerOffset: 0,
formatSettings: { decimalPlaces: 0 }
}
]
}
]
};

[DimitarParticipant]

Hello yvgamu,

Half donuts can be plotted in a similar manner to the half pies shown in the demo Partial Pie Series. These types of chart are suitable for displaying slices (series). Please clarify what you mean by showing a range from 0 to 100. Maybe the jqxGauge widget is more suitable for your needs?

Best Regards,
Dimitar

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

[yvgamuParticipant]

Hi Dimitar

Please see the image shared through link for required chart.
https://drive.google.com/open?id=0B02Hy1q84ylbazZ6eXNIV0RFSnM&authuser=0

[DimitarParticipant]

Hi yvgamu,

We do not have permission to access your image. Please upload it to a public image-sharing website.

Best Regards,
Dimitar

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

[Author]

Posts