amcharts/amcharts3

JavaScript Charts V3

amcharts3's Issues

AmchartsV3 dates cannot parse in firefox

It seems dates do not properly parse in firefox, setting "parseDates" (via. the snippet below) causes graphs to not be rendered.

"categoryAxis": {
    "parseDates": true
}

It appears that no errors happen immediately, however after some time I noticed an error pop up along the lines of the following:

a is undefined (serial.js)

XSS in chart balloons

Hi,

There appears to be an XSS vulnerability in the chart balloon implementation. Tested in Chrome using the latest version of the code from this repository. In this scenario, unsanitized input is passed in as the bubbleText data in the dataSource to a chart. The labels on the X axis show up as expected, but hovering over data points triggers the XSS.

Hovering:

I considered sanitizing the data during chart creation, and that mitigates the XSS but causes double sanitization of the labels:

Hovering:

For AmGraph objects, this can be remedied by defining a balloonFunction that sanitizes the input. However, AmChart objects don't have that option. Is there a workaround that can deal with this type of input correctly at both the labels and inside that balloons? Thanks!

Error on Exporting multiple charts on the page to a single PDF

I have just copied the example and used the latest version of AmCharts and the graphic starts gaining height and never stop.
With the files used in the example everything works like a charm.

http://www.amcharts.com/tips/exporting-multiple-charts-on-the-page-to-a-single-pdf/

Using amcharts3 together with humanize-plus breaks charts

Please follow these steps to reproduce:

1. Make sure to have node.js installed
2. clone repo: https://github.com/Maarius/ember-amcharts-humanize
3. run "npm install"
4. run "bower install"
5. run "ember s"
6. open http://localhost:4200

Normally you should see a Pie Chart and a Line Chart, with the code taken straight from the examples.
However, as the library "humanize" from https://github.com/HubSpot/humanize is included, the charts are broken, e.g.

• if you hover the piechart, you see errors like "Uncaught TypeError: Cannot read property 'wedge' of undefined" in the console
• animations are not working
• the line chart is not shown at all

In order to show that humanize-plus causes the error follow these steps:

1. cancel "ember s"
2. open the file "ember-cli-build.js"
3. comment out the line "app.import('bower_components/humanize-plus/dist/humanize.js');"
4. run "ember s" again
5. the charts are working normally

Versions:
amcharts3: 3.20.2
humanize-plus: 1.8.1
ember: 2.4.3

Update: This issue is not restricted to ember.js!

If you clone https://github.com/Maarius/amcharts-humanize and open index.html, you'll see that it is broken as well.

Cannot remove the legend even after removing the graph

Hi,

Suppose I have a data on 5 stocks in amStockChart. The first stock data is in dataSets[0] and the remaining 4 stocks to be compared are in dataSets[1]
I want to allow the users to remove any of the 4 comparing stocks. Based on users choice of stock to be removed, a script re-runs the data and removes a particular stock of user's choice from the 4-stock data and then passes this new data of 3 stocks (called NewData) and the graph ID of the graph to be removed to a JavaScript function.

JavaScript Function does the following:

  chart.dataSets[1].dataProvider= NewData;
  chart.validateData();

    for (i = 0; i < chart.panels[0].graphs.length; i++) {
        if (chart.panels[0].graphs[i].id == GraphID) {
           chart.panels[0].graphs.splice(i, 1);
           chart.panels[0].graphs.splice(i+1, 1);
        }
    }

          //var graph = chart.panels[0].getGraphById(GraphID);
          //chart.panels[0].removeGraph(graph);
          //graph1 = chart.panels[0].getGraphById('comparedGraph_'+GraphID+'_ds2');
          //chart.panels[0].removeGraph(graph1);

The problem with the above is that the graph gets removed but the legend remains. Please see screenshot below:

Please let me know where am I going wrong

Cannot set step in an Axis

I have a XY chart, and my points are measured every 30 minutes.
For this reason, I want to set the step of my xAxis to 30.
For very surprising reasons, the step of ValueAxis is read-only.

I tried the tips written on https://www.amcharts.com/tutorials/user-defined-minmax-values-of-value-axis/, but changing gridcount and labelFrequency could only change step to 20 or 50, but no other value.

