Javascript Plotly box plot issue - javascript

I want to display a box plot using Plotly Javascript library.
I set the type of chart box but it shows a line.
var data = [
{
y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
boxpoints: 'all',
jitter: 0.3,
pointpos: -1.8,
type: 'box'
}
];
Plotly.newPlot('myDiv', data);
JSFiddle

Box plots are not part of the basic plotlyjs bundle.
You'll need to upgrade to plotlyjs advanced.

Related

How to remove border of a trace in plotlyjs box plot without removing line representing median?

Box plot
I am trying to remove border from the trace
I used this code to remove border line but it removes the line as well which represents median and I don't want that-
var trace1 = {
x: [1, 2, 3, 4, 4, 4, 8, 9, 10],
type: 'box',
name: 'Set 1',
line: {
width: 0
}
};
var trace2 = {
x: [2, 3, 3, 3, 3, 5, 6, 6, 7],
type: 'box',
name: 'Set 2',
line: {
width: 0
}
};
var data = [trace1, trace2];
var layout = {
title: 'Horizontal Box Plot'
};
Plotly.newPlot('myDiv', data, layout);
Box plot after I set line-width to 0
In addition I also want to know how to thicken line for median, I have tried eveything mentioned in their documentation but nothing is working as I expected.

Pie of a Pie chart in HighCharts

I have a question regarding to Highcharts option for plotting a "pie-of-a-pie" chart. I need to show something similar to the one: https://www.amcharts.com/demos/pie-of-a-pie/?theme=material Can i do the same thing in Highcharts? If yes please do help.
If not possible in High Charts, can you please help in amcharts only?
Yes, you can achieve that result in Highcharts. You can use two pie series and update one of them in series.point.events.click funtion. For example:
series: [{
data: [{
y: 1,
details: [1, 3, 2]
}, {
y: 2,
details: [4, 31, 2]
}, {
y: 3,
details: [14, 3, 2]
}],
point: {
events: {
click: function() {
var series = this.series.chart.series;
series[1].setData(this.details.slice());
}
}
},
center: [200, 100],
size: 200
}, {
size: 100,
center: [500, 100],
data: []
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4996/
API Reference:
https://api.highcharts.com/highcharts/series.pie.size
https://api.highcharts.com/highcharts/series.pie.center
https://api.highcharts.com/highcharts/series.pie.point.events.click
https://api.highcharts.com/class-reference/Highcharts.Series#setData

Is there any way to plot a just a static image on a webpage with plotly js api?

Hey so I am developing an app that will display certain plots based on csv data and am using the plotly js api. I have found that when a user tries to create a scatter plot with a ton of points (greater than 1000 or so) it really slows down the user's browser. So I want to generate a static plot if the data that they supply exceeds a certain threshold of points.
The problem is that I am not sure how to generate a static plot without first rendering an interactive plot.
I have tried to modify the example given on the plotly js api, but have not been able to figure it out.
Here is the code:
Javascript (CDN Included in the Pen)
function plot() {
var d3 = Plotly.d3;
var img_jpg = d3.select("#jpg-export");
// Ploting the Graph
var trace = {
x: [3, 9, 8, 10, 4, 6, 5],
y: [5, 7, 6, 7, 8, 9, 8],
type: "scatter"
};
var trace1 = {
x: [3, 4, 1, 6, 8, 9, 5],
y: [4, 2, 5, 2, 1, 7, 3],
type: "scatter"
};
var data = [trace, trace1];
var layout = { title: "Simple Javascript Graph" };
Plotly.plot("plotly_div", data, layout)
// static image in jpg format
.then(function(gd) {
Plotly.toImage(gd, { height: 300, width: 300 }).then(function(url) {
img_jpg.attr("src", url);
return Plotly.toImage(gd, { format: "jpeg", height: 400, width: 400 });
});
});
}
HTML
<h1>Interactive Plot</h1>
<div id="plotly_div" />
<h1>Static Plot</h1>
<img id="jpg-export"></img>
<button onclick="plot()">Run the function</button>
Thanks!
I think you can add that as a config :
Plotly.newPlot('myDiv', data, layout, {staticPlot: true});

Is it possible to overlay a marker on top of a plotly.js box plot?

Suppose I'm using the simple box plot example in plotly's documentation:
var data = [
{
y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
boxpoints: 'all',
jitter: 0.3,
pointpos: -1.8,
type: 'box'
}
];
Plotly.newPlot('myDiv', data);
I want to overlay a marker on top of the underlying data scatter plot that's to the left of the box plot. This marker would have its own hover text and everything. This is how I envision this looking:
Is there a way to do this in plotly? I've looked all over for an example of this, and I can't find anything that looks relevant. Thanks!
If you are plotting your points on top of the box plot (pointpos = 0) you can add another trace with an x value which is identical to your boxplot name, trace 0 in this case.
If you are plotting your points next to your boxplot, it becomes a lot more tricky because the scatter points do not have defined x-values on the axis.
You could your new point manually but then the hover info is still in the old position.
var data = [{
y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
boxpoints: 'all',
jitter: 0.3,
pointpos: 0,
type: 'box'
},
{
y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
boxpoints: 'all',
jitter: 0.3,
pointpos: 1.8,
type: 'box'
},
{
x: ['trace 0'],
y: [18],
name: 'My special marker',
text: 'Some really interesting hover info',
marker: {
size: 20
}
},
{
x: ['trace 1'],
y: [18],
name: 'Another special marker',
text: 'Some really interesting hover info',
marker: {
size: 20
}
}
];
Plotly.newPlot('myDiv', data);
var boxPoint = document.getElementsByClassName('trace boxes')[1].getElementsByClassName('point')[0];
var point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('point')[1];
var y = point.attributes['transform'].value.split(',')[1];
var x = boxPoint.attributes['transform'].value.split(',')[0];
point.setAttribute('transform', x + ', ' + y);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

Jqplot situation with the last bar in the graph

Situation
I'm trying to have some space over the last xaxis options.
For example:
xaxis. min:-max:6
Only half of the last bar is shown, and if I try to use tickOption, it doesn't appear because it is outside of the canvas.
code:
http://jsfiddle.net/chalien/zEQe7/
THANKS
Your array isn't set right for the bar chart. You don't need to tell the plot rendered it is point number 1, 2, 3, etc... It knows it by himself.
Just change the array definition to:
[[4, 6, 2, 5, 6]]
And your graph will be rendered correctly, with or without the min and max definitions.
Here is the full code:
<script type="text/javascript">
$.jqplot('chart2', [[4, 6, 2, 5, 6]],
{ title:'Exponential Line',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true
}
},
axes: {
xaxis: {
max:6,
min:0,
renderer: $.jqplot.LinearAxisRenderer
}
}
});
</script>

Categories