I am trying to draw a plot with multiple factors. I hope these different factors are distinguished by color, size, and shape of the scatter. An example of this kind of plot is here https://github.com/slfan2013/tempPlot/blob/master/Rplot.png.
I'd like to use a javascript library to draw a similar plot. I usually use plotly.js to draw plots. But I think plotly can only handle one factor at a time (different colors). My question is can plotly handle multiple (nested) factors in one single plot (like color, size, and shape)? If not, if there is any javascript library can achieve these? How about CanvasJS?
#### EDIT.
I understand how to draw scatter with different color and different size (shape, etc) on the same plot. I just would like to have a multiple-factor legend on the plot, so that if I click "red", for example, then the red scatters would hide no matter what size it is AND if I click size "big", big scatters would hide no matter what color it is.
Thanks!
This can be done in CanvasJS using scatter chart and by controlling markerType and markerSize. Check the example shown below.
Refer these pages for markerType and markerSize.
http://canvasjs.com/docs/charts/chart-options/data/markertype/
http://canvasjs.com/docs/charts/chart-options/data/markersize/
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Scatter Chart with Different Marker Types"
},
legend: {
horizontalAlign: "right",
verticalAlign: "center"
},
data: [
{
type: "scatter",
showInLegend: true,
legendText: "Circle",
dataPoints: [
{ x: 1, y: 91, markerSize: 10 },
{ x: 2, y: 75, markerSize: 20 },
{ x: 3, y: 70, markerSize: 30 },
{ x: 4, y: 85, markerSize: 40 },
{ x: 5, y: 75, markerSize: 50 }
]
},
{
type: "scatter",
markerType: "square", //default "circle"
showInLegend: true,
legendText: "Square",
dataPoints: [
{ x: 1, y: 71, markerSize: 10 },
{ x: 2, y: 55, markerSize: 20 },
{ x: 3, y: 50, markerSize: 30 },
{ x: 4, y: 65, markerSize: 40 },
{ x: 5, y: 55, markerSize: 50 }
]
},
{
type: "scatter",
markerType: "triangle",
showInLegend: true,
legendText: "Triangle",
dataPoints: [
{ x: 1, y: 51, markerSize: 10 },
{ x: 2, y: 35, markerSize: 20 },
{ x: 3, y: 30, markerSize: 30 },
{ x: 4, y: 45, markerSize: 40 },
{ x: 5, y: 35, markerSize: 50 }
]
},
{
type: "scatter",
markerType: "cross",
showInLegend: true,
legendText: "Cross",
dataPoints: [
{ x: 1, y: 31, markerSize: 10 },
{ x: 2, y: 15, markerSize: 20 },
{ x: 3, y: 10, markerSize: 30 },
{ x: 4, y: 25, markerSize: 40 },
{ x: 5, y: 15, markerSize: 50 }
]
}
]
});
chart.render();
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
You would just need to define multiple traces and set the parameters for each trace individually.
trace0 is just the default settings
trace1 has a custom color
trace2 has a custom color and custom size
trace3 has a custom color, custom size and custom symbol
var trace0 = {
x: [1, 2, 3],
y: [1, 2, 3],
type: 'scatter',
mode:'markers'};
var trace1 = {
x: [1, 2, 3],
y: [2, 1.8, 1],
type: 'scatter',
mode:'markers',
marker: {
color: 'red'
}};
var trace2 = {
x: [1, 2, 3],
y: [2.8, 2.3, 1.2],
type: 'scatter',
mode:'markers',
marker: {
color: 'green',
size: [10, 15, 20]
}};
var trace3 = {
x: [1, 2, 3],
y: [3, 2.5, 1],
type: 'scatter',
mode:'markers',
marker: {
color: 'pink',
size: [10, 15, 20],
symbol: 303
}};
Plotly.plot('myDiv', [trace0, trace1, trace2, trace3])
<div id='myDiv'></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
Related
I'm using react-chartjs-2 to draw a line chart but when I use the following code
const data = {
labels: [0, 11, 21, 31, 41, 50],
datasets: [
{
label: 'Radiant',
data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
x: e,
y: Math.round(50 + Math.random() * 30),
})),
fill: false,
borderColor: 'green',
backgroundColor: 'green',
},
{
label: 'Dire',
data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
x: e,
y: Math.round(50 + Math.random() * 30),
})),
fill: false,
borderColor: 'red',
backgroundColor: 'red',
},
],
};
my last point gets shown twice.
When I modify my labels to be 0, 10, 20, etc. it gets even crazier and I get the following result.
I fixed it by setting the type to be linear in xAxes:
scales: {
xAxes: [
{
type: 'linear',
},
],
},
I want to create a dumbbell chart using highcharts.
I used x-range chart for this
here is the link: https://jsfiddle.net/thushara07/nLkxa0wr/15/
series: [{
// name: 'Project 3',
// pointPadding: 0,
// groupPadding: 0,
//borderColor: 'gray',
pointWidth: 5,
data: [{
x: 32,
x2: 33,
y: 0,
// partialFill: 0.25
}, {
x: 44,
x2:45,
y: 1
}, {
x:30,
x2: 32,
y: 2
}],
dataLabels: {
align: 'left',
enabled: true
}
}]
expected output: I want to show markers for each line created as shown
(https://images.app.goo.gl/LAKQBdsaKBH2hjS59
)
It can be done by adding additional scatter series that is linked to x-range:
Code:
Highcharts.chart('container', {
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
type: 'xrange',
pointWidth: 5,
id: 'main',
data: [{
x: 32,
x2: 33,
y: 0
}, {
x: 44,
x2: 45,
y: 1
}, {
x: 30,
x2: 32,
y: 2
}],
dataLabels: {
align: 'center',
enabled: true
}
}, {
type: 'scatter',
linkedTo: 'main',
marker: {
radius: 5
},
data: [{
x: 32,
y: 0,
color: 'red'
}, {
x: 33,
y: 0,
color: 'grey'
}, {
x: 44,
y: 1,
color: 'red'
}, {
x: 45,
y: 1,
color: 'grey'
}, {
x: 30,
y: 2,
color: 'red'
}, {
x: 32,
y: 2,
color: 'grey'
}]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/4qj89cog/
API reference:
https://api.highcharts.com/highcharts/series.scatter
https://api.highcharts.com/highcharts/series.scatter.linkedTo
I have created a simple plotly line graph as follows:
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
xaxis:{
title:"x-axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
range:[0,20],
autorange: false
},
shapes: [
{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold1,
x1: 1,
y1: threshold1,
line:{
color: 'rgb(255, 0, 0)',
width: 2,
dash:'dot'
},
},
{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold2,
x1: 1,
y1: threshold2,
line:{
color: 'rgb(0, 255, 0)',
width: 2,
dash:'dot'
},
}
]
};
Plotly.newPlot(myDiv,[trace1],layout);
Now, I want to add a name or label to the threshold1 and threshold2 that I have created in 'shapes' under 'layout'. I searched the plotly JS documentation but did'nt get anything useful there. How can I do this. Any help would be appreciated.
You could create another trace with mode: 'text'. There is certainly more than one way of doing it but this one is simple and does not need complicated data replication.
var threshold1 = 12;
var threshold2 = 16;
var offset = 0.75;
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var trace2 = {
x: [Math.min.apply(Math, trace1.x) + offset,
Math.max.apply(Math, trace1.x) - offset],
y: [threshold1 - offset, threshold2 - offset],
mode: 'text',
text: ['lower threshold', 'upper threshold'],
showlegend: false
}
var layout = {
xaxis: {
title: "x-axis",
tickangle: 45,
rangemode: 'nonnegative',
autorange: true,
exponentformat: "none"
},
yaxis: {
title: "Time",
tickangle: 45,
rangemode: 'nonnegative',
range: [0, 20],
autorange: false
},
shapes: [{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold1,
x1: 1,
y1: threshold1,
line: {
color: 'rgb(255, 0, 0)',
width: 2,
dash: 'dot'
},
}, {
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold2,
x1: 1,
y1: threshold2,
line: {
color: 'rgb(0, 255, 0)',
width: 2,
dash: 'dot'
},
}]
};
Plotly.newPlot(myDiv, [trace1, trace2], layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>
You can use annotations:
layout.annotations = [
{
showarrow: false,
text: "Your text here",
align: "right",
x: 1,
xanchor: "right",
y: threshold1,
yanchor: "bottom"
},
{
showarrow: false,
text: "Your second text here",
align: "right",
x: 1,
xanchor: "right",
y: threshold2,
yanchor: "bottom"
}
],
Add just name property to your trace like
name = 'Xyz'
This Link might help you to fix it out.
I am creating a simple line graph using plotly JS. The code is something like below:
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
xaxis:{
title:"X-Axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
autorange:false
}
}
Plotly.newPlot(myDiv,[trace1],layout);
Now I want to create a horizontal line across the graph, parallel to x-axis which I want to span the entire graph. For this I added 'shapes' in layout something like below:
var layout = {
xaxis:{
title:"X_Axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
autorange:false
},
shapes: [
{
type: 'line',
x0: 2,
y0: 12.0,
x1: 3,
y1: 12.0,
line:{
color: 'rgb(255, 0, 0)',
width: 4,
dash:'dot'
}
}
]
};
Adding the 'shapes' parameter creates a horizontal value only between point 2 and 3 on the x-axes which I have specified .
My question is how to get the horizontal line span the entire graph without depending on x-axis value? Any help will be appreciated.
You could set xref to paper which tells Plotly not to rely on the x-axis coordinates but relative to the whole graph, i.e. 0 to 1.
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
shapes: [
{
type: 'line',
xref: 'paper',
x0: 0,
y0: 12.0,
x1: 1,
y1: 12.0,
line:{
color: 'rgb(255, 0, 0)',
width: 4,
dash:'dot'
}
}
]
}
Plotly.newPlot(myDiv,[trace1],layout);
<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>
I'm using the latest version of high charts. I successfully created a 3d bubble chart following http://www.highcharts.com/demo/bubble-3d
I am wondering if I can add to the legend a reference to what the size of the bubble means. Just a simple bubble with some text next to it would be enough.
Thanks in advance for your help.
Just add an empty series and name it.Give it desired name ,See Updated fiddle here
{
name :"description",
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
]
}
}}
Representing bubble size in a legend is not currently a feature of Highcharts.
You can draw one manually:
Add a series for the legend
Draw a rendered box around the legend
JSFiddle
Add a series for the legend
series: [{
// This series gives a legend for reference
data: [{
color: Highcharts.getOptions().colors[0],
x: 86,
y: 25,
z: 10,
dataLabels: {
format: '10%',
y: 40
}
}, {
x: 90,
y: 25,
z: 15,
dataLabels: {
format: '15%',
y: 40
}
}, {
x: 94,
y: 25,
z: 35,
dataLabels: {
format: '35%',
y: 40
}
}]
}, {
color: Highcharts.getOptions().colors[0],
data: [{
x: 95,
y: 95,
z: 13.8,
name: 'BE',
country: 'Belgium'
}, {
Draw a rendered box around the legend
events: {
load: function() {
// Draw the flow chart
var ren = this.renderer,
colors = Highcharts.getOptions().colors;
// Script label
ren.label('Obesity Rate', 410, 220)
.attr({
stroke: '#777',
'stroke-width': 1,
padding: 5,
r: 5,
width: 168,
height: 73
})
.css({
color: '#333',
textAlign: 'center',
fontSize: '1.1em'
})
.add();
}
}