I' have an already made a Stacked/Group multi bar chart with NVD3 which is working great. I need to add a grey background to some of the places of the graphic to inform something to the user.
Does anybody know how to do this?
Thanks!
If I understand correctly you don't want a background for the whole chart. In this case you can always use d3's own insert method selection.insert(name, before) (see the documentation at https://github.com/mbostock/d3/wiki/Selections#wiki-insert ) to display an svg object at a certain in front / behind certain elements...(I guess it would be behind all the groups from you animation basically).
Related
I have lots of svg element containing each one a line chart. I'd like to display these charts at groups of four. If I understand well from the documentation, it'd be better to use a grid for this purpose since I can select position I want (single box of the grid) for a specific graph. Is it true, or is there another better way to do this?
NB: charts are built each one from different datasets and using d3.js and so javascript.
Thank you so much for the help.
If it's possible, I'd like you to show me a code snippet just to understand better.
Thank you again.
I'am trying to create circle-packing chart like that
https://bl.ocks.org/mbostock/4063530
But I also want to create some relation between data, to show how data binds to each other, so I need to add some code to change example above to make it like on this image: Circle chart with relational links
So the question is: is it possible to add relational between children in array to reach desired behavior and change Circle-chart layout to Linked Circle chart layout?
P.S. I'm new in d3.js so I don't have deep knowledge in this field, so It would be great if you provide me some examples how to reach that
I've solved my problem my problem by myself, The solution is that to draw arrows by hands without d3 layout tools, I hope it could be useful for someone:
Circle pack with relation arrows
I am trying to learn d3.js (with no JavaScript background) so I created a simple scatter plot.
Now, I am looking for how to render that graph with random data, each time the user click on the Next button.
In the link above, there is what I tried so far.
I know it's a very newbie question and there is thousands of example but I am looking for an explained solution (not just code). Thanks
PS: Please change the external ressource to this if the graphs won't show up.
I'm replacing DotNet Charting charts with KendoUI. I need to be able to put a multiple line label on a line chart. See the image below with the red circle on the label. Any suggestions would be greatly appreciated.
See my current chart and the DotNet Cart I need to replace:
Short answer: you can't.
Long answer: You can't, but you there is a bug in Kendo that will let you... sort of.
Kendo is creating an SVG on the fly for your chart. SVGs are just XML, and you can inject XML into the element via the javascript config.
For your label, you have to use elements to position text. See the SVG spec for this element: http://www.w3.org/TR/SVG/text.html#TSpanElement
The problem here is that Kendo uses left-justified text, and you can't change the parent element with this bug. That means you have to offset everything by hand, one pixel at a time. If your text is static, this might work; if it is dynamic, I wouldn't even attempt it.
You might be able to hack something together via JS, and manipulate the SVG on the fly each time Kendo modifies it... but you may as well write a charting library if you're going to that much work.
EDIT: For your use, it might be better to rotate the labels, if you don't have to mirror the old display exactly.
I am trying to add the actual value of all the bars in my chart to the
end of each bar. I want this to either replace, or to add to the tool-
tip functionality.
I see that this is possible in the image chart, it is the
functionality described in the following link that I wish to
replicate:
http://code.google.com/apis/ajax/playground/#image_bar_chart
I am wondering if this is possible in the Javascript based version of
the bar chart?
Many thanks,
H.
It looks like there's no built in functions to draw text ad-hoc on top of google's different charts. Behind the scenes, it's generating SVG so you could try to insert some valid SVG on your own.
Another option would be to use a more flexible (but less featureful) library like raphael.js:
http://raphaeljs.com/