How all data can be removed from chart without pointing the names of the data-sets?
I can't use that way because my data that is populated in the chart is dynamically created.
This is the way of removing by pointing the data-set name:
chart.unload({
ids: ['data1', 'data2']
});
There is command that removes all of the data? Or i need to recreate the whole chart?
According to C3.js documentation for .unload() function :
If no argument is given, all of targets will be toggles.
Have you tried that ?
If you want to delete the C3 object you can also do a simple .destroy() or a .flush() to force the redraw.
Related
I have two tables, one that shows the sales history of salespeople per year, and another table that shows the sales history in months. As you can see in the image below:
I need to create a composite chart (I believe it is a composite chart, as it will have more than 01 line) that is exactly the representation of the month table.
After creating the chart when I click on the seller Miguel for example, the chart will be rendered with the history of that seller.
And for example if I click on month 03 of the graph, the table of sellers will be rendered only with the sales that were made in month 03.
I don't know how to do it, I managed to create a composite chart that presents the same data as the month table, however, I was unable to integrate my chart together with my tables.
Can you tell me how I can do that?
I put the codes I made in JSFiddle, here are the links:
Sales/Month Table: https://jsfiddle.net/bernalvinicius/ejxcfpvz/15/
Month Chart: https://jsfiddle.net/bernalvinicius/kanm158j/17/
Thanks in advance.
Just put all your code in the same file(s), combine your crossfilter instances, and put all the charts in the same chart group (the default), and it should work fine.
The chart group is the second parameter to each chart constructor. If it's not specified, then the chart goes into the default chart group.
When any chart is filtered in a chart group, it will tell all the other charts in that chart group to redraw, and they will pull their new data from their respective crossfilter groups. (Sorry about the naming, a dc.js chart group has nothing to do with a crossfilter group.)
In order to combine your code, I renamed both of the crossfilter instances to cf. Then I added the new fields you are generating to the existing rows, instead of mapping the data:
data.forEach(d =>
Object.assign(d, {
mes: d.Month,
atual: d.Vendas_Ano,
passado: d.Vendas_Ant
})
);
In your table fiddle, you were initializing the table for every row in the data with a data.forEach() which wasn't necessary. That's why it was so slow to load.
Other than that, both fiddles had the same general structure so I just copied and pasted the code from the table fiddle to the composite fiddle, HTML, JS, and CSS.
In the JS I made sure to put the same lines outside and inside the d3.json() callback as before.
It looks like it works?
https://jsfiddle.net/gordonwoodhull/0q1y5ftr/15/
Following this demo, the following can be used to change the color of a LineSeries:
lineSeries.propertyFields.stroke = "lineColor";
lineSeries.propertyFields.fill = "lineColor";
This works if you add some data when making the chart. But there are issues when no data is originally added.
See this pen. Errors occur. Commenting out the lineSeries.propertyFields.stroke and lineSeries.propertyFields.fill lines allow data to be added to the chart via the "Add Data" button.
Is there a way to define the line color property field so that it works in this situation?
This seems like an issue on amCharts side, I will take a look at it. Meanwhile I would recommend setting property fields just before adding data for the first time.
I would like to have a JSON data structure that contains time series data for multiple charts (one or more lines per chart) and have this data bound dynamically to D3 so that I only need to specify the template for a single chart and then D3 handles creating the entire grid of charts for me according to some layout that I specify. When the underlying data structure is updated, series automatically get added or removed from existing charts or whole charts get added or removed.
I've seen this example that describes how to place multiple charts on a single page, but in the example code has to be written separately for each chart, whereas I am trying to create multiple charts dynamically.
I am using dc.js and crossfilter.js to make a dashboard. When moving to mobile I turn the data table responsive with stacktable. However in mobile when I click on various filters, the stacktable doesn't update since it is a copy of the underlying table. Is there a way to refresh a stacktable based on the main table. Or remove stacktable and add again to reflect the newest table.
I'm not familiar with stacktable.js but my guess is that it isn't noticing when d3 modifies the table underneath it (which is good because there are a lot of modifications).
My guess is to reinitialize stacktable each time the dc.js data table is redrawn. You can use the pretransition event for this. (A number of the other events could work, too, but this seems simplest.
Something like:
dataTable.on('pretransition', function(chart) {
$('#your-data-table').stacktable({your options});
});
A,100
B,120
C,50
D,20
Plotting this in a Chart produces the correct result: it gives me a chart with 4 columns.
What i want however is to add all these values into one column and have the chart show only one as i will be adding more data series (via lookUp) that will show additional related data.
Can this be achieved?
You can modify the dataset of the report, by summing A,B,C and D instead of selecting each one on it's own.
Try changing the chart type to a stacked column chart