is it possible to put images as axis ticks using d3.js javascript library?
I am trying to visualize a simple bar graph (done!) but in the x-axis I need to show a different image for each bar.
It is possible. The way to think about this is using d3 to position images on a page.
If you have each image in a div with it's own id then you can use d3 to select and position those divs. I found this tutorial very helpful.
Related
I am using Chartist and svgdom in Node.js to generate a line chart. But the label names are too long and they run over each other.
This is how it looks like:
I saw #375 issue in Chartist and they tried to tilt the labels using CSS, but i think rotating the X-Y axes is a better idea, if possible.
What can i do here?
I'm not sure about flipping it, but as another option, you could make the graph a larger fixed width. Then make it's parent container smaller(screenwidth) and make the entire chart scroll-able horizontally.
I am fairly new to JavaScript, let alone charting. I'd appreciate any help in accomplishing the following. I have browsed many JavaScript charting libraries and examples but have not seen any that solve my problem:
I need to create dynamic stacked bar charts as shown in the attached picture. Horizontal axis is time axis. The chart should scroll to left with time along with time-markings on x-axis. Each horizontal stacked bar is for a different item on Y-axis. There will be many items on y axis. Each section of bar will have text as shown. The information about each section and its text is received dynamically.
Thank you!
See the desired end result in this image
I have found the Google Charts to be very, very easy to use (https://developers.google.com/chart/?hl=en)
However, in order to have dynamic content, you'll need to have some data source to read from so that you can use something like ajax to constantly ping it for updated data. The Google Charts library will give you a good starting point but it won't be dynamic. You'll have to program that portion but Google Charts is very great in providing you with the basic pie, graph, bar, etc.. 'chart templates' so switching between a bar and a pie chart is super easy.
I'm using Rgraph to make a line graph with multiple line's on it. The problem i'm having is that some graphs i'm making can have over 30 lines on them which means the legend doesn't show all the lines displayed on the graph.
I've looked through the properties of the Rgraph but can't find something that would help me. Is there a way that I can display all this information on the legend in some way, ie a scrollbar.
Cheers
You could use the HTML key. That isn't constrained by the size of the canvas. Or make your own labels with HTML.
Is there a way to change the height of a 3D Pie Chart? We need to show users differences between a few of charts. Some must be larger in height (they must be rather like pillars then pies), some smaller. In other words, I want the pie itself tot be taller (the y-component of the pie), not the whole chart.
Here's the documentation and examples of the pie: https://developers.google.com/chart/interactive/docs/gallery/piechart#3D
If it's not possible, maybe there are other good alternatives of 3D-pie charts?
I'd appreciate links to tutorials of how to draw a 3D-pie chart (using SVG or Canvas) too.
The code is right there on the page you linked!?
Here: http://jsbin.com/jibucebe/1/ 3d piechart with different height..
I'm trying to link two D3 plots so that selecting part of the histogram on the right, causes a certain scatter plot to display on the left.
This is my attempt.
My current question is why the right plot isn't rendering, which I think goes back to how to create and refer to multiple SVG tags in d3.
D3 has SVG controls for this type of situation. What you are looking for is a brush with context.
Here are the API docs:
https://github.com/mbostock/d3/wiki/SVG-Controls
And here are two great examples:
http://bl.ocks.org/mbostock/4063663
http://bl.ocks.org/mbostock/1667367