plotly / plotly.js Goto Github PK
View Code? Open in Web Editor NEWOpen-source JavaScript charting library behind Plotly and Dash
Home Page: https://plotly.com/javascript/
License: MIT License
Open-source JavaScript charting library behind Plotly and Dash
Home Page: https://plotly.com/javascript/
License: MIT License
It looks like the mode bar can't be hidden in line charts with more than one trace (though it works fine for single trace charts).
Here's a minimal example:
<html>
<body>
<div id="plotly-div"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
var trace1 = { x: [0, 1], y: [4, 5], type: "scatter"};
var trace2 = { x: [0, 1], y: [4, 5], type: "scatter"};
//var data = [trace1]; // This works: the mode bar gets removed.
var data = [trace1, trace2]; // This doesn't work: the mode bar remains.
Plotly.plot('plotly-div', data, {}, { displayModeBar: false });
</script>
</body>
</html>
I looked through the code a bit and thought that perhaps this has something to do with this comment.
You say:
No jQuery. jQuery has been removed from plotly.js for significantly better performance and improved >>browser compatibility.
This is probably true, however it looks like the plotly_click event canonly be used using jQuery
I can't get it to work using plain obj.addEventHandler('plotly.click',func,...) .
I'm using plotly offline in a jupyter notebook. I'm coming across an error that i can't seem to debug.
Here is my code:
import qgrid
import Quandl
import plotly
from plotly.offline import download_plotlyjs, init_notebook_mode, iplot
aapl = Quandl.get('yahoo/aapl')
qgrid.nbinstall(overwrite=True)
qgrid.show_grid(aapl)
init_notebook_mode()
qgrid.show_grid(aapl)
The error message is
"
Javascript error adding output!
TypeError: Cannot read property 's' of undefined
See your browser Javascript console for more details.
"
Maybe it's just me, but I keep ending up with pie chart labels that look like this: http://codepen.io/tlrdstd/pen/QyWybK
It happens when I assign a fixed size to the pie chart, either by passing it in the layout
hash, or in style
attributes on the div. The pie chart always grows to fit the space, regardless of whether there is room to fit the labels. With a 300x300 square in this example, both the title and the text are cut off. If I increase to a 500x500 square, the title fits, but the text is still cut off because the pie chart grows to match.
Converting the square to a rectangle solves the problem, but that doesn't fit my design space.
I haven't dug into this in the code yet...after trying to solve variations on the same problem in other libraries (flot, d3pie, and uvcharts come to mind), I'm just assuming it ain't easy. d3pie does the best job of plotting labels of anything I've seen, though it too forgets to check the edges of the box.
When Plotly.extendTraces is called with a maxPoints
value greater than the initial number of points when Plotly.plot
is called, the maximum number of points shown does not change, i.e. if we extend a trace containing 3 points so that it will have 4, and set maxPoints
to any value greater than 3, only 3 points will be shown on the plot.
Example:
Plotly.plot('plotDiv', [{ x: [1,2,3], y: [5,4,3] }], {})
.then(function(gd){
Plotly,extendTraces(gd, { y: [[4]] }, [0], 10)
});
In this scenario, only 3 points will continue to be displayed, despite setting maxPoints
to 10 in Plotly.extendTraces
.
The browserify generated UMD files are broken by appendVersion
in your bundle task. For CommonJS loading systems Plotly
in the last line of plotly.js
and plotly.min.js
(Plotly.version='1.0.0';
) is undefined.
P.S. Great work! Thanks for making this open source.
Hi, when I view this page: https://beta.rstudioconnect.com/mark/digitalMarketingReportSchedule/
....in Firefox it has big slowdown problems, sometimes asking to stop an unresponsive script, other times its enough that it crashes Firefox. Even if it does load, tooltip response time is sluggish.
The problems only appear when using plot.ly plots, not other htmlwidget libraries like dygraph.
The plots in the page are generated using this R code in an .Rmd document:
gadata %>% plot_ly(x = date, y = sessions, group = medium)
plot_ly(gadata[gadata$date > as.Date(Sys.Date() - 30),],
x = date,
y = transactionRevenue, group = medium, type = "bar") %>% layout(barmode="stack")
However the same report in Chrome has no issues, loads quickly.
I'm on OSX Yosemite 10.10.2 running Firefox 42.0
When 2 points in a dataset have the same x value, the hover text only shows the first one (in Compare data on hover
mode).
For example it's impossible to see the hover text for points circled in blue:
Hi,
it seems that having a graph with group bar charts and multiple Y axis doesn't work. I've created the trivial graph https://plot.ly/~iustin/4/grouped-bar-chart-with-multiple-axes/ and tested that switching Col3 between yaxis and yaxis2 also toggles between grouped and non-grouped.
Is this intended? Logically speaking, it makes sense to be able to do this, so I guess it's only a technical limitation.
I'm aware that there is staticPlot
option for disabling these features but it actually disables all interactive operations including tooltips and legends.
For charts that don't have much data points, these features unnecessary so it would be great if you guys add an option to disable zooming, panning and dragging.
Is it possible to draw vertical line on charts which follows the mouse or which can be controlled by method calls? The motivation is that if you have multiple time series charts you may want to show the vertical line on all of charts when you move mouse within one any of them.
Plotly is a really great library, I think its the best js library out there for scientific graphs in javascript.
I wonder how difficult it is to modularise Plotly - as the current minified cdn version is 1.1MB.
This is quite heavy for someone who, for example, just wants to implement scatter plots.
I think the library would gain a lot of adoption if you could pick and choose which features to include into someonese project.
Motivated by #42 (comment)
At the moment, the Snapshot.toImage
has hard-coded width
and height
parameters.
Something like:
Plotly.Snapshot.toImage(gd, {format: 'png', width: 1000, height: 800});
Moreover, maybe the on-success handler used by the modebar toImage
button could be used as the default on-success handler to Snapshot.toImage
http://docs.handsontable.com/0.20.1/demo-chromajs.html
Uncaught TypeError: Cannot read property '1' of undefined
at demo-chromajs.html:2088
function updateHeatmap(change, source) {
// arguments: [true, undefined, undefined, undefined, undefined, undefined]
if (change) {
heatmap[change[0][1]] = generateHeatmapData.call(this, change[0][1]);
} else {
Highlighting a series like dygraph is important and useful when there are many series in a plot.
So we don't need to click to toggle out all other series.
It is not hard to implement.
Histogram charts display some text on hover even when the bins are empty.
This only seems to happen in "Compare data on hover" mode.
I've been trying to show totals on my stacked bar charts. I'd prefer to show them as an integral part of the graph, but I'd settle for hoverinfo if I had to.
This jsfiddle using annotations is the closest I've come: http://jsfiddle.net/u6f0q14n/3/
That works, until I click the legend to hide a given trace:
The annotations (totals) are left hanging in the air, and the graph does not nicely resize to the updated data. As best I can tell, the provided config options do not offer a pre-packaged way to solve this.
Add a CLI tool that allow to generate the charts from command line without needing a web browser.
Hello,
Could you please add a feature to support customized formulaic axis labels? I looked around the documentation but didn't find support for this-- if it's there and I missed it, please let me know!
The main use I can think of is for graphs that create or require data "buckets" or "bins" such as histogram or surface graphs. Currently, for these, axis labels only show a single value (e.g. "72"), so the reader cannot tell whether that value is the low end or the middle or the high end of the bucket, or whether an exact match with a bucket boundary would be deemed to be included in the lower or the higher bucket.
As an example, see the 2013 NHL Player Height histogram at http://help.plot.ly/make-a-histogram/. It is not clear from this whether the the bucket labeled "72" means "71-72", "71.5-72.5", or "72-73". Hovering over suggested that it is 71.5-72.5, but it still is not clear whether a value of "71.5" would be included in the bucket labeled "71" or "72".
A generalized, flexible and intuitive approach to solving this problem would be to support a custom function for generating the label value, where the input to the function would be the label value that is currently being used (e.g. "72"). So the function could be:
function NHL_age_label(age) {
return String(age - .5) + " < x <= " + String(age + .5)
// not sure if should be (a <= x < b) instead, but you get the idea
}
When downloading as png a chart (in that case an histogram), the downloaded image doesn't display all the data visible on the webpage chart.
I understand that the interactivity of Plotly is one of the things that make it so powerful, but there are a few situations when a static plot might be preferable. Are there ways to toggle (a) visibility of the modebar and (b) panning/zooming?
Can plot.ly do a multiple-surface chart (and if so, how)-- such as the bottom one shown at https://plot.ly/python/3d-surface-plots/, but using the javascript api instead of the python one?
I'm sorry if this is already in another issue somewhere. I looked around a bit, but couldn't find it
It would be awesome if the Snapshot
functions were exposed at a higher level - perhaps through something that would work like this:
Plotly.save(gd, {format: 'pdf', width: '800', height: '450', dpi: '400'})
which would then trigger the download of the requested file (similar to how the snapshot button triggers a png download right now)
Being able to easily save to to a vector image backend like pdf
or eps
with specified sizes and dpi would be amazing -- then I could publish my plotly figures in latex based research articles.
The touch events on the chart which shows the markers, do not appear on iOS/Safari 9.1.
It is visible under Android Kitkat and later.
There are a number of use cases for explicit control over bar widths and positions (horizontal and vertical). I'm thinking about this in the context of waterfall plots, irregular-width bars but also times when the auto width is wrong (eg bar positions 1, 3, 5 and you want width 1, not width 2...), complex groupings (a stack of several traces, grouped with another stack of several other traces, etc).
If we allow explicit position and size, that covers every degree of freedom that exists for drawing bars on a plot. Then later we can peel off pieces with more meaning (like complex groupings that we should be able to describe in terms of grouping and stacking rather than positioning), and provide a simpler syntax for those.
I'm thinking of attributes:
// width of bars, in units of the position axis data
// This would override the whole automatic width machinery,
// including bargap and bargroupgap
width: {
valType: 'number',
min: 0,
arrayOk: true
},
// shift on the position axis, in units of the position axis data
// This would override the automatic positioning machinery
// in the case barmode='group', rather than add to it.
offset: {
valType: 'number',
arrayOk: true
}
// shift of the bottom of the bar on the size axis
// This would override the automatic stacking machinery,
// rather than add to it.
base: {
valType: 'any'
arrayOk: true
}
Are offset
and base
clear enough? Any better names? And is width
OK even for horizontal bars (in which case it's really the bar height)?
The TypeScript transpiler is a useful tool for the development of web applications with a large codebase.
Popular graphics libraries such as Highcharts provides typescript definition files allowing to use their API in a safe way when called from TypeScript code.
It would be awesome if such a definition file was available for plotly.js.
The work consists in creating a TypeScript interface for each object of the public Javascript API.
Not that plotly would necessarily have to support JSPM, but it's also not possible to shim around the issue because there is neither a true source nor a true distribution format in the NPM package.
The package.json
points to src/index.js
, which relies on build/ploticon
and other files in the build folder. Meanwhile, dist/plotly.js
– presumably intended for distribution given the name – begins with var Plotly = require('../src/plotly');
which seems wrong.
plot
, newPlot
, redraw
, restyle
, and relayout
do, but not extendTraces
, moveTraces
etc.I got many warnings saying : location with id Plainfield does not have a matching topojson feature at this resolution.
for input file /static/data/data.csv which has a format as follow:
"Order Date","Department","Category","State","City","Sales","Profit","Region","Customer Segment"
"41057","Office Supplies","Labels","Illinois","Addison","5.9","1.32","Central","Corporate"
"40366","Office Supplies","Pens & Art Supplies","Washington","Anacortes","13.01","4.56","West","Corporate"
"40751","Office Supplies","Paper","Washington","Anacortes","49.92","-47.64","West","Corporate"
"40751","Office Supplies","Scissors, Rulers and Trimmers","Washington","Anacortes","41.64","-30.51","West","Corporate"
"40751","Technology","Telephones and Communication","Washington","Anacortes","1446.67","998.2022999999999","West","Corporate"
demo.html :
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="/static/js/excel.js"></script>and my javascript ( /static/js/excel.js ) is as follows :
Plotly.d3.csv('/static/data/data.csv', function(err, rows){
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var cityName = unpack(rows, 'City'),
orderDate = unpack(rows, 'Order Date'),
department = unpack(rows, 'Department'),
category = unpack(rows, 'Category'),
state = unpack(rows, 'State'),
sales = unpack(rows, 'Sales'),
profit = unpack(rows, 'Profit'),
region = unpack(rows, 'Region'),
customer_segment = unpack(rows, 'Customer Segment'),
color = [,"rgb(255,65,54)","rgb(133,20,75)","rgb(255,133,27)","lightgrey"],
hoverText = [],
scale = 50000;
for ( var i = 0 ; i < cityName.length; i++) {
hoverText.push(cityName[i]);
}
console.log(hoverText);
var data = [{
name: 'scattered',
type: 'scattergeo',
locationmode: 'USA-states',
locations: cityName,
text: cityName,
hoverinfo: 'text',
marker: {
// size: citySize,
line: {
color: 'black',
width: 2
},
}
}];
var layout = {
title: 'Data Overview',
showlegend: false,
geo: {
scope: 'usa',
projection: {
type: 'albers usa'
},
showland: true,
landcolor: 'rgb(217, 217, 217)',
subunitwidth: 1,
countrywidth: 1,
subunitcolor: 'rgb(255,255,255)',
countrycolor: 'rgb(255,255,255)'
},
};
Plotly.plot(myDiv, data, layout, {showLink: false});
});
Please help to show the data.
e.g.
Plotly.plot(Tabs.fresh(), [
{
x: [1, 2, 3],
y: [10, 30, 15],
text: ['one', 'two', 'three'],
name: 'first trace',
hoverinfo: 'text'
}],
{
hovermode: 'x'
}
);
Any thoughts on implementing a "step mode" for the scatter trace?
I thinks the need to display stepped data is quite frequent (to display error count over time for example). Doing it by programatically adding fake points at the bottom of the step is the only workaround I thought about and it doesn't sound like a great way to do it.
Here is what I mean by step chart:
(Source: http://www.highcharts.com/stock/demo/step-line)
Sorry about linking them here, but in fact quite a lot of others charting library also support this.
If you set up a histogram...
var data1 = [1, 2, 2, 3, 3, 3, 4, 4, 5];
var hist = document.getElementById('hist_div');
Plotly.plot(hist, [{x: data1, type: 'histogram' }]);
... and then update this histogram with wider data followed by a restyle...
var data2 = [10, 20, 20, 30, 30, 30, 40, 40, 50];
Plotly.restyle(hist, {x: [data2]});
... the histogram keeps the old range (in this case 1 to 5) and does not scale to the range of the new data (which is the case when using scatter style plot). Here is a codepen showing this: http://codepen.io/rasmusab/pen/megKOo
I have not found any documentation regarding whether this is the expected behavior. If it is, what would be the best practice for updating a histogram with new data?
There are a host of issues that have been discussed on other projects with glslify
locking down bundling to only browserify.
Shame since it looks like a normal module we can bundle with anything we want 😢
I don't know enough about this issue to propose a fix, but hopefully someone knows enough about this and make swapping out the browserify-specific easy.
Hi ! and thank you for opening Plotly.js !
I am trying to catch click events as well as the exemple works but without jQuery.
Documentation Highlights writes there is no jQuery inside Plotly so i assume it is possible to do that but my knowledge is limited :/
Here is my chart if it helps !
http://codepen.io/anon/pen/xwBMMM
Thank you very much.
Motivated by #63 ... we should describe this structure somewhere in the contributor's guide. What's generally supposed to be the role of attributes
, supplyDefaults
, supplyLayoutDefaults
, calc
, setPositions
, plot
, and style
(anything else?), how to tell the difference, and when each of them gets called. Without that it's pretty hard for new people to make any meaningful contributions to the drawing code. The non-trace modules (axes, annotations, etc...) may still be too ad-hoc for this kind of doc to be useful, but I think the traces are fairly uniform by now.
Of course if this leads us to the desperately needed refactor & modularization of restyle
and relayout
I wouldn't complain, but that shouldn't stop us from documenting what we have.
I couldn't find any way to configure legend to be placed under the chart in a single line. It would be nice if Plotly makes it possible to move the legend below the chart.
It seems like there are a lot of greek unicode characters in d3.js
and projections.js
.
https://github.com/plotly/plotly.js/blob/master/src/plots/geo/projections.js#L355
These characters are causing an "Unexpected token ILLEGAL" error in Chrome 46, and likely most browsers.
Anyone else having issues running the karma tests? First issue I had was the tasks\util\shortcut_paths.js
transform (invalid directory delimiter for windows). That was easy to fix. But even after this npm test
produces the error ReferenceError: Can't find variable: require
. Looks like karma-browserify
is not working as expected.
var data = [{
x: [2, 4, 5],
y: [1, 1, 1],
z: [1, 2, 3],
type: 'heatmap'
}];
var layout = {
title: '(x, y, z) triplets'
};
Plotly.newPlot('myDiv', data, layout);
I would like to be able to know when the user hovers or clicks on my label or legend items. Specifically, I would like to be able to highlight a given pie slice or bar trace when a particular label or legend item is hovered over. d3pie does this, and an example can be seen here: http://d3pie.org/#generator-start
As a starting point, it would be useful to have this click
handler fire an event after it calls Plotly.restyle
or Plotly.relayout
:
plotly.js/src/components/legend/index.js
Line 484 in 47b13b0
A hover
handler for the same traces would help a lot as well.
Currently, we have to make annotations for bar charts because 'markers+text' mode (Reference: https://plot.ly/javascript/reference/#scatter-mode) does not extend to bar charts like this one:
https://plot.ly/javascript/bar-charts/#bar-chart-with-direct-labels
This can be tedious for a large number of bars, especially if someone is using the Web App. It would be nice if 'markers+text' mode existed for horizontal and vertical bar charts.
Hello, I'm interested (since long ago) in doing web-based real time plotting to troubleshoot running systems (robots, actually). From Python.
I've seen your example: https://plot.ly/python/streaming-tutorial/
And it references using an API key and with that, most probably, traffic thru the internet. Is there any way to do this all locally?
Thank you very much for your feedback.
Hi,
It seems that the current exponentformat values for showing human-friendly names are either SI or B (which I'm not sure about; is it billion?). However, these both are powers-of-10, so for computer-related values it would make sense to add a powers-of-two model (where 1024 → 1K, etc.)
I am currently using C3 which is now not developing fast. I decided to evaluate Plotly. I see that Plotly is complex library comparing to C3 so it is much heavier. I think C3.js is designed in JS-fashion: emitting events and using callbacks. From what I can see Plotly is designed to be used in JS, Python, Matlab and R so I guess it works differently. Maybe I spent too little time to learn Plotly and I missed a few important things about it. What I would expect from Plotly is to emit events when one hovers a chart or use callbacks to format data which is shown in tooltips. Am I just missing how to use it? I haven't looked into source code of Plotly - only looked at examples and documentation.
Documentation states:
zauto (boolean)
default: true
Determines the whether or not the color domain is computed with respect to the input data.
zmin (number)
Sets the lower bound of color domain.
zmax (number)
Sets the upper bound of color domain.
However, when used in surfaces, such as displayed in https://plot.ly/~filipinascimento/3/ , zmin and zmax are ignored for the surface color (although, it updates the colorbar). This makes impossible to have two surfaces sharing the same colormap.
Some run-to-run randomness has been noticed while running the image test routine:
gl3d_bunny-hull
-> fails in ~ 1 out of 10 runsA declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.