I want to plot the scattered data with a colorscale and the errorbars should have the same colorscale.
I found answers for plotly R (How do you make plotly error bars follow a colorscale?), but I can't translate it to js. Also using the name attribute for this seems strange to me.
Here is a minimal example (https://jsfiddle.net/ztqoemkd/1)
var trace1 = {
type: 'scatter',
mode: 'markers',
y: [2, 1, 3],
marker: {
size: 20,
color: [1, 2, 3],
showscale: true
},
error_y: {
type:'data',
array: [0.5, 0.7, 0.5],
color: [1, 2, 3]
}
}
Plotly.newPlot('myDiv', [trace1])
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>
I still don't know, if can be done self consistently with plotly itself.
At least, I could now develop this work around with d3:
// get colors from data points
rgbs = Plotly.d3.selectAll('.points .point').data().map(d => d.mcc)
// apply colors to errorbars
Plotly.d3.selectAll('.yerror').style('stroke', (d,i) => rgbs[i])
Here is the full demo:
https://jsfiddle.net/vor6e9wj
and the output is
Note 1: After zooming, the errorbars are again black.
Note 2: It does not work for scattergl.
Edit 1: To keep the colors while zooming, the work around can be attached to plotly_relayout (see https://jsfiddle.net/9s64y5cv).
Related
I'm trying to plot 10+ scatter plots on one page using Plotly. However, I've noticed that if more than 8 plots are created, some of the plots show a square with a frowny face. I've read that this means Chrome failed to render the chart.
It does not matter how complex the chart is. Even 9 basic charts will cause one not to render. See below for example with code to replicate the issue:
https://codepen.io/ceds/pen/wvrGoLa
HTML
<div id="graphDiv1"></div>
<div id="graphDiv2"></div>
<div id="graphDiv3"></div>
<div id="graphDiv4"></div>
<div id="graphDiv5"></div>
<div id="graphDiv6"></div>
<div id="graphDiv7"></div>
<div id="graphDiv8"></div>
<div id="graphDiv9"></div>
<div id="graphDiv10"></div>
<div id="graphDiv11"></div>
<div id="graphDiv12"></div>
<div id="graphDiv13"></div>
JS
for (let i = 1;i < 13;i++) {
var trace1 = {
x: [1, 2, 3, 4],
y: [4, 1, 5, 3],
mode: 'markers',
type: 'scattergl',
marker:{
size: [30, 80, 50, 80],
color: 'blue'
},
name: 'Third Trace'
};
var data = [trace1];
var layout = {
title: `Chart ${i}`
};
var graphDiv = document.getElementById('graphDiv' + i.toString());
Plotly.newPlot(graphDiv, data, layout);
}
Any idea how to get past this ?
Seems like there is a Github issue open on this. The issue is not resolved as it's a limitation of Chrome:
https://github.com/plotly/plotly.js/issues/2333
In a chart I render using Plotly.js, I define titles for each axis. When mouse hovering the items within the chart, a popup is shown, but the "labels" shown do not use the titles I had defined.
For example, the default value for the x axis is x. I defined hellox as title and that value is show in the chart, but not when mouse hovering a value (x is still shown).
See a live example here of what I mean: https://codepen.io/anon/pen/qoGQvx
I've been looking a the documentation and I didn't find anything so far that did exactly what I wanted: simply change the labels in the popup.
Also the question is quite old, I would like to write a solution I came up when facing the same problem. I did define a var text array for hover info which I filled with the labels for x, y and z values. Please have a look at the following fiddle where I use a heatmap plot for demonstration (this is what I am using in my project, but it can be easily adapted for your chart option): http://jsfiddle.net/zLc5y63g/
This is the html code:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<br><br>
<!-- Source and on-click event for plotly.js -->
<div id="plotly_chart" style="width: 90%; height: 270px"></div>
And this the JavaScript:
var zValues = [[1, 20, 30], [20, 1, 60], [30, 60, 1]];
var yValues = ['data1', 'data2', 'data3'];
var xValues = ['condition1', 'condition2', 'condition3'];
var config = {
displaylogo: false
};
// fill in 'text' array for hover
var text = zValues.map (function(zValues, i) { return zValues.map (function (value, j) {
return ` ID: ${yValues[i]}<br> Condition: ${xValues[j]}<br> Value: ${value.toFixed(2)} `
});
});
Plotly.newPlot('plotly_chart', [{x: xValues, y: yValues, z: zValues, text: text, hoverinfo: 'text', hoverlabel: {bgcolor: '#41454c'}, type: 'heatmap', colorscale: 'Viridis'}], config );
Maybe this is still useful.
If you take a normal bar chart from c3js, the bars will be centered at the x-tick position. I have a chart which goes hourly, so any timespan between 00-24 (usually like 8-16). If I have a line-chart or scatter plot it will align it self exactly on the x-tick nicely, but not as a step-chart or a bar chart.
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 8, 9, 10, 11, 12, 13, 14, 15, 16],
['data1', 1, 1, 0, 1, 0, 0, 1, 1, 1],
],
type: "bar"
},
axis: {
x: {
type: "category",
categories: [],
}
}
});
See this fiddle: https://jsfiddle.net/jvcarphe/1/
I've been trying with all sorts of culling / tick values / time series etc. but I can't for the love of god figure out how to do it. If the type in the fiddle is changed to "line" it does exactly what I want, beside it's not a bar.
I've had to do this before and there doesn't seem to be a simple setting that does it, but a bit of d3 manipulation works. I came to the conclusion it's easier to move the ticks than the bars:
If you know the width of your bar, you can set a css rule to offset the ticks, just change the -10px to whatever is necessary -->
.c3-axis-x .tick line, .c3-axis-x .tick text {
transform: translate(-10px,0);
}
(can't just apply the rule to .tick as c3 overrides its transform style)
If you don't know the width then you need to find it out by querying one of the bars and applying the same style rule dynamically in c3's onrendered callback:
onrendered: function () {
var thisChart = d3.select(this.config.bindto);
var barWidth = thisChart.select(".c3-bar-0").node().getBoundingClientRect().width / 2;
thisChart.selectAll(".c3-axis-x .tick line,.c3-axis-x .tick text").style("transform", "translate(-"+barWidth+"px,0)");
}
Fiddle edited as newer version of c3 didn't work in the fiddle:
https://jsfiddle.net/15w50f06/4/
When creating a bar chart in Chart.js all bars take up the whole horizontal space. How can I add some padding to the most left and most right bar to achieve what you see in the image below:
Alternativly this may be achieved if the bars are aligned in the center and using a max-width in percentage on the bars itself, so that they will never fill up the whole space. But I can't find any options for that either.
Currently I'm adding two 0 values with blank labels on each side, which works, but it's just a workaround:
var data = {
labels: ['', '', 1, 2, 3, '', ''],
datasets: [{
data: [0, 0, 36500, 59000, 65000, 0, 0],
backgroundColor: [
null,null,
'blue','blue','blue',
null,null
],
}]
};
I'm using Chart.js 2.3.
I'm using Dojo 1.8 to create a Line chart which I am using to plot time series data. The data consists of samples taken every 5 minutes over a 24 period giving up to 288 (12x24) data points.
In order to have tooltips on the chart, I need to enable markers on the chart (dojo requires this). The problem is that by default, dojo creates one marker for each data point and this results in far too many markers. Ideally, I would show a single marker for the latest data point and maybe markers every hour or two.
It's possible to customise the appearance of a marker but so far I haven't been able to find any way of customising the frequency with which the markers appear. Any suggestions would be very welcome.
Try using the MarkersOnly module:
require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Lines", "dojox/charting/plot2d/MarkersOnly", "dojox/charting/Series", "dojo/ready"],
function(Chart, Default, Lines, MarkersOnly, Series, ready) {
ready(function(){
var chart = new Chart("simplechart");
chart.addPlot("plot_lines", { type: Lines });
chart.addPlot("plot_markers", { type: MarkersOnly });
chart.addAxis("x");
chart.addAxis("y", {vertical:true});
chart.addSeries("series_lines", [4, 2, 6, 4, 5, 8, 8, 1, 7, 9]);
// if you want your markers at data points 6 and 7;
chart.addSeries("series_markers", [{x:3,y:6}, {x:9,y:7}], { plot: "plot_markers" , stroke: { color: "blue" } });
chart.render();
});
});
I was really having a tough time with the documentation and I just figured it out. Here is a jsFiddle with a working example. I used Andy W's solution and worked with what I could find on DojoToolkit.org for customizing the markers.
First you need to create a MarkersOnly plot as Andy explains, then you can customize the markers. You can find all the pieces on this documentation.
//found on http://dojotoolkit.org/reference-guide/1.8/dojox/charting.html
//CIRCLE: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0",
//SQUARE: "m-3,-3 l0,6 6,0 0,-6 z",
//DIAMOND: "m0,-3 l3,3 -3,3 -3,-3 z",
//CROSS: "m0,-3 l0,6 m-3,-3 l6,0",
//X: "m-3,-3 l6,6 m0,-6 l-6,6",
//TRIANGLE: "m-3,3 l3,-6 3,6 z",
//TRIANGLE_INVERTED:"m-3,-3 l3,6 3,-6 z"
var customTheme = new SimpleTheme({
markers: {
DIAMOND: "m0,-3 l3,3 -3,3 -3,-3 z",
CROSS: "m0,-3 l0,6 m-3,-3 l6,0"
}
});
var chart = new Chart("chartCustomMarkers",
{
title: "Custom Markers Chart",
titlePos: "top",
titleFont: "normal normal normal 15pt Arial",
});
chart.addPlot("default", { type: MarkersOnly })
.addAxis("x")
.addAxis("y", { vertical: true })
.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7])
.addSeries("Series 2", [2, 5, 4, 8, 5, 6, 6, 1])
.setTheme(customTheme)
.render();
One of my coworkers showed me how to customize the SVG path (create your own pattern). Just go here for more info.