How to remove or clear previously drawn dimple bar chart.
I did the following to redraw chart with new data:
chart.data = newData; chart.draw();
This will redraw if data is not empty. If new data is empty, previously drawn chart remains and is not getting erased. How to clear the previously drawn chart?
If you are trying to remove the entire chart (shapes and axis and all), you could do:
chart.svg.selectAll('*').remove();
If you are just trying to remove the bars/lines/shapes and leave the axes and legend intact, you can do :
chart.series.forEach(function(series){
series.shapes.remove();
});
I think this may actually be a bug related to this one : https://github.com/PMSI-AlignAlytics/dimple/issues/29 to clear out old series if you set chart.data to an empty array.
Thank you. I could get it from series.shapes.remove(), below is the code snippet:
if (0 === total_records) {
chart.series[0].shapes.remove();
chart.draw(2000);
}
else {
chart.series[0].shapes.remove();
chart.series.splice(0, 1);
chart.addSeries("Name", dimple.plot.bar);
chart.data = p_data;
chart.draw(2000);
}
Related
I need to show the grid lines on area chart within the background. I am working on amcharts area chart. I need the chart like attachment image.
For v4, please check out our guide on Axis Ranges for Series.
Our Chart With Gaps In Data demo does exactly what's shown in your screenshot:
The parts that allow the grid lines to come through is that the fills are transparent via fillOpacity:
// There's no series.fill because it has its own color already
series.fillOpacity = 0.2;
// [...]
range.contents.stroke = chart.colors.getIndex(2);
range.contents.fill = range.contents.stroke;
range.contents.fillOpacity = 0.2;
Let us know if this helps.
You have to use gridAboveGraphs and set it to true in your chart config.
AmCharts.makeChart("chartdivcontainer", {
"gridAboveGraphs": true
});
Can't figure out how I change the text colour of tooltips. For my column chart I tried:
series.tooltip.label.fill = am4core.color("#FFFFFF");
But it doesnt work. Curious also how I do it for the pie charts? Is there one place that I can update to affect all chart types, or do each need to be handled independently?
The tooltip label gets a calculated color that contrasts with the tooltip background. You need to set autoTextColor to false in order to the fill color to take effect.
series.tooltip.autoTextColor = false;
series.tooltip.label.fill = am4core.color("#FFFFFF");
The same is valid for pie charts.
You can create your own theme but that could be more than what you need.
You can use more than one theme, which allows you to use one default theme and then override just what you need:
am4core.useTheme(am4themes_animated);
am4core.useTheme(function customTheme (object) {
// Identify the instances
if (object instanceof am4core.Tooltip && object.label) {
object.autoTextColor = false;
object.label.fill = am4core.color("#FFFFFF");
}
});
After a lengthy search, I got the Below Line of code as successful line
pieSeries.labels.template.fill = am4core.color("white");
I have added above line of code if you are using axis range you can use that however as I can see your problem please take a look below line of code will solve your problem
series.tooltip.getFillFromObject = false;
series.tooltip.label.propertyFields.fill = "color";
series.tooltip.background.propertyFields.stroke = "color";
https://www.amcharts.com/docs/v4/concepts/tooltips/
I have a line chart and data in the form
[{
time: "2016-4-29"
total: 23242
},
{
time: "2016-5-16
total: 3322
}
...
]
I'm trying to filter on the x-axis with the brush, however, since I don't have every single date, if I brush in a small range, the filter handler seems to return an empty array for my filters
I've set up my line chart's x-axis like so:
.x(d3.time.scale().domain([minDate,maxDate]))
is there a way to make it so a user can only filter on dates that are in the dataset?
I would like the brush to snap to dates in the dataset.
it seems like whats happening is that you are able to brush between ticks..so it doesn't know what it selected.
I'm going to answer the easier question: How do I create a brush that will not allow nothing to be selected?
In other words, if the brush contains no data, do not allow it to take.
There are two parts to the solution. First, since any chart with a brush will remove the old filter and then add the new filter, we can set up the addFilterHandler to reject any filter that does not contain non-zero bins:
spendHistChart.addFilterHandler(function(filters, filter) {
var binsIn = spendHistChart.group().all().filter(function(kv) {
return filter.isFiltered(kv.key) && kv.value;
});
console.log('non-empty bins in range', binsIn.length);
return binsIn.length ? [filter] : [];
});
That's the straightforward part, and incidentally I think you could probably modify it to snap the brush to existing data. (I haven't tried it, though.)
The more tricky part is that this won't get rid of the brush, it just doesn't apply the filter. So the chart will end up in an inconsistent state.
We need to detect when the brush action has finished, and if there is no filter at that point, explicitly tell the chart to clear the filter:
spendHistChart.brush().on('brushend.no-empty', function() {
if(!spendHistChart.filters().length)
window.setTimeout(function() {
spendHistChart.filterAll().redraw();
}, 100);
});
We need a brief delay here, because if we respond to brushend synchronously, the chart may still be responding to it, causing bickering and dissatisfaction.
As a bonus, you get kind of a "nah-ah" animation because of the unintentional remove-brush animation.
demo fiddle
I have a an AmChart, JavaScript chart, column chart with scroll.
I'd like to be able to pull the category axis data for the min and the max values that are currently being displayed in the chart.
Example:
If I have 0-10 on the x-axis and I zoom to 4-6, I want to be able to reference the data on point 4 and point 6.
I am new to AmCharts so hopefully I am just missing something simple but I can't seem to figure this out.
Here is a link to a chart I made:
https://live.amcharts.com/U4YmV/
You can use the zoomed event to capture the startIndex and endIndex from its event object.
In the example below, zoomedData is the zoom selection.
chart.addListener("zoomed", zoomed);
function zoomed (e) {
var chart = e.chart,
data = chart.dataProvider,
zoomedData = data.slice(e.startIndex, e.endIndex + 1);
}
Please check the example here: https://codepen.io/team/amcharts/pen/246e8f826610e848b7389fb85657348a
I am building a visualization of a popular brain teaser. So far there are 9 balls on SVG with drag behavior, collision detection and forceY.
I am trying to remove them by dragging. Which kinda works... But not the way it is supposed.
One of balls is yellow. When it is dragged, it should get removed. This works, but the bug is that another ball gets rendered yellow.
Here is the function that deals with the functionality and below is fiddle.
function dragended(d, i) {
balls.splice(i, 1);
var update = svgBalls.data(balls)
update.exit().remove()
simulation.alphaTarget(0.1);
}
http://jsfiddle.net/Anuar/21738t3g/
This is not a solution in the narrow sense of the term, but simply an explanation of your problem.
If we slightly change your data array...
var balls = [{id:0, color:false},{id:1, color:false},{id:2, color:false},
{id:3, color:false}, {id:4, color:false}, {id:5, color:false},
{id:6, color:false}, {id:7, color:false},{id:8, color:false}];
... in such a way that we can set a key function...
svgBalls.data(balls, d => d.id)
... you're gonna see that this line:
balls.splice(i, 1);
Is not correctly removing the dragged element. If you change for this:
balls = balls.filter(d => d.id != i);
It will work.
Here is your updated fiddle: http://jsfiddle.net/27sykjxd/