I have a question for you that is tormenting me a lot.
Look at the code attached, I wish to MouseHover on one of the circles others change to climb as is now going on with the mouse "box_4A".
As you can see the code is extremely complex and not very intelligent ...
Do you know any shortcut? Or maybe I could say the right way : )
CodePen
$('.box_4A').hover(function() {
$(this).find('.circle').stop(true,true).toggleClass('generic_lv0', 500, 'easeInOutQuad');
setTimeout(function(){ $('.box_3A, .box_4B, .box_5B').find('.circle').stop(true,true).toggleClass('generic_lv1', 500, 'easeInOutQuad'); }, 50);
setTimeout(function(){ $('.box_2A, .box_3B, .box_4C').find('.circle').stop(true,true).toggleClass('generic_lv2', 500, 'easeInOutQuad'); }, 75);
setTimeout(function(){ $('.box_1A, .box_2B, .box_2C, .box_3C, .box_4D, .box_5D').find('.circle').stop(true,true).toggleClass('generic_lv3', 500, 'easeInOutQuad'); }, 100);
setTimeout(function(){ $('.box_1B, .box_1C, .box_1D, .box_2D, .box_3D, .box_1E, .box_2E, .box_3E, .box_4E').find('.circle').stop(true,true).toggleClass('generic_lv4', 500, 'easeInOutQuad'); }, 125);
});
Related
This is a weird one.
I'm using datatables v1.10.19 with jQuery 3.3.1 and Bootstrap 3.3.7
My datatables grid is configured to display 1000 records (but you can change it to 2500, 5000 and "all").
I've only got about 60 records in my database.
It is using Server-Side processing to retrieve data.
When the grid loads, the pager displays 5 buttons plus an ellipses (as if there is even more).
And even weirder, if I change the drop-down to display "all" records, it acts as I would expect i.e. the pager has 1 page button.
The payloads are pretty much identical:
{
"data": {
"draw": 8,
"recordsTotal": 86,
"recordsFiltered": 66,
"data": [rows of data here]
},
"outcome": {
"opResult": "Success",
"message": ""
}
}
When you click on page 2, it does successfully retrieve a payload with 0 rows.
But there shouldn't be a page 2 available on the pager.
The config object for the datatable looks like this:
eventsSvr.buildConfig = function (url) {
return {
"processing": true,
"serverSide": true,
//"paging": true,
"ajax": {
url: url,
type: ajax.requestPOST,
dataSrc: 'data.data' // the path in the JSON structure to the array which will be the rows.
},
"order": [[1, "asc"]],
"lengthMenu": [[1000, 2500, 5000, -1], [1000, 2500, 5000, "All"]],
"initComplete": function (settings, json) {
eventsSvr.searchTextSpan.text('Search').removeClass('search-is-on');
},
"columns": eventsSvr.grid.columns,
"columnDefs": eventsSvr.grid.columnDefs,
dom: 'ltp'
};
I do have a bunch of custom searches on the page, so I've had to write a lot of code like this:
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var picker3 = $(eventsSvr.datePickerInputs[0]).data(icapp.kendoKey);
var picker4 = $(eventsSvr.datePickerInputs[1]).data(icapp.kendoKey);
var rowStartDate = moment(data[3], icapp.date.momentParseFormat).toDate();
var rowEndDate = moment(data[4], icapp.date.momentParseFormat).toDate();
... etc.
}
);
But the odd thing is the different behavior as between "All" records vs 1000 records.
As described above, select "All" records works (resulting in just 1 page button), but none of the other paging sizes work (i.e. 1000, 2500, 5000). The data for the 1 page does return, but I get 5 page buttons and an ellipses.
Any ideas why this would be happening?
When using server-side processing mode DataTables expects draw, recordsTotal and recordsFiltered to be root-level elements. Consider changing your repsonse to the following and you can remove dataSrc option.
{
"draw": 8,
"recordsTotal": 86,
"recordsFiltered": 66,
"data": [rows of data here],
"outcome": {
"opResult": "Success",
"message": ""
}
}
Alternatively you can manipulate the response before passing it to DataTables using function supplied as value for dataSrc option, but I would recommend keep things according to expected format for more readable code.
I'm importing data from a Sybase database into ChartJS in VueJs2. I'm using the vue-chart module
I push the timestamps into an array as Unix times using
this.firstIn(new Date(tnaDetails[0].Sunday_FirstIn).getTime())
So:
[Sunday_FirstIn:2010-01-17 08:00:00.0]
Would convert to
1263708000000
Which I then add to the dataset:
datasets: [{
type: 'line',
label: "First In",
backgroundColor: "green",
data: this.firstIn,
fill: false
}
]
However, when the data is plotted on the graph, the values are changed. The above Unit Timestamp becomes
1263700000000
Which obviously returns the wrong time. I'm not doing anything to the ticks in the options.
Below is a result of the numbers being changed. The console has the original data:
Is there a setting that alters the precision/values of numbers in ChartJS that I'm not aware of?
Thanks.
Seth
For anyone who has any similar problem in future, I patched together a few solutions I found.
Firstly, from here Unix Timestamp in JavaScript, I wrote the method:
getTimeString: function(dateString) {
var hours = new Date(dateString).getHours();
var mins = new Date(dateString).getMinutes();
return Math.round((new Date("1970-02-01 " + hours + ":" + mins)).getTime());
}
The important part here is to make sure you have the same day. Not doing this will cause the ChartJS graph to plot the times in different places on the y-axis, even if the hours are the same.
Then from this StackOverFlow question and the related plunker, in the chart options, I have:
{
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
position: 'left',
ticks: {
callback: value => {
let date = moment(value);
if (date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) {
return null;
}
return date.format('H:mm');
},
stepSize: 3.6e+6
}
}]
}, //end scales
tooltips: {
callbacks: {
label: function(toolTipItem, data) {
let date = moment(toolTipItem.yLabel);
if (date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) {
return null;
}
return date.format('H:mm');
}
}
}
}
Pay attention to the callbacks. They will format the time, calculating the difference from a set time to the time you need plotted. In the first function, you could really use any day, it wouldn't matter, as long as it's the same day. The stepSize will display hourly intervals on the yAxis.
I used this exmaple http://dygraphs.com/tests/smooth-plots.html to draw smooth lines. When I anable the smoothing by plotter: smoothPlotter small dots at data points disappear. I have set drawPoints: true. Dot is displayed when mouse is on the curve.
How can I enable small dots at data points ( http://dygraphs.com/options.html#drawPoints ) and still use smoothing?
I have not found a way to enable pointdrawing. But you can make a second series with the same data and draw only the points, not the lines. Like so:
new Dygraph(document.getElementById('graph'),
functionData,
{
series: {
Straight: {
color: 'red',
strokeWidth: 0,
drawPoints: true,
pointSize: 7
},
Smoothed: {
plotter: smoothPlotter,
color: 'red',
strokeWidth: 2
}
},
});
http://jsfiddle.net/wLxs4ju1/
I need to show the Display number of records in a page by using datatables plugin.
I have included the following js files:
js/jquery.dataTables.js
js/ColVis.js
js/ColumnFilterWidgets.js
js/extras/TableTools/media/js/ZeroClipboard.js
js/media/js/jquery.dataTables.js
js/extras/TableTools/media/js/TableTools.js
and code is like:
oTable = $('#data-table').dataTable( {
"sDom": 'CT<"clear">firtlip',
"oTableTools": {
"sSwfPath": basePath+"/js/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [ {"sExtends": "csv","sFileName" : curpath+".csv","sButtonText": "Save to CSV","mColumns": "visible"} ]
},
"aaSorting": [[0, "desc"]],
"bAutoWidth":false,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"iDisplayLength": 10,
'sPaginationType': 'full_numbers'
} );
But the select box for for selecting the number of records is not displaying.
Please guide me where is the issue.
Thanks in advance.
If you change your css then automatically solve the issue. Just change "display:none" to "display:block" for data-table_length class in css.
I am using Sencha Touch charts 1.0.0 for my project. I would like to add values on each point in my line chart (as in image). I tried the same approach in this question for column chart, but it didn't work out.
I had the same problem with you. But i find a solution instead for that. You can add marker at each node of line and when you click on marker a popup will show detail information as you want. This's my code may help you :
-Add marker in cofig of series :
type: 'line',
title: 'Clickeds : ' + total[4] + ' ( ' + Math.round(arrInfo[4]) + '% )',
highlightCfg: { scale : 0.7 },
xField: 'Date', yField: 'Clks',
style : {
stroke: 'rgb(50, 185, 150)',
miterLimit : 3,
lineCap: 'miter',
lineWidth: 2
}
,
marker:{
type: 'image',
src: 'resources/images/square.png',
width: 24,
height: 24,
x: -12,
y: -12,
scale: 0.5,
fx: {
duration: 200
}
}
Handle event when you click on node, you add listeners to config of chart : `listeners: {
itemtap: function( series, item, event, eOpts ){
//handle your code here.
}`
Regards,
(Sorry for bad english.)