Toggle visibility of (plotly.js - scatter) y-axis & traces - javascript

New to plotly.js
(I am in angular environment)
I wanna put the traces inside of a multi-select drop menu. Same for all the y axis. To be able to toggle the visibility of these. Suggestions...the easy/right way.
I tried to affect the svg containers with css but no effect:

For axis:
var update = {
'yaxis.visible': false
};
Plotly.relayout(myDiv, update)
For traces:
data = [
{
line: {width: 5},
name: "myName1",
type: "scatter",
visible: "legendonly", // Plot trace but hide it to the user
x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
y: [10, 11, 2, 23, 14, 5, 16, 7, 18, 29, 10]
},
{
line: {width: 5},
name: "myName2",
type: "scatter",
visible: "legendonly" ,// Plot trace but hide it to the user
x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
y: [10, 1, 12, 13, 4, 25, 16, 17, 8, 19, 20]
}
];
allTraces=document.getElementById("myDiv").data; // Get data from chart AFTER plotting it.
// Find index of trace-object with "name" property = "text to find":
result = allTraces.findIndex(obj => {
return obj.name === "text to find";
}
// Make specified trace visible to user:
Plotly.restyle(document.getElementById("myDiv"), {"visible": true}, [result]);

Related

Boxplot in highcharts displaying incorrect values for high, and median

I am creating a box plot from a simple series of data:
var box_plot = Highcharts.chart(container, {
chart: {
type: 'boxplot'
},
title: {
text: chart_title
},
legend: {
enabled: false
},
series: [{
name: 'Observations',
data: [
[1,2,3,4,5,6,7,8,9,10,11,12,13]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
}]
});
return box_plot;
But when the box plot is generated, the high is shown as 6 and median as 4. In the data the high is 13 and median is 6.
Please inform what I am doing wrong. Screenshot of code and box plot attached.
Thank You
You can provide data to boxplot series in two ways:
An array of arrays with 6 or 5 values. In this case, the values correspond to x,low,q1,median,q3,high. If the first value is a string, it is applied as the name of the point, and the x value is inferred. The x value can also be omitted, in which case the inner arrays should be of length 5. Then the x value is automatically calculated, either starting at 0 and incremented by 1, or from pointStart and pointInterval given in the series options.
data: [
[0, 3, 0, 10, 3, 5],
[1, 7, 8, 7, 2, 9],
[2, 6, 9, 5, 1, 3]
]
An array of objects with named values. The following snippet shows only a few settings, see the complete options set below. If the total number of data points exceeds the series' turboThreshold, this option is not available.
data: [{
x: 1,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point2",
color: "#00FF00"
}, {
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point1",
color: "#FF00FF"
}]
Highcharts doesn't have any auto data calculation procedure in this case. You need to prepare the required data structure by yourself. For example:
const data = [
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
];
const processedData = data.map((dataEl, index) => ({
x: index,
low: Math.min(...dataEl),
median: dataEl[(dataEl.length - 1) / 2],
high: Math.max(...dataEl),
...
}));
Live demo: http://jsfiddle.net/BlackLabel/eqz4851x/
API Reference: https://api.highcharts.com/highcharts/series.boxplot.data

Highcharts, How to remove gaps on x coordinates

For a Highcharts spline type chart, I want to completely remove the left and right spaces.
I tried to change some options but there is no success.
Spacing and margin keys did not make any appearance changes.
Does anyone have any info on how to remove the spaces, all help is welcome.
Example chart
Highcharts.chart('container', {
title: {
text: ''
},
chart: {
type: 'spline',
},
legend: {
display: false
},
xAxis: {
categories: [7, 13, 16, 18, 19, 20, 29, 22, 25, 38, 23, 26, 28, 29, 33],
},
yAxis: {
tickPosition: 'inside',
min: 0,
title: {
text: null
},
floor: 0,
tickWidth: 1
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
These gaps are added when using the xAxis.categories option. If you remove these options then it works the way you want. For tick positioning in this case it is better to set other available API options. Find out more about it here: https://api.highcharts.com/highcharts/xAxis.tickPositions

plotly manually set a onesided range

In plotly the axis range can be set manually with yaxis: {range: [0,10]}
e.g. https://codepen.io/plotly/pen/YXbwyo.
However, how can I set only the lower limit manually to 0, while the upper limit should autoscale?
You can set the parameters rangemode:'tozero' and autorange:true in the layout.
I modified the traces in your codepen to not include the points where x=0 and the lower limit of the range is indeed 0 while the upper limit autoscales to the largest x- and y-values.
var trace1 = {
x: [1, 2, 3, 4, 5, 6, 7, 8],
y: [7, 6, 5, 4, 3, 2, 1, 0],
type: 'scatter'
};
var trace2 = {
x: [1, 2, 3, 4, 5, 6, 7, 8],
y: [1, 2, 3, 4, 5, 6, 7, 8],
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
xaxis: {rangemode: 'tozero',
autorange: true},
yaxis: {rangemode: 'tozero',
autorange: true},
};
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});

Unable to reference json file in Data attribute but array list data works

I am incorporating cal-heatmap in my asp.net website and all works fine as long as i am referencing data through an array, initialized as variable above the init method, however things stop showing up as soon as i create new text file in visual studio and rename it as datas-years.json and reference it in 'data' attribute, please help me ?
below is the working code, manually entered data in array and referencing
var cal = new CalHeatMap();
var data = { "1420498800": 20, "1420585200": 40, "1420671600": 60, "1420758000": 1, "1421103600": 2, "1421190000": 90, "1421276400": 1, "1421362800": 1, "1421622000": 1, "1421708400": 1, "1422226800": 1, "1422313200": 1, "1422399600": 2, "1422486000": 1, "1422572400": 1, "1423695600": 3, "1424127600": 2, "1424214000": 1, "1424300400": 3, "1424386800": 1, "1424646000": 2, "1424732400": 1, "1424818800": 2, "1424905200": 2, "1424991600": 1, "1425337200": 1, "1425855600": 4, "1426201200": 2, "1426460400": 2, "1426546800": 1, "1426633200": 2, "1426719600": 1, "1426806000": 1, "1427065200": 1, "1427151600": 1, "1427238000": 2, "1427324400": 1, "1427670000": 2, "1428361200": 2, "1428447600": 2, "1428534000": 3, "1428620400": 3, "1428966000": 2, "1429138800": 2, "1429225200": 1, "1429484400": 2, "1429570800": 1, "1429657200": 2, "1429743600": 2, "1429830000": 3 };
cal.init({
data: data,
itemName: ["volunteer", "volunteers"],
start: new Date(2015, 0, 1, 1),
domain: "month",
subDomain: "day",
cellSize: 15,
subDomainTextFormat: "%d",
range: 12,
legend: [20, 40, 60, 80],
});
below is the referencing through separate file, all under visual studio
var cal = new CalHeatMap();
cal.init({
datatype:JSON,
data: "datas-years.json",
itemName: ["volunteer", "volunteers"],
start: new Date(2015, 0, 1, 1),
domain: "month",
subDomain: "day",
cellSize: 15,
subDomainTextFormat: "%d",
range: 12,
//highlight: new Date(2016, 1, 15),
legend: [20, 40, 60, 80],
});
I also would like to know what is the best way to convert the date to seconds format, when i impliment it in live, should i ensure that it is added in seconds format to json file or it can be just like 2/26/2015 ? and then convert it into seconds while borrowing from json file ? Please guide me, thank you
EDIT:
Data in the datas-years.json file in directory
[{
"1420498800":20,
"1420585200":40,
"1420671600":80,
"1421708400": 1,
"1422226800": 1,
"1422313200": 1,
"1422399600": 2,
"1422486000": 1
}]

Unexpected behavior with multiple instances of Handsontable in a page

I have a page with multiple instances of handsontable. All custom properties of a handsontable seems to be attached to the last rendered table.
Is there anyway to get around this?
For Example in the image below while hovering on the top table, comments on the bottom table are shown
Fiddle
code:
$(document).ready(function () {
function getData() {
return [
["", "Kia", "Nissan", "Toyota", "Honda"], ["2008", 10, 11, 12, 13], ["2009", 20, 11, 14, 13], ["2010", 30, 15, 12, 13]];
}
var container1 = document.getElementById('example1');
var container2 = document.getElementById('example2');
var options = {
data: getData(),
startRows: 5,
startCols: 5,
minRows: 5,
minCols: 5,
maxRows: 10,
maxCols: 10,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
comments: true,
cell: [{
row: 1,
col: 1,
comment: "Test comment"
}, {
row: 2,
col: 2,
comment: "Sample"
}]
};
var hot1 = Handsontable(container1, options);
var hot2 = Handsontable(container2, options);
})
This issue has been fixed by the Handsontable team.

Categories