I am using an area plot - normal stacking - plotting 3 series. I have data-points of series 1 and series 2, but data-points for series 3 are based on relation: (100-(series1 + series2)). After I calculate points of 3rd series and assign it to series object, Highcharts grouping is applied to it, but relation described above does not hold after grouping. Seems like Highcharts applies grouping on one series at a time. So relationship goes away after it comes out of approximation function. How can I apply grouping so that relationship holds after coming out of approximation function in dataGrouping? Any input will be appreciated.
You can edit approximation function for 3rd series, so it will have values as you want it to have.
Depending on what do you expect to have as a 3rd series approximation you can use one of available approximations - like "average" or "sum" - or set up a custom function.
More info in API reference: http://api.highcharts.com/highstock#series.dataGrouping.approximation
Related
My problem: i would like to find an automatic way to center labels in donut chart cells. In my case each cells contains an array of complex objects, what i want is to show the number of those objects.
See:
Playing with radius, allowed me to find those values:
First layer: -28
Second layer: -20
Third layer: -10
Fourth layer: -8
I applied it as a quick fix but i don't like this solution, as it's fixed for 4 layers (what if I need to add an other layer ? etc....) and using "magic numbers" is unmaintenable...
Do you have a better solution ?
You can test it here: https://jsfiddle.net/aliz/gwz7om9e/
Line 40:
pieSeries.labels.template.radius = am4core.percent(positionRadiusInPie);
Note:
Using those attributes didn't work: "horizontalCenter", "VerticalCenter", "textAlign", "align".
EDIT: response to Bhavik Kalariya
This is what I get if I force one radius for all layers.
You can at least get it down to just using one base constant of your choosing by using an adapter approach on the label's radius to calculate the value you want for each series that is added to the chart using whatever formula you choose. Here's a basic formula that gave good results for me with your setup, where BASE_INNER_LABEL_RADIUS is set to -45.
pieSeries.labels.template.adapter.add('radius', function(radius, target) {
var chart = target.baseSprite; //chart stored in baseSprite of the AxisCircularLabel
var index = chart.series.indexOf(target.dataItem.component); //corresponding series stored in the dataItem's component
return am4core.percent(BASE_INNER_LABEL_RADIUS / (index + 2)); //Uses singular constant defined elsewhere, which is used in all series
});
This will adjust itself according to the number of series you add to the chart. You can make this as robust as you want by making further tweaks if you have fewer series and want to make the labels even more centered.
Updated fiddle
Edit
If you want to be even more generic, you can get at the slice sprite directly through the target.dataItem.sprites array (typically the first element, though you can loop through and look for an object whose className is "Slice" if you want to be super safe about it) and calculate your desired radius value using any of the numeric properties it has, such as innerRadius.
pieSeries.labels.template.adapter.add('radius', function(radius, target) {
var chart = target.baseSprite; //chart stored in baseSprite of the AxisCircularLabel
var index = chart.series.indexOf(target.dataItem.component); //corresponding series stored in the dataItem's component
return -(target.dataItem.sprites[0].innerRadius) / (index + 3);
});
You'll want to adjust this accordingly, of course.
Fiddle
I have a dataset with the following schema:
{
"time": Date,
"foo": Number,
"bar": Number,
"change": Number
"place1": String,
"description": String,
"place2": String
}
And I want plot a series-chart grouping the place1 and place2 together, display time as x data, foo as y data and the other fields inside the tooltip.
Taking a look at this example the first thing I have done is to create a dimension and grouping the dataset using place1 and place2.
const placeDimension = ndx.dimension((d) => [d.place1, d.place2]);
After that I've created a group, since I want display data without aggregation I've only used the group function:
const placeGroup = placeDimension.group();
And from this point on I'm confused on how to use the two object created before for plotting the series-chart.
How can I select the property to plot in the X and Y-Axis? (In this case time for X and foo for Y?) .
How can I display the other properties inside the tooltip? (I know how to use the tooltip but I don't know how to use data that are not inside the dimension).
In dc.js and crossfilter, the X axis is usually the "keys" of your grouped data, and the Y axis is the counts (or other aggregations).
If each of your keys are unique and you do
const placeGroup = placeDimension.group().reduceSum(d => d.foo)
then it will sum up the one value and return it to you. So your keys (X) will be place1,place2 and your values will be foo.
Then you can use the seriesAccessor and keyAccessor to pull the keys back apart, as in the example you linked.
Tooltips are called "titles" in dc.js, after the HTML/SVG element which implements them. You can format your text however you want in the accessor, including line breaks. The annotated stock example shows this in action.
Caveat
All this said, there aren't very many good reasons for using dc.js with unaggregated data. The library only shines when there are interactions by filtering the charts, and filtering will only work if the data is aggregated with crossfilter.
It will probably be easier to learn another charting library, since you aren't using any of the functionality that makes dc.js special.
I am confused on how to change the precision of high, open, low, close in candlestick chart in amCharts specially when balloon also comprises text.
This is different from other answers I found on Stack Overflow as they are for valueAxes and categoryAxes balloons but not for data point balloons (with text).
For example:
In this balloon, for eg, if I want to show 3 digits after decimals. Also in some cases I am a facing problem where values are rounded and shown as eg. 12k. But I want real value.
If you're using the built-in short tags (i.e. [open] [high], [value], etc), you can set a precision inside your graph object or at the chart level to the desired number of decimals:
AmCharts.makeChart("...", {
precision: 3, //affects everything
// ...
graphs: [{
// ...
precision: 3, //affects just this graph
},
// repeat as needed
],
// ...
});
Stock charts need this set in the panel or in panelsSettings
If you're accessing your values by name instead of through the built-in tags, you'll need to use the balloonFunction to format your data. There's an example in the knowledge base that illustrates this here.
I'm facing an issue with my Highcharts-powered component.
Considering the basic column chart JSFiddle example: http://www.highcharts.com/demo/column-basic
My goal is to get the series name (Tokyo, New York, etc...) instead of Jan, Feb, Mar... on the x Axis.
Of course, I also need the columns to be grouped according to the series name. So, in this case, it would be 4 group of columns.
How can I do this ? Should I modify the categories block ?
Thanks a lot
EDIT
I've found the solution and updated the fiddle: http://jsfiddle.net/j658R/1/
But now, I need another bahvior. How can I specify more than one value for each serie ? For example, for "s1", how can I put 4 values for this series and so get 4 bars above the "s1" label on the X axis ?
Thanks
By separating each data point into a separate series, Highcharts will automatically group the data.
So the first data point of each series will be set to the first category. The second data point of series to the second category, etc.
All you need to do is set this up as a single series:
http://jsfiddle.net/j658R/6/
I want to create a histogram in Highcharts. The bin series has about 8 elements. The series for the the distribution curve has about 200 elements. Since Highcharts infers the xAxis from the number of elements in the series, the xAxis stretches out to 200. How do I get the curve series to fit to the bin series on the xAxis?
I would suggest using 2 x axes for this. It is far easier than trying to make the points match on a single axis.
See my example here:
http://jsfiddle.net/FnhRV/19/
Well, first I advice to get familiar with Highcharts docs/tutorials. Like this one.
In general, you can manage distance between points, it's called pointInterval, for example: http://jsfiddle.net/Dd9Py/1/
When you have 8 columns, on xAxis you should have scale - according to pair [x,y] of values.
Another solution is to use two different xAxis, one for column and one for spline. Example: http://jsfiddle.net/Dd9Py/2/
Looking at this jsFiddle. Things I notice is that your xAxis is linear - meaning that each point is plotted consecutively. So, since your bar series only has 8 points they are plotted int he first 8 positions. Your curve contains 200 points and are also plotted first come first served. You need to link up your xAxis so that each series is linked. What are your xAxis increments/categories?