Legend doesn't show all line's on line Rgraph - javascript

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.

Related

Display long labels in x-axis using Chartist

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.

Want to pad vertically between objects in d3 stacked bar

I have a d3 stacked column and for the way I'm doing this viz it makes sense to add a separation (effectively a white line) between each element in the stacked column. Is there an easy way to do this on the Y axis with padding? The other way I can think of would be to add tiny blocks in between each column element, but that seems tedious.
Thanks for any advice. PS I'm using d3 V4.
The answer that #danimal is giving would work, I think. However, in the end I went with "injecting" rows of empty rectangles. You can see the solution here: http://bl.ocks.org/mgoold/88f6f798dac245b3261ed1a543b04415 .
The only thing with doing it this way is that a y axis ceases to make sense. So I had to do left side call-outs for the volume amts instead.
HTH

How to render chart for 10,000+ records in EXT JS?

Currently I am facing issue while rendering chart for large data in EXT JS. Chart gets cut or overlapped.
For example, I have 500 names on x-axis to plot then chart displays only 15 to 20 of them and others get cut. According to my view there should be scroll bar to view whole chart rather cutting the legends. I have tried to found solution for having scroll bars for such large charts but I am not able to find it.
Any other way for viewing whole chart is also accepted.
One workaround I can think about is 'panzoom' interaction.
Please visit link given below to see an official example with 'panzoom'.
http://dev.sencha.com/extjs/5.1.0/examples/kitchensink/?charts=true#line-markers
With 'panzoom', you can zoom in to the chart and then scroll/pan. Zooming in to the chart would make the hidden coordinates visible.
It may look like this because you might have smaller space to render the chart as your data is too big. So you can try with 'pan zoom'. But I don't think so you will get a useful chart. It will still get junked.

How can I adjust the labels on a DC.js pie chart?

I have a DC.js pie chart with some really small values comparatively. I'm trying to adjust the labels so they aren't on the actual chart. I want them to be off preferably with lines drawn to the slices. (something like this http://www.telerik.com/help/aspnet-ajax/media/htmlchart-piechart-simple-example.png)
I'm can't find any examples of this with DC.js and the only thing close is this (Label outside arc (Pie chart) d3.js), with d3.js, but I'm a little confused as how to implement in dc.
Anything to point me in the right direction would be greatly appreciated.
I think currently you would have to suppress the built in titles with .renderTitle(false) and then implement the custom titles in a renderlet. You would reselect the slices and then apply pretty much the code in that other question. The data will already be attached to the slices.
The titles would appear a moment later, as that's how renderlets work, but perhaps that wouldn't be such a bad effect.
Of course, I haven't tried this, just a suggestion..

different symbols in a google charts scatter plot

I'm using the google charts library to make some interactive scatter plots. And I cannot find is whether you can have symbols other than circles as "markers" ? As far as I can see it was possible with the previous obsolete version of google charts. But is it impossible with the current one ?
Scatter chart "playground":
https://code.google.com/apis/ajax/playground/?type=visualization#scatter_chart
Currently (as of July, 2013) there is no way to do this within the chart options. You have a choice between circles and no markers, and that's it.
You could go through the code and change the SVG using javascript, changing the circles to rectangles, and manipulating the coordinates appropriately (or drawing paths, or whatever you'd like). That's really the only way to do it.
Edited to add:
Additionally, you could set a fill for the circles themselves using javascript, and make the fill any shape you'd like.
You can do it with the help of image charts. You can change the color and shape of the markers using this.Refer this link. An example for the different shape markers
Click here to see this. For more google charts related queries take a look at this jqfaq.com

Categories

Resources