In this boxplot generated by plotly.js, after selecting points, the non-selected points get an opacity of 0.2.
Is it possible to change the styling of selected and non-selected points ?
var trace1 = {
y: [0, 1, 2, 3, 4, 5, 6],
type: 'box',
selectedpoints : [1,2,5],
boxpoints: 'all'
};
var data = [trace1];
var layout = {};
Plotly.newPlot('myDiv', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
If you look at the reference, you can see that there are properties for "selected" and "unselected" markers which allows you to change their styling:
var trace1 = {
y: [0, 1, 2, 3, 4, 5, 6],
type: 'box',
selectedpoints: [1, 2, 5],
boxpoints: 'all',
selected: {
marker: {
color: '#ff0000',
opacity: 0.8
}
},
unselected: {
marker: {
color: '#00ff00',
opacity: 0.5
}
}
};
var data = [trace1];
var layout = {};
Plotly.newPlot('myDiv', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
Related
I'm trying to create a line chart with markers for about 30 data points using Plotly. For some reason Plotly decides to hide the markers when the data points goes above a certain threshold such as 15. There is no reason to hide them as there is more than adequate space available. See below:
var trace1 = {
x: [1, 2, 3, 4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
y: [1, 2, 3, 4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
type: 'line',
marker: {
size: 10,
},
};
var data = [trace1];
Plotly.newPlot('myDiv', data);
https://codepen.io/ceds/pen/OJMOjjB
Any idea how to disable this?
I am not getting the exact problem why its not showing when more than 15 data points, But i have a solution using mode: 'lines+markers' property for marker and lines, as below,
var trace1 = {
x: [1, 2, 3, 4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
y: [1, 2, 3, 4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
type: 'line',
mode: 'lines+markers',
marker: {
size: 10,
},
};
var data = [trace1];
Plotly.newPlot('myDiv', data);
<head>
<!-- Load plotly.js into the DOM -->
<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>
</body>
Hope this help.
I am new to coding and am trying to make a barchart with eCharts. I have made a simple bar chart example but now I want to make a thick outline for the bars on the chart. This is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts-en.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'ECharts entry example'
},
tooltip: {},
legend: {
data:['Sales']
},
xAxis: {
data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
</body>
</html>
How do I add a thick black outline on the bars?
You can use the option barBorderColor and barBorderWidth to set the color and width of the border respectively for each bar.
Below is an example based on your existing code.
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'ECharts entry example'
},
tooltip: {},
legend: {
data: ['Sales']
},
xAxis: {
data: ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
//Added item style
itemStyle: {
normal: {
barBorderWidth: 5,
barBorderColor: "#000"
}
}
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts-en.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
I have an implementation of a Highstock graph where the chart is narrowed in width in order to fit two of them side by side. A consequence of this seems to be some data bleeding over from the left graph to the right. Even when there is only one graph narrowed in width by itself it seems to still happen.
The data that bleeds over cannot be seen unless you hover over it. The halo and tooltip appear for the data point despite being outside of the selected range in the navigator.
Hovering over a point outside of the graph
JSFiddle: http://jsfiddle.net/7dk6g6rh/
var stockChart = Highcharts.stockChart('container', {
xAxis: {
width: '500',
type: 'datetime'
},
series: [{
data: [1, 2, 3, 4, 5, 3, 4, 6, 3, 8],
pointStart: Date.UTC(2004, 3, 1),
pointInterval: 3600 * 1000
}]
});
stockChart.xAxis[0].setExtremes(1080777600000, 1080806400000);
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>
I solved this problem by extending Highcharts to behave how I wanted it to. I wrapped the Tooltip, Point, and Axis functions (refresh, setState, and drawCrosshair respectively) to make some checks before proceeding to normal operation.
Here is the JSFiddle with the correct behavior: http://jsfiddle.net/7dk6g6rh/7/
(function (H) {
H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) {
for(var i=0; i<points.length; i++) {
if(!points[i].isInside) {
this.hide();
return;
}
}
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
H.wrap(H.Point.prototype, 'setState', function(proceed, state) {
if(this.isInside || state !== 'hover') {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
}
});
H.wrap(H.Axis.prototype, 'drawCrosshair', function(proceed) {
var hoverPoint = this.chart.hoverPoint;
if(hoverPoint && hoverPoint.isInside) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
} else {
this.hideCrosshair();
}
});
}(Highcharts));
var stockChart = Highcharts.stockChart('container', {
xAxis: {
width: '500',
type: 'datetime'
},
series: [{
data: [1, 2, 3, 4, 5, 3, 4, 6, 3, 8],
pointStart: Date.UTC(2004, 3, 1),
pointInterval: 3600 * 1000
}]
});
stockChart.xAxis[0].setExtremes(1080777600000, 1080806400000);
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>
I don't want line in background of plotly area graph. My graph is coming like this.
I want to remove this lines from graph. But I didn't get any solution for it.
I referred this code.
And following is my code:
demo.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
var trace1 = {
x: ['2013-10-04 22:23:00', '2016-10-06 22:23:00', '2013-11-04 22:23:00', '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'],
y: [1, 3, 6,9, 4, 5],
fill: 'tozeroy',
fillcolor: 'red',
text: server1,
hoverinfo: "x+y+text",
name:"Server 1",
type: 'scatter',
mode:"markers",
marker:
{
size:5,
color:"gray"
},
uid:"c2e171"
};
var layout = {
margin: {
l: 35,
r: 40,
b: 50,
t: 10
},
legend: {
"orientation": "h"
},
yaxis : {
fixedrange: true
},
};
var data = [trace1];
Plotly.newPlot('myDiv', data,layout);
var plotDiv = document.getElementById('myDiv');
</script>
</body>
</html>
And when I'm expanding graph means dragging graph x axis date is hiding,
Please give me solution for it. I'm new with plotly.js
You can use showgrid:
xaxis: {
showgrid: false
},
yaxis: {
showgrid: false,
showline: true
}
More plot.ly layout reference: https://plot.ly/javascript/reference/#layout-xaxis
Newbie question. With the flot jquery library I'm trying to set the series options, but I'm getting an error: "Unexpected identifier" on the series: { line.
I'm trying to follow https://github.com/flot/flot/blob/master/API.md#plot-options. Is there just something i'm not understanding?
<!DOCTYPE html>
<html>
<head>
<title>Flot Graph Testing</title>
<script src="jquery-2.0.3.js"></script>
<script src="jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
var options = {
grid: {
show: false
}
series: {
bars: {
show:true
}
}
};
var rawdata = [[0, 3], [2, 8], [4, 5], [6, 13]];
var data = [{data: rawdata }]
$.plot("#placeholder", data, options);
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
</script>
</head>
<body>
<div id="header">
<h2>Flot graph</h2>
</div>
<div id="content">
<div class="container">
<div id="placeholder" class="my-placeholder" style="width:600px;height:300px"></div>
</div>
<p>This is a flot graph</p>
</div>
</body>
</html>
You are missing a comma to separate the properties of the options object:
var options = {
grid: {
show: false
}, // <-- comma
series: {
bars: {
show:true
}
}
};