Develop Reference

Disable double click to zoom in feature in plotly js

I was trying with the below code which is given here.
var trace1 = {
x: [1, 2, 3, 4, 5],
y: [1, 6, 3, 6, 1],
mode: 'markers',
type: 'scatter',
name: 'Team A',
text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'],
marker: { size: 12 }
};
var trace2 = {
x: [1.5, 2.5, 3.5, 4.5, 5.5],
y: [4, 1, 7, 1, 4],
mode: 'markers',
type: 'scatter',
name: 'Team B',
text: ['B-a', 'B-b', 'B-c', 'B-d', 'B-e'],
marker: { size: 12 }
};
var data = [ trace1, trace2 ];
var layout = {
xaxis: {
range: [ 0.75, 5.25 ]
},
yaxis: {
range: [0, 8]
},
title:'Data Labels Hover'
};
Plotly.newPlot('myDiv', data, layout);
I want to disable the default plotly feature double clicking to zoom in the markers. But I want to keep the zoom out feature on double clicking.
Is it anyhow possible?

Please check this. I have used doubleClick: 'reset' to fulfill my objective.

Google chart not display x and y legend

So... my problem is that the google chart is not displaying the bottom legend and vAxis values.
It should have, for example, on the left red box, the values 100, 200, 300...
And the bottom should have (orange box) "Solar energy" and (red line) "solar consumption" written on it.
I am printing it on jsPDF plugin, so its a hidden container, i cant display it on the screen
The html:
<div id="chart_div" style="display: none;"></div>
The js:
google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
var dataChart1 = new google.visualization.DataTable();
dataChart1.addColumn('string', 'Mês');
dataChart1.addColumn('number', 'Fora Ponta');
dataChart1.addColumn('number', 'Geração Solar');
dataChart1.addRows([
['JAN', 0, 0],
['FEV', 1, 1],
['MAR', 2, 2],
['ABR', 3, 3],
['MAI', 4, 4],
['JUN', 5, 5],
['JUL', 6, 6],
['AGO', 7, 7],
['SET', 8, 8],
['OUT', 9, 9],
['NOV', 10, 10],
['DEZ', 11, 11]
]);
var optionsChart1 = {
titlePosition: 'none',
vAxis: {title: 'Valores'},
hAxis: {
format: 'decimal'
},
legend: {
position: "bottom"
},
seriesType: 'bars',
series: { 1: { type: 'line' } },
height: 300,
width: 800,
colors: ['orange', 'red']
};
chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dataChart1, optionsChart1);
});

After a few tests, i manage to work it out removing:
display:none;
from my chart div and adding:
position: absolute;z-index: -1;
So it will not appear on the screen and still avoid the bug of not showing the legend correctly because of the hidden content.

Flot JS turn target into diamond shape

I've three series of data: for green bars, red bard and target like
var dataBarsRed = {
data: [
[2, 3], ],
label: 'Bars in Red',
color: 'red'
};
var dataBarsGreen = {
data: [
[1, 2],
[3, 1],
[4, 3]
],
label: 'Bars in Green',
color: 'green'
};
var dataLines = {
data: [
[1, 3, 3],
[2, 3.5, 3.5],
[3, 1.5, 1.5],
[4, 2.5, 2.5]
],
label: 'Lines',
color: 'navy',
bars: {
barWidth: 0.5
}
};
I've attached the fiddle for it.
It is possible to make the target as diamond () using Flot JS?

You can customize the point shape by specifying it in the series options (or each individual series). The symbol plugin can be used access more shapes:
var options = {
series: {
points: {
shape: "diamond"
}
}
}
This updated JSFiddle uses the symbols plugin to show diamonds as the point marker.

Text overflow issue with highcharts

I was wondering how to make the text in a highcharts legend clip or make an ellipsis after certain amount of characters. I know that I can set the legend style but not sure how to make it so that it works in this situation
http://jsfiddle.net/t96zj1yr/
'hidden',$(function () {
$('#container').highcharts({
chart: {
marginBottom: 120,
width: 500
},
legend: {
itemWidth: 100,
itemStyle: {
color: '#7CB57C',
fontWeight: 'bold',
width: '70px',
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap"
},
useHTML: true
},
series: [{
data: [6, 4, 2],
name: 'Firstasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf'
}, {
data: [7, 3, 2],
name: 'Second'
}, {
data: [9, 4, 8],
name: 'Third'
}, {
data: [1, 2, 6],
name: 'Fourth'
}, {
data: [4, 6, 4],
name: 'Fifth'
}, {
data: [1, 2, 7],
name: 'Sixth'
}, {
data: [4, 2, 5],
name: 'Seventh'
}, {
data: [8, 3, 2],
name: 'Eighth'
}, {
data: [4, 5, 6],
name: 'Ninth'
}]
});
});
Any help would be appreciated!!
Thank you

