If you are looking for charting libraries, here is a nice comparison table listing all of the currently popular libraries. http://www.fusioncharts.com/javascript-charting-comparison/?utm_source=Competitor-Mailer&utm_medium=email&utm_content=Main-C2A&utm_campaign=GrownUps I wish they included d3.js as well.
Here is how to clear all filtering in datatable. function fnResetAllFilters() { var oSettings = oTable.fnSettings(); for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) { oSettings.aoPreSearchCols[ iCol ].sSearch = ''; } oTable.fnDraw(); } So to clear just one filter, do: function reset_filter_with_index(iCol){ var oSettings = oTable.fnSettings(); oSettings.aoPreSearchCols[ iCol ].sSearch = ''; oTable.fnDraw(); } Ref link: http://www.datatables.net/forums/discussion/997/fnfilter-how-to-reset-all-filters-without-multiple-requests./p1
qtip2 is very handy to show/hide additional information on websites. The qtip content is by default cached to minimize unnecessary fetching. However though, sometimes it’s desirable to fetch for new content every time the tooltip comes up. In that case, use the once : false attribute to force re-fetching of new content. $('#my_dom_element').qtip({ content: { text: 'loading...', ajax: { url: 'my_content.php', once: false // need to re-fetch every time }, title: { text: 'My title', button: true } }, position: { at: 'left center', // Position the tooltip above the link my: 'right bottom', viewport: $(window), // Keep the tooltip on-screen at all times effect: false // Disable positioning animation }, show: { event: 'mouseenter', solo: true // Only show one tooltip at a time }, hide: 'unfocus', style: { classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow', width: '800px' } });
For some reasons the default highcharts pie chart has no url links. Or at least that feature is not being demo’ed. See their example here: http://www.highcharts.com/demo/pie-basic. After tweaking the code for a while, here is the code that enables URL links in a pie chart. var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'my_chart_id', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'my_title' }, tooltip: { formatter: function() { var y = this.y; var p = Math.round(this.percentage*100)/100; return ''+ this.point.name +': ' + y + ' (' + p + '%)'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, showInLegend: true } }, series: [{ type: 'pie', name: 'overall', point: { events: { click: function(e) { //this.slice(); //console.log(e); location.href = e.point.url; e.preventDefault(); } } }, data: [ {name: 'Not Tested', color: '#FFA850', y: 87, url: 'http://my_site1.com'}, {name: 'Fail', color: '#FF2929', y: 2, url: 'http://my_site2.com'}, {name: 'Pass', color: '#31FF4F', y: 32, url: 'http://my_site3.com'} ] }] }); }); The part that enables the clicking is the new url key in data, and the event handling. ...
It took me a while to find this out. If you need to change the default max width of qTip2, here is how. First set up a new style class. .my_width_setting_class { max-width: 1200px; min-width: 0px; } Then in the qtip style attribute, insert our newly created css class. style: { classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow my_width_setting_class' } That will then override the default settings in jquery.qtip.css. ref: http://craigsworks.com/projects/qtip2/tutorials/styling/#dimensions ...
This is a proof-of-concept ARPG game written in javascript. The game is actually quite smooth. You probably won’t notice any lag from it, just like playing in a simulator. To play, your “Z” key is the A button, and your “X” key is the B button. The first time I played on Easy I got my “game over” in like 10 mins… the second time 5 mins on Hard… more than anything I appreciate the js programmer making this possible! ;) ...