There is nvd3 code that creates the charts, for instance:
https://github.com/novus/nvd3/blob/master/examples/scatterChart.html
But how to just update the already created chart with new data? I tried to just run
d3.select(node)
.datum(data_func)
.call(chart)
Thinking that nv.addChart() is adding the chart, but the code above actually added new chart without removing the previous one.
Any suggestions would be greatly appreciated.
Update
I figured out that d3.select(node).datum(data_func); is updating the data for the chart. So, if I call it and then resize the window, the data is updated without chart being redrawn. Now I do not know which function to call to update it automatically.
So, the solution was just to use a global variable for chart and call the code:
d3.select(node)
.datum(data_func);
chart.update();
Related
When the I temporarily hide my am4Charts XYChart and update the data, the formatting of the axes and title is messed up. How can I fix it?
Call the reinit() function on your chart object.
I am trying to understand and implement the D3 reusable chart pattern.
See sample implementation.
Here the updatableChart is called after selecting the id '#updatableChart'.
Question 1:
If I want to adjust the height parameter by calling as below, in subsequent code, it duplicates the chart.
d3.select('#updatableChart')
.call(updatableChart.height(450));
How should I use this pattern and update the height without affecting the original chart ?
Question 2:
Now if I need another chart, say, under div id '#updatableChart2', I can still call and get the chart using code below.
d3.select('#updatableChart2')
.call(updatableChart)`
But when I try to adjust the height by simply saying updatableChart.height(500); it affects only the second chart. How can I be specific in choosing the chart instance to work on ?
Thank you.
Answer 1:
The reason the chart is drawn again, is because I am calling the updatableChart.height(450) within a D3 selection. Instead it should have been called simply as updatableChart.height(450), to adjust the height.
Answer 2:
The problem was that the same chart object is attached into different div elements.
If another chart is needed under a different div, then the original barchart() should have been instantiated into another copy, say var updatableChart2 = barChart() and used further.
In D3 I am working on customizing and adding to #Rengel's timeline (link shown in JS Fiddle.
I've successfully created a similar timeline based on tracks, and it also allows users to filter project data based on checkbox values. Each piece of data now has a tooltip, and there are letters from another dataset populating underneath the projects in the same svg container. Now finally I want to add a brush like this one - wrobstory's from the blocks website.
I have only recently started to work on brush events so I am very much a noob, which is why I am unsure how I am going wrong. There is a JS Fiddle I created at: https://jsfiddle.net/rootseire/2vq8028o/2/ which shows everything working before the brush gets called. When I select a section of the timeline, the brush appears, it calculates indexes and extent. But it changes the y state of the year and the year text then transitions down the page.
I have been trying to see why this is happening, but I think I need to step back from the code as it might be just that I am not referencing the correct element. Here is the code for when the mouse pointer drags over the interface:
vis.on('mousedown', function(){
brush_elm = vis.select(".brush").node();
new_click_event = new Event('mousedown');
new_click_event.pageX = d3.event.pageX;
new_click_event.clientX = d3.event.clientX;
new_click_event.pageY = d3.event.pageY;
new_click_event.clientY = d3.event.clientY;
brush_elm.dispatchEvent(new_click_event);
});
But I think it might have something to do with the .points selector. How can I make the brush target the x-axis, the project rectangles and the letters together?
Thanks in advance,
P
I want to use exactly this d3 donut chart.
This 3d chart
However, instead of showing percentage, I'd like to show the raw datas that I am providing.
Ideally, the percentage could be shown (as it is now) and I could show the raw datas for each donut part using an onmouseover tooltip!
Can't make it work.
Thanks a lot for any help!
Are you looking for this,I update the fiddle with tool tip,
Initially add a div to the body i.e.
var div = d3.select("body").append("div").attr("class", "tooltip");
then whenever user makes a mouseover or mousemove on the paths/arcs do the necessary.
have a look in http://jsfiddle.net/Q3dhh/25/
I have a couple of charts working correctly with dc.js, but I'd like to keep track of the values changing when the brush is moved, similar to the main crossfilter example here: http://square.github.io/crossfilter/.
Part of my issue is that I'm not completely understanding how the brush event listeners work when using dc.js charts, so I'm sure I'm missing something simple. I have looked over the D3.js brush API.
I've tried adding .on("brushstart", brushed) to the chart objects as well as creating an instance of the brush and then adding an event like this:
brush.on("brushstart", function() {
console.log("brush test");
});
but the event isn't firing. I also tried grouping the charts together similar to the crossfilter example code, but no luck.
A complete fiddle is here: http://jsfiddle.net/neilsatt/6Zk9v/
Thanks
I found out that dc.js already has a Data Count widget that handles this functionality.
You can find an example listed under "DATA COUNT' in the dc.js documentation - http://dc-js.github.io/dc.js/docs/stock.html
I also updated my fiddle (http://jsfiddle.net/neilsatt/6Zk9v/1/)
Lines 6-9 in the HTML have the widget, and here are the updated lines 111-113 in the JavaScript:
dc.dataCount(".dc-data-count")
.dimension(xFilter)
.group(all);