I'm currently working on a Polar Chart that sits on top of the Google Map API. When you click a segment it zooms in, the polar chart disappears, and it shows the individual points within that segment. Here's a preview of it so far:
Everything works as expected from a technical point of view, I just need to make a couple of modifications to make it more useable:
1) Is it possible to get it so a user can click anywhere within the segment to trigger the next stage. At the moment you have to click the blue areas meaning it's quite tricky to click the smaller portions, especially when they're overlaid with labels.
2) In the example above, you can see the y-axis labels are all a bit squashed when nearer the centre. Ideally they'd be centred within the middle of the segment. Is it possible to position them in the centre of each segment?
Any help appreciated on this. I've gone through pretty much every option in the documentation so am suspecting I need to go one step further and maybe look at modifying the DOM directly.
Thanks in advance :)
Related
I've got a assignment where I need to create a 3x3 grid of rectangles, where a person can click one of those rectangles and the page zooms in on that rectangle, so it's now screen-filling.
I've got that working in Angular 6 by just using their animation system and doing transform: scale(3) and a translateX/translateY, depending on which one of the rectangles has been clicked. So, no problem there. (see the gif below)
However, I also need to create 2 or 3 rectangles, that are shown before the grid is shown. So, when the user visits the page, he first sees 1 rectangle, filling the screen, clicks on "next", and then sees the grid.
Basically, I want to have a "top-down" view of my DOM, being able to zoom one of the rectangles or zoom out and see the grid.
I was thinking about ditching the DOM and using three.js or pixi.js, but since I'm on a really tight deadline, I thought about coming here and asking you guru's what you think is best.
So, what's the best way to create a whole bunch of rectangles and be able to zoom in, out, and move around between them? Thanks a lot in advance!
Please, if you need more info, leave a comment :)
I'm using Google Charts line chart and I'm looking to create the effect where focus is put on the point that corresponds to the horizontal position of the cursor.
I'm currently using the line chart with only 3 options set: Title, Width and Height. At the moment, the user must place their cursor directly on top of the data point which sits on the line that has been drawn in order to see the tooltip/data for that point.
I'm wanting to give the user an experience more like that found here:
https://au.finance.yahoo.com/echarts?s=BHP.AX#symbol=BHP.AX;range=1d
...where the user does not have to place their cursor ON the line to focus the data point, they simply need to move their cursor horizontally and the point that corresponds to the cursor's position on the x-axis is focused.
Has anyone been able to achieve this, either through options settings or custom code?
Cheers
There is a chart option that does what I believe you are looking for:
focusTarget: 'category'
If that alone doesn't work, check the tooltip.trigger option.
I'm trying to develop a very simple sketch program that can draw the dimensions of buildings. For example, if I want to draw a 24'x24' house, it would simply be a square with each side representing 24'. I've read that SVG/Javascript may be ideal, but I'm looking for some specific guidance.
Here is a link to a 30 second video showing exactly what I need: https://vid.me/96Mz
I'm able to draw those shapes by clicking in one spot and then moving the mouse to another location to draw a wall, then click again to produce a third corner, and then a final time to close the shape. I'd need the area to be calculated too.Preferably the dimensions of each side would be able to be shown as labels.
Here's an example of an image I'd like to be possible:
Click Here
Can you think of anything to help me build a simple version? Any feedback is huge, thanks a lot.
I have been working on this game for a few days now. One of the last problems I am facing is this:
When the player moves out of the border moving area (see picture below) the "line" is drawn behind him - he creates some kind of a wall (see directed arrows on the picture).
After this, he is able to move on this wall, BUT you cannot see the player (small red rectangle), until he moves right (in this case) to the white area.
You can see that the player can be seen when he is positioned on the gray border walls, but these walls were created before the player was created.
How should I change the rendering here to be able to see the player on the area that was drawn after the player? Do I need to redraw everything to be able to get it the way I need it?
Any suggestions highly appreciated. If I was not clear enough, let me know so I can explain it better.
Thanks
EasleJs will by default consider the objects just pile up in the order you provide them.
Yet, you can use AddChildAt to control the 'z' of your objects and avoid the issue.
Since the draw order is something that has to be handle at the stage, (not child), level, just have a look at the official documentation on Stage :
http://createjs.com/Docs/EaselJS/classes/Stage.html
Please first take a look on this picture : https://docs.google.com/file/d/0By25CEM_KEOiYzdYaWVicnp6Zm8/edit?usp=sharing
Now i want to make something like that but i want to put d3.js elements on a slider like that instead of images like a rectange, circle, square, triangle so that user can move them with arrow buttons shown in the image.
I just wanted to know if it is possible with d3.js and if Yes, please tell me how or from where to start?
You could make something like that using D3.
One way you could do it is to draw the tiles as rectangles using SVG and then have a clip path that hides the tiles that are outside of the frame of what you want to see. The left and right arrows would update the xScale domain which would slide the tiles left and right. And, you can register click events on the rect elements to create links on the tiles.
See this for some ideas on how to start: http://bl.ocks.org/mbostock/1667367
If you aren't already somewhat familiar with d3, you should probably start with a basic tutorial like: http://mbostock.github.io/d3/tutorial/bar-1.html before you dive into the deep end.