I have an angular app that utilizes AmCharts v3. If I render a new chart I can access it from the console using AmCharts.charts - If I then navigate to another page and render a new chart, calling AmCharts.charts now has 2 charts. This will continue every new chart rendered is added to the AmCharts main object, it just keeps getting larger. Does AmCharts offer a way to "clean up" old charts?
You can call clear on the chart instance (e.g. chartInstance.clear()) before you render your next chart. clear is also available on the AmCharts object if you need to clear all chart instances (AmCharts.clear()).
Related
Does the Nivo charts library allow on-load animations for pie charts? I have only been able to get on-load animations for bar charts, but not for pie charts.
Nivo has a transition mode property which gives animation when a chart node is clicked. I need the animation to show on component load. Is there a workaround for this or has anyone managed to get this feature to work before? My pie chart is a react js storybook component.
This seems to be a difficult problem to solve. Nivo has an outstanding issue out where they made some progress, but based on the final postings the initial draw still has issues. I was able to force an initial render with a little help from window.setTimeout() but the animation ends up warping the circle, I'm guessing that is why it doesn't work by default.
I tried Victory.js and it also has the exact same issue. You can use this technique in React.js to force the initial draw.
My solution was to move to react-chartjs-2, which worked right out of the box.
https://react-chartjs-2.js.org/components/doughnut/
We have multiple charts developed in d3.js. We are creating a dashboard where user can add multiple charts which will be visible in one view.
Is is possible to create interactivity between these charts and dc.js? Or do we need to develop these charts in dc.js again?
Please suggest an alternate in case of No.
I'm trying to refactor some custom d3 code that I wrote to render a series of crossfilter-driven charts by bringing in dc.js.
My main problem is that I have some chart types that are not supported by dc.js (e.g. a Sunburst Partition) and I'm trying to figure out how to render them in conjunction with a dc.js chart group.
Filtering a single dc.js chart will automatically render / redraw all other charts belonging to the same chartGroup. Is it possible to somehow hook into that global re-render event, so that I can re-draw the non-dc charts at the same time?
I understand that there are listeners on each individual chart, e.g. chart.on("postRender", function(chart){...}) but there doesn't seem to be a way to hook into re-rendering a group of charts. Is there a good pattern by which this could be accomplished?
The "right" way to do this is to register your chart in the dc registry with dc.registerChart
You just need to implement .redraw() and .render() on some object (your chart or a wrapper), and pass that object as the first argument.
Put it in the same group (second arg) as the charts it should respond to.
render() creates the dom elements from scratch, and redraw() updates them when the data changes.
Depending on how the chart is used, you may also have to implement .filterAll() and .anchorName()
I've created a page using dc.js/d3.js with multiple bar charts and a row chart, and when I hover over them and interact, the brush functionality works as expected in all charts.
I'm trying to get just one of the charts to have the brush and a range appear on page load, but when I try this using .filter on one chart, the other charts become disabled. I have also experimented with .extent.
Image of the two version of the charts:
http://neil-s.com/unison/images/Brush3.png
I have looked at some related posts on SO, but they aren't quite what I need. The main crossfilter page has an example, but since the code is so different, I want to see if I can retain what I have, otherwise I'll use the crossfilter page code.
Updated:
Here is a jsfiddle - http://jsfiddle.net/jth32/22/
And here is a small sample of the bar chart code:
// Bar Chart 3-------------------------------
psalBarChart
.width(300).height(150)
.dimension(psalDim)
.group(psalGroup)
.x(d3.scale.linear()
.domain([25, 40]))
.xAxisLabel("Salinity")
.centerBar(true);
// Bar Chart 4 -----------------------------------
depthBarChart
.width(300).height(150)
.dimension(depthDim)
.group(depthGroup)
.x(d3.scale.linear()
.domain([0, 2050]))
.xAxisLabel("Depth")
.centerBar(true)
//.filter([0,1000]) // Creates Brush, but disables other charts
Thanks
I found out it had to do with the version of dc.js that I was using. The latest version on github (v2.0) is what I had, but the CDN link I used in jsfiddle used version 1.6.0, and that works fine as Ethan mentioned. Once I switched to 1.6.0 in my dev environment, that fixed my issue.
I posted a message to the dc-js google user group, and I'll add another message here if this is indeed a bug in dc.js v2.0.
I have an annotated timeline chart that gets new data over ajax. It's working fine, new points come in and I redraw the graph. My graph has two lines, so there are two labels in the legend on top. For whatever stupid reason, every single time the graph is redrawn, the legend labels swap places! So it will say
Foo 5.2 Bar 3.6
And then I'll refresh (and there will be no new data, so the call to redraw is 100% identical to the previous one) and now it says
Bar 3.6 Foo 5.2
In the respective red and blue, of course. What on earth would possess the applet to do this? Is there any way I can control the order of legend labels? I couldn't find anything about it in the official documentation.
Try using google.visualization.DataTable. For example:
dataTable = new google.visualization.DataTable({cols:graphColumns, rows:graphRows});
chart = new google.visualization.AnnotatedTimeLine($('#chart_div')[0]);
chart.draw(dataTable)
I use it this way and don't have any problems with my legend values.