It seems wanted by the team, so maybe it's more a feature request.
I may ask why is it wanted if so ?

Multiple Axes StockChart

Hi,

If I have a StockChart with multiple axes (one on the left side and other on the right), is it possible to ensure that the valueLineBalloon only shows the value of the right axis and not the left axis?

I have seen the code

"valueAxes": [{
// ...
// value balloons are shown
}, {
// ...
"balloon": {
"enabled": false
}
// value balloons are not shown
}]

Appreciate if we could also have a live demo available for our reference

Regards
SD

validateData breaks XY chart

See an example http://jsfiddle.net/dizel3d/nrorjykc/. Steps for reproducing:

1. Zoom in right side of chart.
2. Call chart.validateData().
3. Now chart is broken.

Chart maxSelectedTime property not respected by chartScrollBar

We had been using v 3.17.x of amCarts and the chartScrollBar attached to the category axis would respect the maxSelectedTime property of the chart. On upgrading to v 3.18.x, the scroll bar no longer does. The chart/graph will actually respect the maxSelectedTime value but the scroll bar gets out of sync. the scroll bar size/position won't match that of the graph as you scroll.

Is it allowed to put the free version of amcharts.js in a public github repo?

I am not sure how to interpret the linkware license, so is it allowed to put the free version of amcharts.js in a public github repo?

Error bars are the wrong size

You can see in this example : http://www.amcharts.com/tips/column-chart-confidence-intervals/

For instance, in 2009, 24.6+10=34.6, but the upper error bar is lesser than 30.

I have the same problem with my code, in an XY chart.

Images not found when used as node_module

Not sure there's much that can be done to resolve this, but I'm just posting the workaround here in case anyone else comes across this problem.

When used via require('amcharts3'), images such as the drag icons give a 404 since it's looking inside an amcharts/ folder at the root that doesn't exist.

The work around is to set window.AmCharts_path = 'node_modules/amcharts3/amcharts';

Amcharts watermark shows through non-transparent balloon

I made serial chart balloon non-transparent (by setting balloon.fillAlpha to 1) and it displays properly with regard to graph grid, bars, etc (see first screenshot). But when balloon is drawn over the Amcharts watermark the watermark is shown through balloon background (as if balloon were transparent) yet the watermark is shown UNDER balloon's text (see second screenshot). This is probably a bug.

Can we add D3 components to AmCharts

Hi,

Is it possible to add additional chart components built using D3 into an existing amChart?

If yes, could you guide me through the process or with a sample piece of code.

Regards,
SD

Gantt Chart Zoom magnitude is limited to x144, which is not consistent with other charts

I'm trying to present a daily gantt chart on a second scale (86400). I have bars where seconds are matter. Trying to drill down goes only as far as 10 minutes per one unit of scale, and there is no way to get to second scale units.
This issue is consistent with all other scales. I can guess that draggable zoomer is responsible for that because it does not allow two "dragIconRoundBig" come close enough to set value to minimum scale.

Pre-rendering amCharts server side

I have been made to believe that client side pre-rendering of charts will improve the performance (atleast during initial load). Is there a way we could do so using amCharts. Appreciate some guidance and please excuse me if my queries are naive as I am trying to learn different ways of optimizing the performance of these wonderful amCharts on my website.

Reference: http://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side.html

Regards

Is there a way to zoom the entire stock chart?

On my serial charts I used the zoomToIndexes to zoom to a specific trade period and that works fantastic.

But I now need to use a multi-panel stock chart and can't seem to find a method which would allow me to do this. Only the panels have the zoomToIndexes method but if I zoom the primary (first) panel the others are out of sync, so the best I could do to have them in sync is:

function zoomChart() {
  var start = 500;
  var end = 600;
  chart.panels[0].zoomToIndexes(start, end);
  chart.panels[1].zoomToIndexes(start, end);
  chart.panels[2].zoomToIndexes(start, end);
}

But even then I can no longer use the chart scrollbar, since it remained in the old position and as soon as it's moved it returns all three panels to the old position.

I looked for methods to update the scroll bar as well, but it seems to have no methods at all, or I missed something. Is there maybe a better way to zoom the entire stock chart to a certain index or date range?

Graph with lineTickness 1 not shown when value is on Axis

