How to create a circular band using radial axis values in scatter polar chart using Plotly
1
I want to create a circular band inside a scatterpolar chart as follows:
For drawing band, I want to give two inputs: R_inner and R_outer values from radial axis so that I can modify band's thickness.
In the current image, I have plotted the band using marker with size. I have given the HTML,JS code as follows:
function getrandom(num, mul) {
var value =
for (i = 0; i <= num; i++) {
rand = Math.random() * mul;
value.push(rand);
}
return value;
};
function get_update_data() {
var data = [{
type: "scatterpolargl",
r: [50],
theta: [0],
mode: "markers",
name: "Wall Radius",
marker: {
color: "green",
size: 10,
line: {
color: "white"
},
opacity: 1
},
cliponaxis: false
},
{
type: "scatterpolargl",
r: [0],
theta: [0],
mode: "markers",
name: "Band",
marker: {
symbol: "circle-open",
color: "red",
"sizemode": "diameter",
size: 200,
line: {
width: 30
},
opacity: 0.3
},
cliponaxis: true
},
];
return data;
};
var layout = {
title: "",
font: {
size: 15
},
polar: {
bgcolor: "rgb(255, 255, 255)",
angularaxis: {
tickwidth: 2,
linewidth: 3,
color: "rgb(0,153,204)",
layer: "below traces"
},
radialaxis: {
side: "counterclockwise",
showline: false,
tickwidth: 0,
showgrid: true,
color: "rgb(0,153,204)",
ticks: "",
showticklabels: true,
}
},
paper_bgcolor: "rgb(255,255,255)",
autosize: false,
width: 400,
height: 400,
margin: {
l: 10,
r: 10,
b: 50,
t: 50,
pad: 4
},
};
function get_update_layout() {
return layout;
};
Plotly.newPlot('myDiv', get_update_data(), layout);<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv">
<!-- Plotly chart will be drawn inside this DIV -->
</div>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
</body>javascript css angularjs html5 plotly
edited Nov 16 at 6:45
Krupesh Kotecha
2,05011134
asked Nov 16 at 5:46
Uday
14517
add a comment |
1
I want to create a circular band inside a scatterpolar chart as follows:
For drawing band, I want to give two inputs: R_inner and R_outer values from radial axis so that I can modify band's thickness.
In the current image, I have plotted the band using marker with size. I have given the HTML,JS code as follows:
function getrandom(num, mul) {
var value =
for (i = 0; i <= num; i++) {
rand = Math.random() * mul;
value.push(rand);
}
return value;
};
function get_update_data() {
var data = [{
type: "scatterpolargl",
r: [50],
theta: [0],
mode: "markers",
name: "Wall Radius",
marker: {
color: "green",
size: 10,
line: {
color: "white"
},
opacity: 1
},
cliponaxis: false
},
{
type: "scatterpolargl",
r: [0],
theta: [0],
mode: "markers",
name: "Band",
marker: {
symbol: "circle-open",
color: "red",
"sizemode": "diameter",
size: 200,
line: {
width: 30
},
opacity: 0.3
},
cliponaxis: true
},
];
return data;
};
var layout = {
title: "",
font: {
size: 15
},
polar: {
bgcolor: "rgb(255, 255, 255)",
angularaxis: {
tickwidth: 2,
linewidth: 3,
color: "rgb(0,153,204)",
layer: "below traces"
},
radialaxis: {
side: "counterclockwise",
showline: false,
tickwidth: 0,
showgrid: true,
color: "rgb(0,153,204)",
ticks: "",
showticklabels: true,
}
},
paper_bgcolor: "rgb(255,255,255)",
autosize: false,
width: 400,
height: 400,
margin: {
l: 10,
r: 10,
b: 50,
t: 50,
pad: 4
},
};
function get_update_layout() {
return layout;
};
Plotly.newPlot('myDiv', get_update_data(), layout);<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv">
<!-- Plotly chart will be drawn inside this DIV -->
</div>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
</body>javascript css angularjs html5 plotly
edited Nov 16 at 6:45
Krupesh Kotecha
2,05011134
asked Nov 16 at 5:46
Uday
14517
The problem with the current approach is that the marker circle is not a perfect circle, Secondly we need to give the dimensions in pixels and lastly the scaling can be tricky.
– Uday
Nov 16 at 11:59
add a comment |
1
1
1
1
I want to create a circular band inside a scatterpolar chart as follows:
For drawing band, I want to give two inputs: R_inner and R_outer values from radial axis so that I can modify band's thickness.
In the current image, I have plotted the band using marker with size. I have given the HTML,JS code as follows:
function getrandom(num, mul) {
var value =
for (i = 0; i <= num; i++) {
rand = Math.random() * mul;
value.push(rand);
}
return value;
};
function get_update_data() {
var data = [{
type: "scatterpolargl",
r: [50],
theta: [0],
mode: "markers",
name: "Wall Radius",
marker: {
color: "green",
size: 10,
line: {
color: "white"
},
opacity: 1
},
cliponaxis: false
},
{
type: "scatterpolargl",
r: [0],
theta: [0],
mode: "markers",
name: "Band",
marker: {
symbol: "circle-open",
color: "red",
"sizemode": "diameter",
size: 200,
line: {
width: 30
},
opacity: 0.3
},
cliponaxis: true
},
];
return data;
};
var layout = {
title: "",
font: {
size: 15
},
polar: {
bgcolor: "rgb(255, 255, 255)",
angularaxis: {
tickwidth: 2,
linewidth: 3,
color: "rgb(0,153,204)",
layer: "below traces"
},
radialaxis: {
side: "counterclockwise",
showline: false,
tickwidth: 0,
showgrid: true,
color: "rgb(0,153,204)",
ticks: "",
showticklabels: true,
}
},
paper_bgcolor: "rgb(255,255,255)",
autosize: false,
width: 400,
height: 400,
margin: {
l: 10,
r: 10,
b: 50,
t: 50,
pad: 4
},
};
function get_update_layout() {
return layout;
};
Plotly.newPlot('myDiv', get_update_data(), layout);<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv">
<!-- Plotly chart will be drawn inside this DIV -->
</div>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
</body>javascript css angularjs html5 plotly
edited Nov 16 at 6:45
Krupesh Kotecha
2,05011134
asked Nov 16 at 5:46
Uday
14517
I want to create a circular band inside a scatterpolar chart as follows:
For drawing band, I want to give two inputs: R_inner and R_outer values from radial axis so that I can modify band's thickness.
In the current image, I have plotted the band using marker with size. I have given the HTML,JS code as follows:
function getrandom(num, mul) {
var value =
for (i = 0; i <= num; i++) {
rand = Math.random() * mul;
value.push(rand);
}
return value;
};
function get_update_data() {
var data = [{
type: "scatterpolargl",
r: [50],
theta: [0],
mode: "markers",
name: "Wall Radius",
marker: {
color: "green",
size: 10,
line: {
color: "white"
},
opacity: 1
},
cliponaxis: false
},
{
type: "scatterpolargl",
r: [0],
theta: [0],
mode: "markers",
name: "Band",
marker: {
symbol: "circle-open",
color: "red",
"sizemode": "diameter",
size: 200,
line: {
width: 30
},
opacity: 0.3
},
cliponaxis: true
},
];
return data;
};
var layout = {
title: "",
font: {
size: 15
},
polar: {
bgcolor: "rgb(255, 255, 255)",
angularaxis: {
tickwidth: 2,
linewidth: 3,
color: "rgb(0,153,204)",
layer: "below traces"
},
radialaxis: {
side: "counterclockwise",
showline: false,
tickwidth: 0,
showgrid: true,
color: "rgb(0,153,204)",
ticks: "",
showticklabels: true,
}
},
paper_bgcolor: "rgb(255,255,255)",
autosize: false,
width: 400,
height: 400,
margin: {
l: 10,
r: 10,
b: 50,
t: 50,
pad: 4
},
};
function get_update_layout() {
return layout;
};
Plotly.newPlot('myDiv', get_update_data(), layout);<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv">
<!-- Plotly chart will be drawn inside this DIV -->
</div>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
</body>function getrandom(num, mul) {
var value =
for (i = 0; i <= num; i++) {
rand = Math.random() * mul;
value.push(rand);
}
return value;
};
function get_update_data() {
var data = [{
type: "scatterpolargl",
r: [50],
theta: [0],
mode: "markers",
name: "Wall Radius",
marker: {
color: "green",
size: 10,
line: {
color: "white"
},
opacity: 1
},
cliponaxis: false
},
{
type: "scatterpolargl",
r: [0],
theta: [0],
mode: "markers",
name: "Band",
marker: {
symbol: "circle-open",
color: "red",
"sizemode": "diameter",
size: 200,
line: {
width: 30
},
opacity: 0.3
},
cliponaxis: true
},
];
return data;
};
var layout = {
title: "",
font: {
size: 15
},
polar: {
bgcolor: "rgb(255, 255, 255)",
angularaxis: {
tickwidth: 2,
linewidth: 3,
color: "rgb(0,153,204)",
layer: "below traces"
},
radialaxis: {
side: "counterclockwise",
showline: false,
tickwidth: 0,
showgrid: true,
color: "rgb(0,153,204)",
ticks: "",
showticklabels: true,
}
},
paper_bgcolor: "rgb(255,255,255)",
autosize: false,
width: 400,
height: 400,
margin: {
l: 10,
r: 10,
b: 50,
t: 50,
pad: 4
},
};
function get_update_layout() {
return layout;
};
Plotly.newPlot('myDiv', get_update_data(), layout);<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv">
<!-- Plotly chart will be drawn inside this DIV -->
</div>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
</body>function getrandom(num, mul) {
var value =
for (i = 0; i <= num; i++) {
rand = Math.random() * mul;
value.push(rand);
}
return value;
};
function get_update_data() {
var data = [{
type: "scatterpolargl",
r: [50],
theta: [0],
mode: "markers",
name: "Wall Radius",
marker: {
color: "green",
size: 10,
line: {
color: "white"
},
opacity: 1
},
cliponaxis: false
},
{
type: "scatterpolargl",
r: [0],
theta: [0],
mode: "markers",
name: "Band",
marker: {
symbol: "circle-open",
color: "red",
"sizemode": "diameter",
size: 200,
line: {
width: 30
},
opacity: 0.3
},
cliponaxis: true
},
];
return data;
};
var layout = {
title: "",
font: {
size: 15
},
polar: {
bgcolor: "rgb(255, 255, 255)",
angularaxis: {
tickwidth: 2,
linewidth: 3,
color: "rgb(0,153,204)",
layer: "below traces"
},
radialaxis: {
side: "counterclockwise",
showline: false,
tickwidth: 0,
showgrid: true,
color: "rgb(0,153,204)",
ticks: "",
showticklabels: true,
}
},
paper_bgcolor: "rgb(255,255,255)",
autosize: false,
width: 400,
height: 400,
margin: {
l: 10,
r: 10,
b: 50,
t: 50,
pad: 4
},
};
function get_update_layout() {
return layout;
};
Plotly.newPlot('myDiv', get_update_data(), layout);<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv">
<!-- Plotly chart will be drawn inside this DIV -->
</div>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
</body>javascript css angularjs html5 plotly
javascript css angularjs html5 plotly
edited Nov 16 at 6:45
Krupesh Kotecha
2,05011134
asked Nov 16 at 5:46
Uday
14517
edited Nov 16 at 6:45
Krupesh Kotecha
2,05011134
asked Nov 16 at 5:46
Uday
14517
edited Nov 16 at 6:45
Krupesh Kotecha
2,05011134
edited Nov 16 at 6:45
Krupesh Kotecha
2,05011134
edited Nov 16 at 6:45
Krupesh Kotecha
2,05011134
2,05011134
asked Nov 16 at 5:46
Uday
14517
asked Nov 16 at 5:46
Uday
14517
asked Nov 16 at 5:46
Uday
14517
14517
The problem with the current approach is that the marker circle is not a perfect circle, Secondly we need to give the dimensions in pixels and lastly the scaling can be tricky.
– Uday
Nov 16 at 11:59
add a comment |
The problem with the current approach is that the marker circle is not a perfect circle, Secondly we need to give the dimensions in pixels and lastly the scaling can be tricky.
– Uday
Nov 16 at 11:59
The problem with the current approach is that the marker circle is not a perfect circle, Secondly we need to give the dimensions in pixels and lastly the scaling can be tricky.
– Uday
Nov 16 at 11:59
The problem with the current approach is that the marker circle is not a perfect circle, Secondly we need to give the dimensions in pixels and lastly the scaling can be tricky.
– Uday
Nov 16 at 11:59
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53332108%2fhow-to-create-a-circular-band-using-radial-axis-values-in-scatter-polar-chart-us%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53332108%2fhow-to-create-a-circular-band-using-radial-axis-values-in-scatter-polar-chart-us%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The problem with the current approach is that the marker circle is not a perfect circle, Secondly we need to give the dimensions in pixels and lastly the scaling can be tricky.
– Uday
Nov 16 at 11:59