jqPlot graph in accordion - javascript

I want to plot a graph within a jQuery accordion but it causes the graph to chopped and the scales to be displayed. Anyone got a fix for this?

As explained on jqPlot's Tab and Accordion UI Widgets page, jqPlot needs to know the size of the chart when it's plotted, and it can't do that if the chart is hidden by an accordion or tab. The solution is to either specify the chart's dimensions in an alternate fashion or to call replot when the accordion is expanded. See Tab and Accordion UI Widgets for full details and example code.

Everything in the accordion is hidden until it is expanded, which means it is dimensionless. You need to wait until the portion of the DOM your accordion chart is contained in is shown, and then plot the graph. If you look at the ui.html example included in the latest release of jqPlot, you'll see this:
Here, the plot is created at a div named chart1, which is inside a hidden jQuery UI Tab:
plot1 = $.jqplot('chart1', [l1, l2, l3], {
title: "I was hidden",
lengend:{show:true},
series:[{},{yaxis:'y2axis'}, {yaxis:'y3axis'}],
cursor:{show:true, zoom:true},
axesDefaults:{useSeriesColor:true}
});
And then an event handler is registered with the 'tabsshow' event fired by the jQUery UI Tab. In your case, you'll want to register a handler for the 'accordionchange' event fired by the jQuery UI Accordion widget upon completion of changing the accordion's state. Here's how you bind to the Tab's 'tabsshow' event for the above code example:
$('#tabs').bind('tabsshow', function(event, ui) {
if (ui.index == 1 && plot1._drawCount == 0) {
plot1.replot();
}
else if (ui.index == 2 && plot2._drawCount == 0) {
plot2.replot();
}
});
There's also a working example in the same ui.html file with an accordion. You can find the example in the latest release from bitbucket here: jqplot.1.0.0a_r701
Also, make sure that you don't instantiate multiple jqPlot objects on the same div, or you'll have plots sitting on top of one another and overload the browser.

Hidden elements, like a tab or accordion element have no size, so you may want to use a technique mentioned in jqplot's documentation, ie.:
provide dimensions of the graph in an alternative way (eg. data-height and data-width attributes) AND
call replot() when the graph gets displayed.
However, the example in the documentation uses for 2. an event name which can be incorrect with your version of jquery-ui. For example, if you use Bootstrap 3, the proper event has a different name: "shown.bs.tab".
Links:
http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html
http://getbootstrap.com/javascript/#tabs-events

Related

Highchart - add "onclick event" for total value stackLabel

