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.
Related
I am using plotly to display graphs on a page for a course that I am developing. I can create the graphs when student's click on a button using the code below:
if($('#lesson1AssignmentGraphButton').length){
$('#lesson11AssignmentGraphButton').click (function (){
if($("#lesson15AssignmentGraph").html() === "") {
create plotly graph
}
});
}
Is there a way to have the graph automatically be added to the webpage (html document) without the user having to click on a button?
Edit:
Thank you testing testing_22. I tried your code but was not successful. For Bas van der Linden comment, I completely agree. However, I seem to always have difficulty with having the graph show on the page. An example code that I use on my page is
if($('#lesson11StudentScatterButton').length){
$('#lesson11StudentScatterButton').click (function (){
if($("#lesson11StudentScatterGraph").html() === "") {
let trace1 = {
x: [1, 5, 5, 8.5, 4, 7, 9, 1, 7],
y: [9, 6, 5, 2, 4, 2, 3, 7, 5],
mode: 'markers',
type: 'scatter'
};
let layout = {
autosize: true,
margin: {
l: 50,
r: 10,
b: 40,
t: 40,
pad: 5
},
title: 'Number of Cups of Coffee vs<br />Hours of Sleep',
xaxis: {
title: 'Number of Cups of Coffee',
showgrid: true,
zeroline: true,
showline: false,
range: [0, 10]
},
yaxis: {
title: 'Hours of Sleep',
showgrid: true,
zeroline: true,
showline: false,
range: [0, 10]
},
plot_bgcolor:"#f8f1f1",
paper_bgcolor:"#f8f1f1"
};
let data = [trace1];
let config = {
showSendToCloud: true,
displayModeBar: false, // this is the line that hides the bar
scrollZoom: false,
responsive: true
}
Plotly.newPlot('lesson11StudentScatterGraph', data, layout, config);
$("#lesson11StudentScatterButton").html("Hide Graph");
$("#lesson11StudentScatterButton").removeClass("createQuestionsButton").addClass("checkAnswerButton");
} else {
document.getElementById("lesson11StudentScatterGraph").innerHTML = "";
$("#lesson11StudentScatterButton").html("Scatter Plot");
$("#lesson11StudentScatterButton").removeClass("checkAnswerButton").addClass("createQuestionsButton");
};
});
}
When I have a student click on button, the graph shows up fine and with no issues. When I try to remove the click event and have the graph show directly up on the page
$( document ).ready(function() {
if($("#lesson11StudentScatterGraph").html() === "") {
let trace1 = {
x: [1, 5, 5, 8.5, 4, 7, 9, 1, 7],
y: [9, 6, 5, 2, 4, 2, 3, 7, 5],
mode: 'markers',
type: 'scatter'
};
let layout = {
autosize: true,
margin: {
l: 50,
r: 10,
b: 40,
t: 40,
pad: 5
},
title: 'Number of Cups of Coffee vs<br />Hours of Sleep',
xaxis: {
title: 'Number of Cups of Coffee',
showgrid: true,
zeroline: true,
showline: false,
range: [0, 10]
},
yaxis: {
title: 'Hours of Sleep',
showgrid: true,
zeroline: true,
showline: false,
range: [0, 10]
},
plot_bgcolor:"#f8f1f1",
paper_bgcolor:"#f8f1f1"
};
let data = [trace1];
let config = {
showSendToCloud: true,
displayModeBar: false, // this is the line that hides the bar
scrollZoom: false,
responsive: true
}
Plotly.newPlot('lesson11StudentScatterGraph', data, layout, config);
}
});
The graph will not load on the page. When I check the console, it does not show any errors. I am sure there is a simple method to do this but it escapes me at the moment.
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
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
}]
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]);
I am trying to use http://jsfiddle.net/kc11/y66uc1cq/ to load some data which I have included into a handsontable view. Although the JS is valid:
$(document).ready(function () {
function getCarData() {
return [
["Nissan", 2009, "black", "black"], ["Nissan", 2006, "blue", "blue"], ["Chrysler", 2004, "yellow", "black"], ["Volvo", 2012, "white", "gray"]];
}
var data = [
["", "Kia", "Nissan", "Toyota", "Honda"],
["2008", 10, 11, 12, 13],
["2009", 20, 11, 14, 13],
["2010", 30, 15, 12, 13]
];
$("#example1").handsontable({
data: data,
minRows: 5,
minCols: 6,
minSpareRows: 1,
currentRowClassName: 'currentRow',
currentColClassName: 'currentCol',
autoWrapRow: true,
rowHeaders: true,
colHeaders: true
});
$("#example1").handsontable('selectCell', 3, 3);
});
The load is not occurring. Why and how can I fix this?
Hard to test since all the references in the fiddle are broken, but try this:
var table = new Handsontable($("#example1"), {
data: data,
minRows: 5,
minCols: 6,
minSpareRows: 1,
currentRowClassName: 'currentRow',
currentColClassName: 'currentCol',
autoWrapRow: true,
rowHeaders: true,
colHeaders: true
});
table.render();
Source: http://handsontable.com/demo/understanding_reference.html