AM chart will not show the line-graph when lineTickness=1 and the value of a dataitem is same as where the Axis is rendered.

https://jsfiddle.net/koenvanderlinden/09d1pesx/

So if Axis = 0. And value is 0. It will not show up in graph.
If you change lineTickness=2, it will show a 1px line just above the Axis.

I would like to see the line on top of the axis.
AMChart version 3.14.3 worked correctly. Line was shown.
AMChart version 3.19.4 did not render line.

Making arbitrary bullet pulsating based on user input

Hi,

I am new to CSS but I really enjoyed the below example of making a bullet pulsating using CSS

http://codepen.io/team/amcharts/pen/ZQebgL

How can I parameterize the bullet(s) which should pulsate based on user input. For example, if the user or a script based on an algorithm chooses 2nd, 4th and 10th bullet to pulsate, how can I make it happen.

Thank you
SD

connect: false in radar chart doesn't work

https://live.amcharts.com/0NDJi/edit/

none.js theme is missing

I've created an AmSerialChart in a Node.js (read: npm) environment. I would like to gracefully handle charts that have no data but discovered that the 'none' theme is missing. Any clue where I can find this theme in npm?

Serial chart breaks on hover when using latest version (3.18.3)

Using the latest version (3.18.3) I get this error in the console as soon as I hover a chart stick (I'm using candlestick graph type):

Uncaught TypeError: a.indexOf is not a function
e.AmSerialChart.e.Class.formatString @ serial.js:46
d.AmGraph.d.Class.showGraphBalloon @ amcharts.js:199
e.AmSerialChart.e.Class.handleCursorMove @ serial.js:58
d.Class.a.inherits.b.fire @ amcharts.js:3
d.ChartCursor.d.Class.dispatchMovedEvent @ amcharts.js:220
d.ChartCursor.d.Class.update @ amcharts.js:206
e.AmRectangularChart.e.Class.update @ serial.js:19
e.AmSerialChart.e.Class.update @ serial.js:52
d.update @ amcharts.js:12

I know this isn't much help to you since it's from a minified file, but you will probably figure it out when you test it yourselves. When I downloaded an earlier version (3.17.3) which is what I'm using now to solve this, there are no problems, so it's something that got broken after that version.

If I get more time, I might test the new version some more and post details, but I'm super-busy at the moment so I doubt it will happen any time soon.

Is mouseWheelZoomEnabled feature available in amStockChart

I know mouseWheelZoomEnabled as a feature is available in amSerial Chart but is it avaiable to amStockCharts. Although I could see the parameter under the amStockPanel Class, I could not make it work. Appreciate a fiddle which shows mouseWheelZoomEnabled being used in amStockCharts

I have seen the below example but could not use it in an amStockChart

https://www.amcharts.com/demos/line-chart-with-scroll-and-zoom/

Regards SD

A serial graph not clipping when scrolling.

I was unable to reproduce the error in the live editor, but it looks like in the image. In the date/time series, the graph isn't clipping to the graph frame. In other examples of serial graphs works fine but in those is buggy... I've copied/pasted the code from the example.

Version: 3.18.6
Browsers: Chrome/Firefox
OS: Linux/OSX

XY chart sometimes fails with error "... isRolledOverBullet ..."

Sometimes XY chart fails during creation with error "... isRolledOverBullet ...". I have the problem in 3.19.6 and 3.20.3, but not in 3.18.6.

Query about fillToGraph

Hi,

I am unable use fillToGraph feature when comparable = TRUE. I am trying to plot bollinger bands on a stockchart with stock price as the main chart while all other studies will form the comparing charts. Please let me know if we can have something like compareFillToGraph so that I can fill the gap between two comparing charts (up and down of a Bollinger Band). should I use the compareGraph property and lay out fillToGrpah as an argument in it. Appreciate an example where it has been used when comparable=TRUE

Also, if I have two Base (one at 70 and one at 30) for a stockGraph, I can use negative Base property to color the area below 30 with a given color. How can I color the area above 70 with a different specific color?

Thank you
SD

How to use drawing tools like Fibonacci Arc etc in AmStockChart

I have seen websites like http://thestockmarketwatch.com/stock/stock-chart.aspx?stock=AAPL
use the drawing toolbox but I am unable to find these options in my library. What am I missing. I also do not see any form of documentation around it. Please help

Can we make the From and To fields in Period Selector READ only

I do not intend to have any period selector buttons and would like to control the chart period externally. Yet I like the fact that "From" and "To" fields show the start and end dates of the current chart instance. Can we make those two fields READ only.

Title cannot be centered in a column chart

Basically the labels influence where the title is positioned, and there is no way to center the title based on the entire chart area including the labels.

How to make the charts render faster

Hi,

I am working with ~ 3-5 MB of data (Stock OHLC Data for last 10 years) along with multiple axis etc. Currently, my amcharts are rendered in 6-9 seconds.

I am working with 1 GB RAM, Chrome browser and the free version of amCharts

Please suggest ways to optimize the render time. I would ideally need the charts to render in 1-3 seconds. I am willing to upgrade my server and purchase the licensed version of amCharts if that helps me achieve the speed that I am looking for.

Thank you
SD

CSS in AmCharts guides

Hi,

Does amCharts allow axis annotation like below snapshot?

As a workaround, I am trying to give my guide labels the look and feel like the snaphot below. Since this is not a feature directly available in the current version, I was hoping to use CSS. Was wondering if you could advise how to access the label of my guide. I tried the below but it did not work
.amcharts-guide-[guide_Close].labels:{fill: blue;}

Uncaught TypeError: d.AmMap is not a function

Hi,

I'm using trying to build a map chart following the your first map tutorial.
I'm using the library inside a React application with ES6 and Babel.
I created an SVG map using the Pixel Map tool you suggested and I'm using it through mapUrl option. I get the following error:

Uncaught TypeError: d.AmMap is not a function

I imported the library as suggested in #9
This is my code:

import React, { Component } from 'react';
import AmCharts from 'exports?window.AmCharts!amcharts3';

export default class Map extends Component {

  componentDidMount() {
    AmCharts.makeChart( 'mapdiv', {
      type: 'map',
      mapUrl: require('../images/amCharts.pixelMap.svg')
    });
  }

  render() {
    const style = {
      width: '600px',
      height: '400px'
    };
    return (
      <div id="mapdiv" style={style}></div>
    );
  }
}

connect : false

I am not sure if connect:false is supposed to work this way as in this fiddle.

https://jsfiddle.net/txofuyhf/1/

I would like the gaps so that if the value for Graph2 is null, no line connector is displayed. I have tried gapField but that did not help. Also the null values are being converted to 0.

A great library, btw.

Commonjs module

Is there a commonjs module so I can use import AmCharts from 'amcharts3' while using npm?

Publish the package on NPM

Many of us are replacing bower with npm even for client packages. Alas amcharts3 is not officially released on npm (I only found an unofficial outdated package).

I think publishing on npm would be a good idea.

Legend within the StockPanel

Hi,

My AmStockChart has multiple panels and I would like to save on precious real estate by placing the legends within the stockpanel and removing any gaps between 2 stock panels. Was wondering if it is possible.

Thank you
SD

"Failed to execute 'toDataURL' on 'HTMLCanvasElement'" in a local web-page

Hey guys,

Thank you so much for this wonderful library! Unfortunately, I faced a problem when working with it. Namely, I make some plots with amcharts on a local web-page, and I get the following error in Chrome when I try to export or print a plot image (using the export plugin):
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. http://www.amcharts.com/lib/3/plugins/export/libs/fabric.js/fabric.js:678.
It seems that a problem with fabric.js, not amcharts, but I'm not handy enough with canvas painting to figure it out. Could you please suggest any workaround for this that doesn't require moving my page to a web-server?

UPD:
Here you can find a small example where the problem is reproduced.

Proper CommonJS/ES2015 support?

This topic has been broached previously but the lack of out-the-box support for ES6 module imports, has been a hindrance to setting up amcharts in a React/Babel/Webpack environment. Two ideal examples would be:

e.g. import { amcharts, ammaps } from 'amcharts3';
or
e.g. import amcharts { serial, radar, pie, funnel } from 'amcharts3';

The scant few workarounds I was able to dig up are a bit more convoluted than generally acceptable.

Amcharts is out of the container border. Why?

Some screenshot. Can't find way to fix it

appending element to chart container infinite loop

Hi, I'm creating charts dinamically via a webcomponent, everything it's ok but when I make a chart with drilldown I want to put a select element to navigate to upper levels, but when I added a select element within chart container in "clickGraphItem" eventListener the chart container began to grow their height infinitelly.
Here is my Listener code:

`

  this.chart.addListener("clickGraphItem", (event) => {
    console.log(this.drillDownLevels)
    console.log(event.item.dataContext.subdata)
    console.log(event.index)
    if ('object' === typeof event.item.dataContext.subdata) {
      event.chart.dataProvider = event.item.dataContext.subdata;
      event.chart.categoryField = this.drillDownLevels[++level].Name;
      event.chart.validateData();
      event.chart.animateAgain();

      ChartUtil.element('select', undefined, {className: 'drilldown-select'}, (element, container) => {
      console.log(element.parentNode)
        this.drillDownLevels.forEach((level, index) => {
          if (index <= level) {
            ChartUtil.element('option', element, {value: index, innertext: level.Name}, (e, c) => {});
          }
        });
        element.addEventListener('change', (evt) => {
          let i = select.selectedOptions[0].value;
          event.chart.dataProvider = cacheData[i];
          event.chart.categoryField = cacheCategory[i];
          event.chart.validateData();
          event.chart.animateAgain();
          level = i;
        });

        let ref;

        if((ref = this.container.querySelector('.drilldown-select'))) { ref.remove(); }

        this.container.appendChild(element)
      });
    }
  });

`

Graph with lineTickness 1 not shown when value is on Axis

AM chart will not show the line-graph when lineTickness=1 and the value of a dataitem is same as where the Axis is rendered.

https://jsfiddle.net/koenvanderlinden/09d1pesx/

So if Axis = 0. And value is 0. It will not show up in graph.
If you change lineTickness=2, it will show a 1px line just above the Axis.

I would like to see the line on top of the axis.
AMChart version 3.14.3 worked correctly. Line was shown.
AMChart version 3.19.4 did not render line.

Is it possible to add a context Menu when right clicking a StockGraph

Hi,

Was wondering if it is possible to create a contextMenu when you right-click a stockGraph in a AmStockChart. I am trying to give the user a chance to change the stockGrpah color or remove the stockGrpah through this contextMenu. Appreciate if you could provide an example of such an implementation.

Thank you as always
SD

Treemap Chart

Would love to see a treemap chart.

https://en.wikipedia.org/wiki/Treemapping

Remove the "JS chart by amCharts" banner in a paid version

How can I remove this banner "JS chart by amCharts" from a paid version of amcharts3 if I'm using npm to install it through the repo?

Provide unminified version?

Hello amcharts. It seems you are only providing the minified/obfuscated version of amcharts publicly. Is this for business reasons, or simplicity? I have a developer that would like to use amcharts in a Firefox add-on, but for that to work the AMO reviewers need to look through the source code for potential security issues, especially when used within the add-on context.

Would it be possible to provide the unminified sources, if only to Mozilla reviewers?

ChartCursor missing in serial charts

I have updated from 3.17.0 to 3.20.6 . But now Chart cursor is disappeared and mouse cursor is now drawing line on dragging on Chart. If I will disable chart.export.capture, It will working fine. See here

Gantt Chart Zoomed Issue

gantt chart does not dispatch "zoomed" event on zooming only single time during creation

Save, Publish and Embed Charts

Hi,

Is it currently possible to save, publish and create embed Wordpress URL links just like in the live editor in our own personal charts that we may want to build within our apps.

I am referring to the article below which seems only availble if I use the live editor

https://www.amcharts.com/tutorials/embedding-live-editor-charts-into-wordpress/

I am using amCharts through a package in R called rAmcharts

Thank you
SD

dist folder

hi, we want to add your lib on https://cdnjs.com, because amcharts contains too many file, and it makes our auto-update config very complex and seems not so reliable. we hope you can create a dist folder, so we can add all files in it with simple config.
thank you very much!
cdnjs/cdnjs#5747 (comment)

amcharts with Webpack

Hey,

is there a plan when AmCharts will work nicely together with Es6 and Webpack? It's currently a pain to get AmCharts running within finding all needed plugins and images using webpack. Is there a roadmap anywhere?