This question is a follow up to In high chart how to add event for label click
Is there a way to make the total sum number (ie. 10,9, 11, 11, 8)
as shown at http://jsfiddle.net/t07ok5v3/5/ clickable? (ie. add the same functionality to the "9" as the "Oranges" label). What if there is only one number per column at the top representing the sum?
The following code was the code given in the answer to add the label click.
chart.xAxis[0].labelGroup.element.childNodes.forEach(function(label)
{
label.style.cursor = "pointer";
label.onclick = function(){
alert('You clicked on '+this.textContent);
}
}
UPDATE: I have made the stackLabels all appear to be clickable (they now have cursor "pointer', see jsfiddle link below). Now I just need to add the actual functionality of the click event to the stackLabel. Can someone help me with this?
http://jsfiddle.net/w291/gc1fdd1v/
Note: I don't have access to jquery in the development environment I am using.
UPDATE 2: The answer to this other question seems to solve my problem [so far] (I will update the post with my solution if it works): Click event on clicking on the graph
For this purpose, you can use Custom Events plugin. It will allow you to add custom events on various elements like axis labels, legend, etc.
Plugin Reference:
https://www.highcharts.com/plugin-registry/single/15/Custom-Events
Example:
http://jsfiddle.net/trmks8p2/

Semantic UI - Following menu example

I'm new to Semantic UI and I want to implement following menu as seen in Semantic UI's documentation on right side. I want to implement this functionallity to fixed top menu - so when id of header element is reached, active element in menu should be changed. I was looking at code of docs.js where this is implemented for documentation's site, but this code is pretty complex if you are using Semantic UI for the first time. I have those classes for my menu: ui large top fixed hidden menu
Is there already built-in following menu (probably not since it's not mentioned in docs?) or I add it with jQuery?
semantic-ui only gives you the styling. Once you click on a menu item, it is up to you to update the item's active status.
This is how we have it implemented in our code -
const menuNav = $('.ui.menu.menu-component .item');
menuNav.on('click', function (item) {
menuNav.removeClass('active');
$(this).addClass('active');
});
The other thing to remember is that you need to check the URL on page load so that you can set the appropriate item label to active.

tinyMCE setting not found (2 parts)

Question 1: I am wokring with tiny MCE 4 and have this bit of code
editor.addMenuItem("item1", {
text: "Name",
onclick: function() {
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
As you can see I am passing in a setting object where the fields text and onclick is set. Also if you look at the example here it uses a setting object with the field text, context, and onclick. But when I look at the documentation for settings attribute I do not see context, or onclick listed there. I looks at the menu and button also and could see anything there. Is there a more complete documentation somewhere?
Question 2: The reason I am asking this is because I want to see if there is a settings somewhere, that I can use to change the menus, for example, in the fiddle mention here instead of additional data displaying list box, I want the menu item used to display list box to be replaces with a textbox/dropdown.
In the example that you mentioned it is already explained that the context is where to you put your new menu item in the existing menu (Example configuration of a menu here). So if you have an context "tools", you can add you new menu item to "tools".
editor.addMenuItem("item1", {
text: "YourItemName",
context: "tools",
onclick: function() {
//The function of your menu item insert some content at the cursor position, is that corrent?
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
For your first question: No, at the moment the documentation of tinyMCE 4.x is still not complete. To learn more about how plugins (menus and buttons incl.) work, I downloaded the complete source code. I looked at some plugins (e.g. link plugin) and tried to understand the code there. At the moment the fastest way to learn some not-well-documented stuff.
For your second question: If you want to edit existing menus (or plugins), you have to download the dev-code and look the sources.

YUI3 Scroll-Datatables in TabView don't render

I have some tabs in YUI3 Tabview. Each tab contains a couple of YUI3 Scrollable Datatables.
The datatables are created but are not rendered. All I can see is a part of 1st column of each datatable.
Howeveer, if I resize the browser window, I can see the tables rendered. I suspect that I have to somehow re-render the tables each time I switch to a different tab. How can I do this?
The datatables are created independent of Tabs/Tabview.
Any help would be greatly appreciated.
Yes, scrolling DataTables need to be in a visible container when rendered because they need to calculate the size of some elements of the table, which they can't do if they are under display: none in a hidden tab. The way to avoid this is to wait until the tab that will hold the datatable is shown. You can do that by listening to the "after" stage of the selectedChange event of the Tab. For example:
tabview.item(1).after('selectedChange', function (e) {
if (e.newVal) {
table.render();
}
});
Here's a working example: http://jsfiddle.net/juandopazo/H2ASR/2/

Top and Bottom Pagination Sync

I have some weird behavior with jQuery paginate plug-in (jPaginate). I need to have top and bottom pagination and I want to sync them - whenever one is clicked, the second one should be properly changed as well.
I have two divs with number_pagination class and they are initialized the same way:
$(".number_pagination").paginate(options);
Now, here where it gets weird. Whenever I click on the top div, everything works as supposed to, but if I click on the bottom one, it changes the bottom one and does the pagination, but the top one stays the same. I cannot figure out why that could be happening.
Here's the onChange function that is supposed to change both pagination divs. Note the jQuery.fn.draw function that is a part of jPaginate. This is where it applies classes and style.
var opts=jQuery.extend({},jQuery.fn.paginate.defaults,options);
var o=jQuery.meta?jQuery.extend({},opts,jQuery(this).data()):opts;
jQuery(".number_pagination").each(function(){
var obj=jQuery(this);
jQuery.fn.draw(o,obj,page);
});
Found another solution that works perfectly.
It may even work for other pagination plug-ins. It checks the class that has the currently selected page number and checks if the content matches the selected NOW page, and if it doesn't, it looks for siblings that have the correctly selected page and triggers the click event.
jQuery(".jPag-current").each(function(){
if(jQuery(this).html() != page){
jQuery(this).parent().siblings().children().each(function(){
if(jQuery(this).html() == page){
jQuery(this).trigger("click");
}
});
}
});
You should probably look at using the onChange event to redraw the other pager that didn't incur the change

Categories