I am trying to create a waterfall chart using dc.js it seems there are not many examples for waterfall chart. How do I achive waterfall chart similar to this one from http://bl.ocks.org/chucklam/f3c7b3e3709a0afd5d57 ?
PS: Will update the answer with a proper solution once I get a hint of the chart. I am trying to create more advanced charts which can be extended as part of dc.js examples.
This might be a late reply to the thread. I'm adding an answer in case anyone else (in addition to the original poster) hits the same question. The code representing my answer is on GitHub. I will give an explanation here as my git repo still lacks a proper readme file (apologies).
The trick is to create two (crossfilter) groups, one containing your real data and the other a dummy data. This dummy data is supposed to serve as support for your columns in the waterfall chart (you can also think of them as the shadow of each column of your data). The values for this dummy data follows this formulation:
Dummy value of current column = previous dummy value + previous real data value
The formula above doesn't account for the first and last columns though. They should be set manually (before and after the loop respectively) if the formula is used within a loop. The first column's dummy value should be 0 and the last one equal to the last value from your real data. Also, some decoration must be done on the chart to render the dummy columns invisible (even when selected/deselected). This feature too is available in the git code.
Related
I'm using Flot with jQuery to display a graph. I want to update some information on the graph and then re-plot it. I can see that I can use plot.getOptions().yaxes[0].max for example to update the y-axis max value and have got that to work but I'm using a plugin to add side notes to the graph.
I've used getOptions again to update the side notes data and can read the side notes' data, but can't see how I can get the side notes displayed data to update without completely re-plotting the graph.
Any suggestions?
Since you have to redraw anyway, generating a new plot with the new options is the simplest solution. You do not gain much by trying to optimize it (unless you want to redraw every second).
We're working on developing a database wherein we are using Jvenn.
"http://jvenn.toulouse.inra.fr/app/example.html"
However, we're facing an issue regarding random deletion of sets. The text area gets emptied when any random set is deleted, but the venn diagram does not. When we tried to do the same in reverse order, the venn diagram changes along with the set.
For ex., when there are 6 sets and the fourth is deleted, the number of terms in the fourth set get emptied in set 4 from the text area as well as from the venn diagram. But there still are 6 sets being shown in the diagram. But, when we go in the reverse order deleting entry 6th>5th>4th>3th the venn diagram also changes.
Can anyone help us with understanding how we could implement such a change in our code, so as to add a random deletion option.
I am new to d3, working on updating the line chart dynamically based on interval, i want the old data to be moveout/exit and update with new data, i am stuck at a position where i can see new data joins the chart but old data is not moving out/exiting. Can someone please help me out on this issue, any help is much appreciated.
Copied from d3noob'slink with little variation of injecting data to chart
Plunker link
Also i am trying to add the circles for each point, currently the single circle is added on top of Y-axis for some reason.
While checking d3noob's link I realized that he's using 2 datasets as data.csv and data-alt.csv. During the second run of updateData function it always gets data-alt.csv
So, in order to answer your question,
First, you need to get your data generation logic correct. Since you are generating random numbers you need to make sure your randomPoints() function generates proper dates that are understandable to D3
Then bind the randomly generated dataset to your data variable.
Finally, clear your data variable in every run of updateData function.
I have made a Plunker for you. Let me know if you need more explanation on this.
Hope this helps :)
I'm using angular nv-d3 and while making a chart, I'd like to have a specific point on the graph be highlighted.
My graph looks like:
I'm getting the data by consuming a rest response, my graphs will have 1 to 3 lines, and the each line is guaranteed to have the date point that I will be highlighting.
I could also live with just having a straight vertical line through that date, I just want a way to differentiate that specific date in the rest of the chart.
Couldn't find anything in the docs about this, and most of the methods I've found to do this use d3.select and jQuery, but I'm not sure if that will work with angular.
What I'm working with
I have data that I want to chart showing the intensity of rainfall over a period of time. The API documentation that I'm getting this data from says the following:
A very rough guide is that a value of 0 in./hr. corresponds to no precipitation, 0.002 in./hr. corresponds to very light precipitation, 0.017 in./hr. corresponds to light precipitation, 0.1 in./hr. corresponds to moderate precipitation, and 0.4 in./hr. corresponds to heavy precipitation.
Therefore, it seems logical to use a log scale for most of the data (otherwise everything less than moderate rain would be imperceptible), but this obviously causes a problem for when there is no rain predicted.
Possible Solution
The answer to this question suggested adding a small amount to the data and modifying the tooltip to match the original data.
Problem
This would work very nicely, but I don't know how to modify just the data that the tooltip of a Google Chart (the charting tool I'm using) references.
The Google Chart help documents here and here describe several possible roles columns from the chart's data table can play, and one of them is to be the HTML that is rendered in the tooltip. However, I was really hoping to not have to rewrite the HTML for that. Is there anyone here that knows an easy way to just modify the data shown in the tooltip?
The second link you provide gives you the easiest way to modify your tooltip content, Link. Just add another column like dataTable.addColumn({type: 'string', role: 'tooltip'});and then provide your own tooltip, like looping through all your rows and checking for zero values and replacing the tooltips where needed.