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 :)
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).
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.
I'm trying use set data as the labels in my Radar Chart and I seem to be struggling with this. I have tried reading the documentation and searching online, but not able to find a solution.
Here is an example of what I am trying to achieve:
https://photoland.io/i/2LXlet
It would be a huge help if someone could point me in the right direction to get this done.
Thank you
I created a code pen for this, hopefully this solves your issue. You can do a whole bunch of different things like create an object and use individual properties as different labels, create an array and select individual values. Whatever you want really.
https://codepen.io/gabedesigns/pen/rqgPPR
Good luck
I have a Html Table and i Have Filled the data dynamically through javascript in the table I want google image chart in one of the columns of table but m not getting the chart for all the rows and it is not accepting value more than 1000, I have used this url to create the graph 'https://chart.googleapis.com/chart?cht=lc&chd=t:" + parameters+ "&chs=50x30' parameters are the values passed to create the google imagechart.
Please help me to know where the problem is and how to solve it.
Thanks...
I'm using the google chart API on a project currently and it's been great. Your invocation should work, just make sure that parameters contains only a comma separated list of number values without spaces.
E.g. parameters = 5,19,7
Your full string is https://chart.googleapis.com/chart?cht=lc&chd=t:5,19,7&chs=500x300.
I made the image a bit larger than your 50x30 so you could see what was happening. I think it's going to be hard to make an effective graph of any kind at the scale you're working with, even with the options google gives you to change the graph appearance. It will be especially hard to produce a useful line graph.
I've been using the chart API to draw a cross sectional profile of a landmass, using a slightly modified version of the chart example shown here.
however, I now need to draw a line of sight between the two end points, as well as a Fresnel(1) zone between the two. can this be done through the interactive chart API? or is there a better way to get this done?
also, I would like to 'select' the first and last entries to display their elevation, however my code doesn't appear to do anything:
Chart.setSelection([{row:0,column:null},{row:Results.length - 1, column:null}]);
After finding some other problems with the visualization API, I just gave up and did the whole thing using Raphael instead, works way better :D
EDIT: didn't know you couldn't answer your own posts within two days :| kinda of annoying since I've spent like a week straight trying to fandangle the bleeding chart -.-