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
Related
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).
I'm trying to make a Slideshow/carousel with pie charts in it. The charts load when the page loads, but only one is displayed at a time.
The problem is that when I move the slideshow to the side to display the second chart, instead of rendering within it's container it takes up the whole space of it's grandparent. Specifically, the first chart that renders is the correct size, any other chart is wrong.
This doesn't use any PHP or anything of the sort, just javascript, html, css and the canvasjs framework. I've tried forcing the graphs to be a fixed size but when I load the next one it just ignores all of the rules I set.
Here is the code:
/*--------- function that creates the charts ----------*/
function criaGrafico(id, valores, tp) {
setInner(id, '');
if (valores == '') return;
var dados = new Array;
var title = {
text: '',
};
var legenda = {
fontSize: "14",
verticalAlign: "bottom",
horizontalAlign: "left",
fontFamily: "sans-serif",
itemWrap: false
};
dados[0] = {
dataPoints: new Array,
indexLabelFontSize: 10,
indexLabelFontFamily: "sans-serif",
indexLabelFontColor: "darkgrey",
indexLabelLineColor: "darkgrey",
indexLabelPlacement: "outside",
indexLabelMaxWidth: 60,
type: tp,
showInLegend: false, // true mmm
legendMarkerType: 'square'
};
var opc = {
title: title,
legend: legenda,
data: dados
};
var chart = new CanvasJS.Chart(id, opc);
var campo = '';
for (var i = 0, lt = valores.length; i < lt; i++) {
campo = valores[i].split("|");
chart.options.data[0].dataPoints.push({
y: Decimal(campo[0]),
legendText: campo[4],
indexLabel: campo[2],
toolTipContent: campo[1],
color: campo[3]
/*,click:function(e){clicouGrafico(e)}*/
,
cursor: "pointer"
});
}
chart.render();
}
/* function that sets the parameters for the chart */
function graficoProj1() {
var val = new Array();
val[0] = '71|Finalizadas: 87 (71%)|Fin|green|Finalizadas';
val[1] = '9|Direcionadas: 12 (9%)|Dir|orange|Direcionadas';
val[2] = '18|Iniciadas: 22 (18%)|Ini|blue|Iniciadas';
criaGrafico('chart_inov3', val, "pie");
}
#chart_inov3 {
margin-left: 15px;
z-index: 0;
position: relative;
}
<div class="slideshow-container">
<div class="projSlides fade">
<div class='col-d-4 col-t-4'>
<div id='chart_container' style="height: 170px; width: 170px;">
<div id="chart_inov3"></div>
</div>
</div>
<!-- some other info that would stay besides the chart,
in the same parent container -->
</div>
</div>
Then, the function graficoProj1 is called when the window loads, along with the other charts that will go into the slideshow, like graficoProj2 and graficoProj3.
The result should be a chart that stays inside it's own container, like so:
However, when I press the "Next" button to the right to display the next slide, the other chart renders like this:
EDIT:
I suspect this might be linked to the way I display the containers of the slideshow, since they are first set as display: none and then they get to be display: block when focused. This might cause the charts to not render properly within their container since they are not shown. Rerendering them might fix this problem, but I'm still at a loss at how to.
Does anyone have any idea of what could be causing this?
I've fixed it already, forgot to update. The problem was in the "showSlide" javascript function (which was not in this post). When hidden, the charts don't render, so I just have to call the render function after display: block is shown.
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.
Is it possible to link all/some of the points of a scatter plotly plot so whenever you click on them a new tab is opened and the hyperlink linked on that point is fired?
I am using plotly within a Django webserver implementation, this means that plotly is rendered with javascript.
You can use the click handler to implement this. But it may be hard to open in new tab, given most browsers try to prevent popups at all times.
var trace1 = {
x: [1, 2, 3],
y: [1, 6, 3],
mode: 'markers',
type: 'scatter',
text: ['Plotly', 'StackOverflow', 'Google'],
hoverinfo: 'text',
marker: { size: 12 }
};
var links = ['https://plot.ly/', 'http://stackoverflow.com/', 'https://google.com/'];
var data = [ trace1 ];
var layout = {
title:'Hyperlinked points'
};
var myPlot = document.getElementById('myDiv');
Plotly.newPlot(myPlot, data, layout);
myPlot.on('plotly_click', function(data){
if (data.points.length === 1) {
var link = links[data.points[0].pointNumber];
// Note: window navigation here.
window.location = link;
}
});
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 480px; height: 300px;"></div>
I am using Google Chart API to create chart for values which goes from 1 to millions.
Problem
The bars which are representing smaller values (ex: less than 50 or so) are invisible on graph and no way I can see what values correspond to certain x-axis.
This would be solved if I can somehow print y-axis values on top of bars.But, I couldn't find any mention in the API doc on how to do it.
There is similar problem here, but it doesn't answers my question.
put labels on top of inside bar in google interactive bar chart
There are some other more than year old unanswered questions here, I am hoping someone might have found a solution or a workaround by now, that is why asking this question again.
Google Visualization: Column Chart, simple question but can't find the answer
How to show values on the the top of columns Google Chart API
Can you show me how to achieve what I want using How can I customize this Google Bar Chart? ?
Check out Andrew Gallant's JSFiddle here:
http://jsfiddle.net/asgallant/QjQNX/
It uses a clever hack of a combo chart to accomplish what I think you're looking for.
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
['Foo', 53, 'Foo text'],
['Bar', 71, 'Bar text'],
['Baz', 36, 'Baz text'],
['Cad', 42, 'Cad text'],
['Qud', 87, 'Qud text'],
['Pif', 64, 'Pif text']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 1, 2]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, {
height: 400,
width: 600,
series: {
0: {
type: 'bars'
},
1: {
type: 'line',
color: 'grey',
lineWidth: 0,
pointSize: 0,
visibleInLegend: false
}
},
vAxis: {
maxValue: 100
}
});
}
I had some setbacks using annotation and the invisible line (for example, having it displayed in the tooltip as another series).
I've made a hack to the ComboChart (could work with BarChart and ColumnChart as well, with a couple of changes) to insert the labels into the SVG.
Check out this fiddle: http://jsfiddle.net/augustomen/FE2nh/
Tested on Firefox 21, Chrome 27 and IE 9.