Use maxWidth: '70px' instead of width: '70px'.

You should be able to set the item style of the legend to include
max-width: 10ch;
Which should approximate a number of characters
Edit:
You can use Jquery to edit the contents of the spans based on the number of characters in its contents. This should add ellipsis for anything longer than 10 characters after the 10th character.
$('.highcharts-legend-item').find('span').each(function() {
var content = $(this).html();
if(content.length > 10)
{
$(this).html(content.substring(0, 10) + "...");
}
});
Give this a whirl - you'll just need to change the character limits to desired length. Seems to be working fine

highcharts datetime x-axis extents differ between two charts with same range

In my jsfiddle, example I've got two instances of the same chart. Each has two series of data - one common to both with the same max and min and the other different but with values wholey within the extents of the first series. What i'm expecting is to see the two graphs to the same scale. What I get is the first shrunk to the middle of the graph range and the second full width.
I've tried all sorts - setting the max and min etc, but really, I don't understand what the issue is so i'm having trouble figuring out what to do about it
Can anyone tell me what's going one - why don't they scale the same and what can I do to force them to? I've added some buttons to print the extremes and they report as being the same. I've tried setting min and max on the series to the min and max values from my data - but to no avail.
var gc2 = [
[1421680291000, 5],
[1421690785000, 5],
[1421713693000, 1],
[1421746462000, 6],
[1421747928000, 6],
[1421754240000, 6],
[1421775733000, 6],
[1421782226000, 6],
[1421798460000, 6],
[1421884860000, 3],
[1421971260000, 6],
[1422057660000, 6],
[1422144060000, 6],
[1422230460000, 6],
[1422268738000, 3],
[1422273729000, 1],
[1422316860000, 1],
[1422663082000, 5],
[1422748860000, 6],
[1422835260000, 3],
[1422921660000, 6],
[1423180860000, 3],
[1423267260000, 5],
[1423353660000, 3],
[1423440060000, 5],
[1423872060000, 5],
[1423958460000, 5]
];
var bad = [
[1421971260000, 1],
[1422057660000, 1],
[1422144060000, 1],
[1422230460000, 1],
[1422268738000, 1],
[1422748860000, 1]
];
var good = [
[1421746462000, 1],
[1421747928000, 1],
[1421754240000, 1],
[1421775733000, 1],
[1421782226000, 1],
[1421798460000, 1]
];
$(document).ready(function () {
checkOrder(gc2);
checkOrder(good);
checkOrder(bad);
});
function checkOrder(series) {
var xlow = 0;
for (var i = 0; i < series.length; i++) {
if (series[i][0] < xlow) {
console.log("out of order");
} else {
xlow = series[i][0];
}
}
}
$(function () {
$('#container1').highcharts('StockChart', {
chart: {
defaultSeriesType: 'column',
backgroundColor: 'transparent'
},
rangeSelector: {
selected: 1
},
title: {
text: 'not working'
},
xAxis: {
type:'datetime'
},
yAxis: {
min: 0,
max: 10
},
series: [{
name: 'x1',
data: gc2,
tooltip: {
valueDecimals: 2
}
}, {
name: 'x2',
data: bad,
tooltip: {
valueDecimals: 2
}
}]
});
});
$(function () {
$('#container2').highcharts('StockChart', {
chart: {
defaultSeriesType: 'column',
backgroundColor: 'transparent'
},
rangeSelector: {
selected: 1
},
title: {
text: 'working'
},
xAxis: {
type:'datetime'
},
yAxis: {
min: 0,
max: 10
},
series: [{
name: 'x1',
data: gc2,
tooltip: {
valueDecimals: 2
}
}, {
name: 'x',
data: good,
tooltip: {
valueDecimals: 2
}
}]
});
});