I am currently experiencing a problem using the dChart widget addon (wrapper for jqPlot) in Vaadin v7.5.2. Here is a snippet of the code that is giving me a headache:
ComboBox comboBox = new ComboBox();
DCharts chart = new DCharts();
VerticalLayout content = new VerticalLayout();
content.addComponent(comboBox);
content.addComponent(chart);
content.setExpandRatio(chart, 1.0f);
setContent(content);
chart.setDataSeries(dataSeries).setOptions(options).show();
The problem is that when I use setExpandRatio, the chart is overflowing from the container when the page is loaded. Here is a picture to illustrate:
When I use web developer tools to hide the ComboBox and remove the margins, the plot looks OK. So it seems the plot gets drawn before the expand ratio is set, as if it doens't know the ComboBox is there.
However after selecting another item from the ComboBox (which loads another DataSeries), the chart is drawn within the expected boundaries and does not overflow. Also, when not setting an expand ratio or without adding the ComboBox, everything works as it should.
Has anyone ever experienced similar issues, or has any idea what I could do to fix this? Any help is of course greatly appreciated!
I know this is not an ideal solution, but I somehow managed to solve my problem by using an AbsoluteLayout, and drawing the plot using top: 40px. After that I add the ComboBox to the layout. That way the plot always gets drawn on the correct position.
Just leaving this here as a temporary solution, so if anyone has a better one please do not hesitate!
Related
I'm working on a class project at the moment and I'm having some trouble with the front-end part of it.
What I'm trying to do is implement a grid of hexagonal like shapes (I'm using this example by web-tiki), that works exactly as I want when resizing the screen.
I want to put this grid in a carousel-like div, that adds a page with the same number of items when resizing, instead of stacking them underneath, thus taking up more space downwards.
I've been through a lot of research, but none of the examples given seemed to fit my case. Can anybody give me an insight on how to do that?
Edit: Based on Rustyjim's comment, I actually edited the carousel's js file to fit my needs, so consider the issue solved. Thanks for the responses!
I did a search and could not find an exact answer and I'm a bit of a newbie with ChartJS.
Right now I've got a chart that draws a vertical line on top of a line using an added plugin to ChartJS. My thought now is that I'm looking to make it so that the tooltip's value displays elsewhere not on the canvas. Pretty much I'm trying to recreate a Robinhood like experience.
I have the line and tracking already created. My only issue is that I want to have some text that displays the tooltip value and changes for each point. The red circle is what I'm looking to simulate for the tooltip. Instead of having it appear at the point, it should be fixed at a location and of course change values depending on the point.
I think I've read somewhere there is a method that can be used for ChartJS called getPointsAtEvent, but I'm not exactly sure how to properly use this, but if someone could help me, I'd be really grateful.
I got it to work out using customToolTips and using the tooltip.dataPoints.length. One issue I had when going through this though was that an error appears in the console when you go out of the canvas area, but doesn't stop anything from working.
I'm not exactly how to fix this one, but if anyone has encountered it, please let me know:
(http://localhost:3000/Chart.js:10917:4)
dashboard:178 Uncaught TypeError: Cannot read property 'style' of null
at ChartElement.customTooltips (dashboard:178)
at ChartElement.update (Chart.js:8660)
at ChartElement.handleEvent (Chart.js:8952)
at Chart.eventHandler (Chart.js:4679)
at listener (Chart.js:4609)
at HTMLCanvasElement.proxies.(anonymous)
I've been working on making a map related visualisation in D3 for a site that for historical reasons is stuck using some old versions of jQuery, and I've come across a weird bug when implementing drag behaviour on the map.
I've extracted the D3 code, and put it onto a gist listed below, and been able to replicate the strange behaviour, which you can trigger by:
Try loading the page below
Clicking on a country
Trying to select some text
I can't seem to select text after I've zoomed into a country, and I suspect it's down to line 130 in the d3_map.js file
The problem gist
The gist is here:
https://gist.github.com/mrchrisadams/89d053977513e6042adf
The rendered gist on http://bl.ocks.org, is here:
http://bl.ocks.org/mrchrisadams/89d053977513e6042adf
On the strange mismatch of javascript libraries
It's strange to see such an old version of jQuery, I know. I'm unable to change it without breaking other functinality on the site, which is why we're stuck with the old library.
Why is this happening, and how do I reinstate normal text selection again?
I'm utterly stumped as to why triggering a zoom knocks out the ability to select text, and I'd welcome any pointers, because I'm somewhat at a loss now.
Oh well, fingers crossed...
I want to implement highcharts into my application.
Example:
http://jsfiddle.net/gh/get/jquery/1.6/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick/
I want to remove the zoom controls (like 1m, 3m, 6m, YTD, 1y, All) from the chart and place them out of the container div. But i don't want those controls inside the chart. I want to place those controls at the top of the page.
Please can any one help me to solve this issue.
Thanks in advance
The short answer is that it is possible to do what you are looking. You will simply need to make use of the built-in functions of the API as one of the developers mentioned here:
http://highslide.com/forum/viewtopic.php?f=9&t=10915&p=49390&hilit=external+controls#p49463
Basically you make a chart w/out the actual controls and then create the necessary code to manipulate the content of the chart accordingly.
So, recently I have been trying to build a user interface form builder that is almost entirely drag and drop. Kind of like Dreamweaver or visual studios I suppose. You guys can see it for yourselves HERE! I am trying to get a right-click menu thing going, however upon getting this working, I realized that it really conflicted with both the draggable and resizable methods. I don't have to right click at all, however when I go to resize or drag, it won't let me stop it. My cursor gets stuck either resizing or dragging, and requires vigorous clicking and shaking to free it. So, I'm assuming that I need a different plugin. Does anybody know of a stress free simple right-click menu that is hopefully compatible with jquery ui? I've tried google but most of them are simply a different version of the one I've already been using.
My second question is much more vague. As I previously mentioned, I'm trying to make a form builder. I'm wondering what the best way to go about this is as I feel sort of lost. My biggest problems right now are figuring out how I'm going to parse everything into code and export it. Does anybody know of anyone else who has attempted this or something similar? Is there any sort of guide?
I know the second questions has potential to be rather annoying, so feel free to only focus on the first one. Any help is appreciated, and I thank everybody who helps me.
EDIT: Just realized that you guys may not know how to use the builder. So far, all you can do is drag panels out onto the building space, and then drag tables within the panels. You can resize the building space, and panels vertically, and you can resize tables both vertically and horizontally. You can move panels and tables within their parent elements. Right click a panel or table for the contextmenu.
EDIT: So I think I found a context menu that will suffice, here it is. So, I guess that only leaves giving me advice on how to go about constructing this form builder.