highchart inside facebox does not show up values - javascript

I am using highchart inside facebox to draw a chart. I can see the x-axis, y-axis, but not the values.. If I select the entire chart by dragging mouse, I can see the values. Which means that for some reason the chart is not being drawn. What could be the problem ?
Also I have a facebook login inside facebox, I can see the login button, but it does not work. Whereas similar login button on the main page works fine.
I tried my highchart code in jsfiddle, it works fine.
Here is how am I using facebox,
comp.append(hTag);
$('#statLeftRightId').append(comp);
jQuery.facebox({ div: '#statLeftRightId' });

I had a similar problem with HighCharts 2.2.1 and jQuery 1.7.1. I found that using jQuery 1.6.1 drew the charts.
As the answer to this thread indicates, there are some problems with jQuery 1.7.1. So I doubt this is a facebox problem.

Related

Vue Apexchart timeline: dataLabel still visible even items aren't visible in the chart (time has passed or not met)

vuejs
apexcharts
Hi, I have an issue and not sure if it was a bug or I have missed for some configuration. Currently I'm flowing the Timeline Charts here. I have to enable for the label, and you can see when the time of a task have passed, or not met (by dragging the chart), but the label of hide item is still visible and be stacked with visible label
Issue example 1
Issue example 1
Any body got the same issues yet and how to resolve it? I don't think it's a bug because obiviously no one expected this behavior, right?
I have tried for most of the configuration in the dataLabels but nothing kind related to this. Feel free to drag the chart to see the issue clearly. The code is basically a demo from Apexchart demo, not modify much. You could easily download the original code here: https://apexcharts.com/vue-chart-demos/
Demo for the issue: jsfiddle.net/xhieu2206/quvzaxk9
P/s: after checking for a jsfiddle of the same usecase in React, it work normally without any configuration, so seem like it's a bug from Vue Apexchart team, please correct me if I was wrong (hopefully ...) ...
Demo in react: jsfiddle.net/xhieu2206/3fzb60ar/2/
Editted: the issue happened with react too:
demo: jsfiddle.net/xhieu2206/3fzb60ar/2
enter image description here

Rendering D3 Collapsible tree view inside a Bootbox popup?

I have a D3 collapsible tree view of a distribution, and I have a working code for it. I want to add it to a webpage, where the view should be visible as a popup on click of a button. I have been trying to use bootbox for creating the popup box. However, I am unable to understand how can I do this. I have tried bootbox.prompt and bootbox.dialog and passed my D3 tree code, but that doesn't work.
Can you suggest any other way to do it.
I have a working understanding of D3, and little to none knowledge of JS. Thanks!

c3.js chart data is loaded but graph does not render while page load and refresh

I tried some examples of c3.js Followed this link. And i got success in that. But i have one problem when i'm trying to load graph first time in any browser, it doesn't show me the graph.
And if i reload page once or twice it shows graph but data is loaded.
I'm using latest version 0.6.1 library in my project, even though chart not shown.
I googled quite a lot but i couldn't found any correct solution.
If anything is there to fix this issue suggest me. Thanks in advance.

Bootstrap tooltip incorrect positioning

I've just recently started using bootstrap and am working on part of my Christmas present to my girlfriend - a puzzle for her to figure out what her real present is (tickets to Hamilton in London).
However, I've run into an issue with the bootstrap tooltips. I'm expecting to see a tooltip next to the span word that is clicked, on hover or click. But for some reason the tool tip is up in the top-left of the body.
Could anyone help me out here?
Here is a pen that shows the error:
Link to CodePen
I'm using the suggested example of initializing with:
$("[data-toggle='tooltip']").tooltip();
Try using the same version of Bootstrap. Either go for v3 or v4 completely. The problem should be resolved once you use compatible files.

How to create tabs using jquery mobile?

I have a Flot graph which i need to keep in one of the tabs.
Here is the Flot Graph jsfiddle code
How to create tabs and place this graph in one of it using jquery mobile?
Probably everything you need to know is here.
Essentially, just use jQueryMobile pages and attach an event to the pageshow for the page with teh graph in it, and have that plot your graph.
Have a look at jQueryMobile Splitview plugin.
Or maybe jQueryMobile native navbars?

Categories

Resources