Develop Reference

Plotly: How to display a bar chart over a scatter plot?

I'm using plotly.js to do some data visualization. I need to display an opaque filled-area scatter plot behind a bar chart - something like this - but no matter how much I play with the bar chart's opacity or the order of my data array, the filled-area plot is placed on top of the bar chart.
This is what my code looks like:
<script>
var trace2 = {
x: [1, 2, 3, 4, 5],
y: [120, 180, 290, 150, 110],
name: 'Type 1',
type: 'bar'
};
var trace5 = {
x: [1, 2, 3, 4, 5],
y: [75, 48, 38, 61, 52],
name: 'Type 2',
fill: 'tozeroy',
fillcolor: 'rgb(235, 185, 10)',
type: 'scatter',
mode: 'none'
};
var data1 = [trace5, trace2];
var layout = {
xaxis: {
showdividers: true,
dividercolor: 'grey',
dividerwidth: 2
},
yaxis: {title: '<b>Data</b>', side: 'right'}
};
Plotly.newPlot('myDiv', data1, layout);
</script>

How to add a name or label to shapes in plotly?

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.

Javascript library for multiple factor legend plot

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>

is it possible to add a legend for bubble size in high charts?

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();
}
}

how to adjust the tickposition or 'x' axis on areapline highchart

The situation with my char is that currently the tick marks are positioned according to my "tickposition" paramenter, they displayed what I want but the problem is that for example the tick mark on '50' should be right on the middle of the chart, below the 50% bubble. So my chart looks off center.
I am not sure if the type of chart I am using is the correct one or how to approach this problem. I am super new on Highcharts.
Here is what I have:
http://jsfiddle.net/cjwh/hu1t8159/15/
$(function () {
$('#container').highcharts({
xAxis: {
tickPositions: [250, 500, 750, 1000],
min: 0,
max: 900,
labels: {
formatter: function() {
return this.value / 10;
}
},
},
yAxis: {
min: 0,
allowDecimals: false,
floor : 0,
ceiling: 200,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
text: null
}
},
chart: {
events: {
redraw: function () {
var chart = this,
point = chart.series[1].points[0];
if(chart.customLabel) {
chart.customLabel.attr({
x: point.plotX + chart.plotLeft - 25,
y: point.plotY + chart.plotTop - 65,
anchorX: point.plotX + chart.plotLeft,
anchorY: point.plotY + chart.plotTop
});
}
}
}
},
legend: {
enabled: false
},
series: [{
type: 'areaspline',
marker: {
enabled: false
},
data: [
[0, 1],
[210, 1],
[225, 2],
[372,108],
[378,112],
[387, 118],
[396, 122],
[403, 125],
[433, 130],
[450, 129],
[460, 126],
[472, 122],
[479, 118],
[486, 114],
[495,108],
[502,102],
[504,100],
[510, 94],
[514, 89],
[518, 85],
[522, 81],
[526, 76],
[529, 72],
[534, 67],
[541, 59],
[548, 51],
[556, 43],
[566, 34],
[583, 22],
[593, 17],
[612, 9],
[621, 6],
[626, 5],
[635, 3],
[642, 2],
[651, 1],
[870, 1],
[1000, 1]
],
zoneAxis: 'x',
zones: [{
value: 430,
color: '#18d1ba'
}, {
color: '#74e3d6'
}]
}, {
type: 'scatter',
data: [
[430, 130]
],
marker: {
radius: 8,
symbol: 'circle',
fillColor: '#fff',
lineColor: '#09f',
lineWidth: 3
}
}]
}, function (chart) { // on complete
var point = chart.series[1].points[0];
chart.customLabel = chart.renderer.label('50%', point.plotX + chart.plotLeft - 25, point.plotY + chart.plotTop - 65, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
.css({
color: '#09f',
fontSize: '18px'
})
.attr({
'stroke-width': 3,
stroke: '#09f',
fill: '#fff',
padding: 8,
r: 5,
zIndex: 6
})
.add();
});
});
This is a picture of the desired chart, please note the position of the 'x' positions or tickmarks.
http://claudiawong.ca/test/example.png
Would anyone happen to give me an example of what to change, ideally an example on the form of a jsfiddle would be really helpful.
Thanks!!!!

To expand on my comment:
1) You know, in your example, that 50% is 430. You can determine from that what 25, 75, and 100% are.
2) You can set the values of those percentages as your tickPositions array.
3) You will need to map the values to the % that you want to display in your labels
A very quick and dirty example:
var x100 = 860;
var x75 = (x100 * .75);
var x50 = (x100 * .5 );
var x25 = (x100 * .25);
var vals = {};
vals[x100] = '100';
vals[x75 ] = '75';
vals[x50 ] = '50';
vals[x25 ] = '25';
You can then use this object in your label formatter to display the correct value.
Example:http://jsfiddle.net/hu1t8159/18/