amcharts / amcharts4 Goto Github PK
View Code? Open in Web Editor NEWThe most advanced amCharts charting library for JavaScript and TypeScript apps.
Home Page: https://www.amcharts.com/
The most advanced amCharts charting library for JavaScript and TypeScript apps.
Home Page: https://www.amcharts.com/
(Apr 26 data point does not exist, but it shows up as tooltip while hovering on Apr 30, which does exist)
Hi guys,
I'm trying to use the latest am4-charts to setup a date-based line chart containing dates with irregular intervals. Scaling and everything else works like a charm, but it seems that as soon as date intervals are not on a regular base, the tooltip gets only shown when hovering on the exact data point, which is nearly impossible for large datasets. I've setup a small code pen to illustrate the problem:
https://codepen.io/arm1n/pen/gzzmVQ
So my question is: Is this a bug? Or is it intended to not work with this kind of setup? I haven't found any demos using irregular date intervals. If it's by design (or simply not possible), what would you recommend to do? The only workaround, which came to my mind is using an axis range guide showing the actual value. Thanks for any help!
When adding Bullets to LineSeries rendering lasts very long ( vs rendering of just LineSeries on same amount of data). Problem is observed when data consists of more than 400 values (for my machine)
Is this a known issue?
JSON config example (uncommented when rendering with bullets):
'series': [{ 'xAxis':'v1', 'type':'LineSeries', 'name':run_1_name, 'stroke':'#FEB201', #'strokeOpacity':0, 'tooltipText':run_1_name + ':{valueY} at {dateX}', 'dataFields': { 'dateX': 'timestamp_run_1', 'valueY': 'run_1' }, # "bullets": [{ # "type": "CircleBullet", # 'tooltipText':run_1_name + ':{valueY} at {dateX}', # }] }]
Version: AmCharts 4.0.0-beta.24 from NPM
I have an x axis where I want to show steps on every value, so I use:
categoryAxis.renderer.minGridDistance = 1;
Then I get the following error in the Chrome v66 browser console (the chart still shows correctly though):
TypeError: Cannot read property 'axisLength' of undefined
at CategoryAxis.get [as axisLength] (Axis.ts:1057)
at CategoryAxis../node_modules/@amcharts/amcharts4/.internal/charts/axes/Axis.js.Axis.validateLayout (Axis.ts:819)
at System../node_modules/@amcharts/amcharts4/.internal/core/System.js.System.validateLayouts (System.ts:395)
at System../node_modules/@amcharts/amcharts4/.internal/core/System.js.System.update (System.ts:193)
at System.ts:356
Example code:
let chart = am4core.create(chartID, am4charts.XYChart);
chart.data = [{
"country": "Lithuania",
"litres": 501.9,
"units": 250
}, {
"country": "Czech Republic",
"litres": 301.9,
"units": 222
}, {
"country": "Ireland",
"litres": 201.1,
"units": 170
}, {
"country": "Germany",
"litres": 165.8,
"units": 122
}, {
"country": "Australia",
"litres": 139.9,
"units": 99
}, {
"country": "Austria",
"litres": 128.3,
"units": 85
}, {
"country": "UK",
"litres": 99,
"units": 93
}, {
"country": "Belgium",
"litres": 60,
"units": 50
}, {
"country": "The Netherlands",
"litres": 50,
"units": 42
}];
// Create axes
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.title.text = "Days";
let x = new am4charts.CategoryAxis();
categoryAxis.renderer.minGridDistance = 1;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = dataPointLabels[0];
let series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "Number of links";
series2.stroke = am4core.color("#CDA2AB");
series2.strokeWidth = 3;
series2.dataFields.valueY = "units";
series2.dataFields.categoryX = "country";
Test issue. Do not mind.
let chart = amcharts4.create("chartdiv", amcharts4.XYChart);
hide, show and setVisibility methods don't re-position or resize the chart.
https://codepen.io/team/amcharts/pen/e2b0557b22dd819159a5ff5dc82d255d/
Legend
class currently does not have any specialized events.
It would be useful to have a set of "hit", "over", "out", "toggle", "hide", "show" events for items.
E.g.:
markerHit
labelOver
itemHit
itemOver
itemToggle
itemShow
itemHide
etc.
This does not happen if Animated theme is used.
<body style="touch-action: none; user-select: none; -webkit-user-drag: none;">
Interaction.prototype.setTemporaryStyle
does not add temporary styles, the DOM 0 styles added to the <body>
are permanent.
Interaction.prototype.processTouchable
adds a prevent default listener on document
for the pointerdown
event.
Both of them breaks text selection on a application level, this is a major issue.
Implementation will use DataSource
and geodataSource
property to load the map.
Code-wise this will look like this.
TypeScript / ES6 / JavaScript:
map.geodataSource.url = "/path/to/myCustomMap.json";
JSON:
{
// ...
"geodataSource": {
"url": "/path/to/myCustomMap.json"
}
}
Looks like a deeper issue with JSON processing of List
elements.
When setting DateAxis.min
the chart works as expected, but displays error:
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.max = new Date(2018, 3, 30).getTime();
dateAxis.min = new Date(2018, 3, 15).getTime();
The scale is set correctly, though.
DateAxis.max
does not have this issue.
Seems like "panY" setting for Cursor behavior
is inverted. Dragging down moves selection up, and vice versa.
Example: https://codepen.io/team/amcharts/pen/NzKqpz?editors=0010
Following the simple JSON based Pie Chart from here: https://www.amcharts.com/docs/v4/getting-started/basics/.
This message shows at the place where the chart should be:
Class [function e(){var e=t.call(this)||this;return e.className="PieChart",e.innerRadius=0,e.radius=Object(a.c)(80),e.align="none",e.valign="none",e.startAngle=-90,e.endAngle=270,e.applyTheme(),e}] is not loaded.
We found that amCharts4 preventDefault on keydown and after use v4 $(document).keydown() is not fire!
Test issue #2. Disregard.
None of the axes properties are set via JSON.
Currently the chart disables all top-level elements on the page before initiating print of the chart. Then restores after print.
This is kind of intrusive and may create various issues.
We need another technique that's less intrusive.
I have the need to frequently iterate over a ListTemplate (likes series). I noticed a ListTemplate
has an iterator()
function, but the usage seems overly complex. The examples of using the function look like this:
am4core.iter.each(dateAxis.renderer.labels.iterator(), function (label) {
label.fillOpacity = label.fillOpacity;
});
Why not just give the ListTemplate
an each()
method, so that code could be changes to:
dateAxis.renderer.labels.each(function (label){
label.fillOpacity = label.fillOpacity;
});
That would seem to save a good bit of code.
I could use forEach
on the values
array, but it seems like using the values
property directly is discouraged.
We use js pushState for navigate on our service pages and after migrate to v4 have error if chart element is removed from page. We don't have this error with v3. It's weird, because sometimes occur 14, sometimes 143 times!
Error: <path> attribute d: Expected number, "MNaN,0 LNaN,0 LNa…".
t.attr | @ | amcharts4.min.js:20
| e.draw | @ | amcharts4.min.js:20
| e.validate | @ | amcharts4.min.js:20
| t.update | @ | amcharts4.min.js:20
| (anonymous) | @ | amcharts4.min.js:20
| requestAnimationFrame (async) | |
| l | @ | amcharts4.min.js:20
| t.update | @ | amcharts4.min.js:20
| (anonymous) | @ | amcharts4.min.js:20
| requestAnimationFrame (async) | |
| l | @ | amcharts4.min.js:20
| t.update | @ | amcharts4.min.js:20
| (anonymous) | @ | amcharts4.min.js:20
| requestAnimationFrame (async) | |
| l | @ | amcharts4.min.js:20
| t.update | @ | amcharts4.min.js:20
| (anonymous) | @ | amcharts4.min.js:20
| requestAnimationFrame (async) |
...
Also we think render time of chart drawing increased too much!
It seems that when you have tooltips enabled, that the max-width of the tooltip is limited to the width of the chart. This causes issues when you have a narrow chart, but a long description:
As you can see from the screenshot above, the text runs out of the tooltip layer.
(NOTE: The full text of the tooltip is "Assigned To Others: 37.5% (6)".)
Ideally the tooltip expands wide enough to fit the text. Alternatively, maybe the text wraps to multiple lines.
I'd like to be able to render the legend label/value pairs in a grid like:
If the grid width is too large for the area, the label column width should collapse so that the value always shows and (ideally) the labels get a text-overflow styling of ellipsis to them, something like:
(NOTE: I just hacked the image together, so the ellipsis alignment isn't quite right.)
The way the legend currently gets rendered, the values can often overflow outside the chart area if the labels are long, so they can't be read (such as when rendering a pie chart).
Test issue. Disregard.
One of the problems I find myself struggling with is how to customize an object (either via a theme or API calls). The reason I struggle is I'm often left having to guess at what property/class is generating the SVG element.
Is there any way that the SVG elements that are rendered could be mapped back to their JS class instances in any meaningful way?
It would be great to be able to query the DOM for something like "[data-className='XYCursor'] to find instance of all the cursor elements.
This would be really helpful when creating a theme, because I could inspect the DOM for hints as to what JS class I need to apply styles to.
If the document has the mouse event like "movedown" or something else, After enabling the cursor function, the event can not trigger.
Proposal is to add a list of values to IHeatRule
interface.
E.g.:
export interface IHeatRule {
target: Sprite;
property: string;
min: any;
max: any;
list: any[]; // <-- new property
dataField?: string;
minValue?: number;
maxValue?: number;
}
If set, any code that is using heat rules, would be able to choose a property closest out of the list
array, rather than try to interpolate it from min
and max
values.
This would allow having fine-tuned heatmaps.
Setting the disabled
property does not seem to work as I expect based on the documentation:
Controls if element is disabled.
A disabled element is hidden, and is removed from any processing, layout calculations, and generally treated like if it does not existed.
The element itself is not destroyed, though. Setting this back to false, will "resurrect" the element.
I read this as that setting disabled=true
should be like setting the CSS display:none
on an HTML element, in that the element should be treated as it does not exist.
If I disable an element when initializing an object, it works as I expect.
However, if I set the disabled
property on a chart that has already rendered, the sprite is just "hidden", the rest of the chart does not reflow to account for the item no longer being enabled.
This makes trying to hide/show elements (like a legend) very difficult. I'm trying to adjust certain elements availability based on the current dimensions of a chart, which can change in realtime.
Example:
https://codepen.io/team/amcharts/pen/6998c8ad885499f51f1411e189557efb/
If I added additional line for value
in dataFields
, the scale would be OK.
Would be best if we would not have to specify count
in baseInterval
since it's mostly 1 anyway.
XYCursor
lines go above zoom up button. It is sometimes hard to click on it.
It gets worse if lines' strokeWidth
is increased.
Example: https://codepen.io/team/amcharts/pen/Lmwrwz?editors=0010
(zoom chart and try to click on a zoom out button)
In v3, Gantt chart date axis range depends on the defined segments. Some users want to have more flexibility by setting a fixed start date and/or end date (independent from the segments).
if (tooltip.text != undefined && tooltip.text != "") {
//@todo: think of how to solve this better
if (tooltip && !tooltip.parent) {
tooltip.parent = this.tooltipContainer;
}
// Reveal tooltip
tooltip.show();
return true;
}
Test. Disregard.
Example: https://codepen.io/team/amcharts/pen/4e6d30abbf20e137f42a31c1cb51ea5e/
Chart in visible tab looks good:
It's better to use target_blank for brand link, because now links is open on current tab of browser and visitor lost current page!
This might be related to #27.
When I enable the XYCursor on a line chart with a DataAxis, the xAxis is showing the wrong values on the tooltip. All of the tooltips are off by 30 minutes. Instead of showing 8:00 - 16:00, when mousing over the chart it's showing values from 8:30 - 16:30:
https://codepen.io/anon/pen/KRrqGw
You can see the behavior here:
This happens when chart width is relatively small, and (presumably) the tooltips do not fit into axis.
Live demo: https://codepen.io/team/amcharts/pen/PRdxvB
(reduce window width to reproduce)
Setting legendSettings.labelText
(or other parameters) does not have any effect on the Legend.
Amcharts 4 might not work well with zone.js ?
Amcharts takes 50% CPU when not interacting with the page (processors: Intel® Core™ i7-7600U CPU @ 2.80GHz × 4)
Multiple tabs makes chrome freeze.
Tested with angular 6.0.2
When a legend is rendered for a chart where the text is too long, the values on the chart get cropped off:
I would love to see an option where if the legend line item is too long to fit on one line, the text label would be cropped and the value displayed in full. Something like:
Ideally we could also lay out the legends in columns, where the label and values were each in their own column.
ngOnDestroy() {
this.chartContainer.disposeChildren();
this.chartContainer.dispose();
}
Produces the following error after having destroyed the component:
core.js:1601 ERROR TypeError: Cannot read property 'getBoundingClientRect' of undefined
at documentPointToSvg (Utils.js:811)
at Object.documentPointToSprite (Utils.js:840)
at XYCursor.Cursor.handleCursorMove (Cursor.js:88)
at XYCursor.handleCursorMove (XYCursor.js:193)
at Object.eval [as dispatch] (EventDispatcher.js:357)
at eval (EventDispatcher.js:248)
at Object.each [as b] (Array.js:54)
at InteractionObjectEventDispatcher.EventDispatcher._eachListener (EventDispatcher.js:221)
at InteractionObjectEventDispatcher.EventDispatcher.dispatchImmediately (EventDispatcher.js:246)
at Interaction.handleTrack (Interaction.js:1204)
am4charts.XYCursor dispose method does not unregister the events
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.