amcharts / export Goto Github PK

Hello I'm trying to include:

require('script!../../../vendor/amcharts3/amcharts/plugins/export/export.min.js');

inside my project but when I try to enable the export property (the default one) I get:

Uncaught (in promise): RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded

After adding an annotation, if the user downloads the file(no matter the type of file), the annotation made will disappear from the page. Same as printing the amCharts.

I'm trying to figure out how to add a watermark/logo on my exported files but I can't get the JSON file to validate. I know I'm missing something stupid like a coma but I don't know where.

I've add the beforecapture to my export but again it just keeps saying there is something wrong.

export-beforecapture.txt

First, thanks for making this tool set available. It's very handy!

I am experiencing some trouble integrating the pdfmake lib with my codebase. The main cause is the conflict between the use of _ (underscore) in pdfmake.js and the use of _ in lodash.

My specific problem is that it gives me an error that zipWith function does not exist when I call _.zipWith function in my own code. Removing pdfmake.js file resolves that conflict, but the pdf export functionality is no longer available.

I didn't look closely into the pdfmake.js file, but my guess is that some use of _ in that file is leaked into the global namespace. It is a serious bug if this is the case.

Could you take a look at it? Thanks a lot for the help!

TypeError: Cannot read property '3' of undefined
at Object.fabric.Color.getAlpha (http://localhost:9090/admin/bower_components/amcharts/plugins/export/libs/fabric.js/fabric.js:4559:30)
at _setStrokeFillOpacity (http://localhost:9090/admin/bower_components/amcharts/plugins/export/libs/fabric.js/fabric.js:2920:55)
at Object.extend.parseAttributes (http://localhost:9090/admin/bower_components/amcharts/plugins/export/libs/fabric.js/fabric.js:3571:14)
at Function.fabric.Path.fromElement (http://localhost:9090/admin/bower_components/amcharts/plugins/export/libs/fabric.js/fabric.js:16020:35)
at fabric.ElementsParser._createObject (http://localhost:9090/admin/bower_components/amcharts/plugins/export/libs/fabric.js/fabric.js:3873:11)
at fabric.ElementsParser.createObject (http://localhost:9090/admin/bower_components/amcharts/plugins/export/libs/fabric.js/fabric.js:3860:12)
at http://localhost:9090/admin/bower_components/amcharts/plugins/export/libs/fabric.js/fabric.js:3850:15

For some reason the plugin is failing to show the main icon. It shows only the button:

It tries to load the url http://localhost:80/assets/global/plugins/amcharts3/amcharts/plugins/export/data:image/svg+xml;charset=utf8,<svg xmlns="http:/www.w3.org/2000/svg" xmlns:xlink="http:/www.w3.org/1999/xlink" width="11px" height="14px"><path d="M3,0 L8,0 L8,5 L11,5 L5.5,10 L0,5 L3,5 L03,0" fill="#888"/><rect x="0" y="12" fill="#888" width="11" height="2"/></svg>.

I've set the AmCharts path, the shapes are loaded correctly and I can add them to the graphs. Is there any configuration I'm missing?

Plugin does not consider a dark theme when save charts to file.

I have a serialchart with 5 datasets. All 5 are shown on the graph and all 5 are present when saving as XLSX. When I download a JPG, PDF, SVG or PNG I only get the 4th dataset to show on the image. There is no special setup in the export section:
"export": {
"enabled": true,
"position": "bottom-right"
}
All 5 graphs have the same time axis, have complete datasets and are only different in colors and Y-axis they are referred to.

Is this a bug in the library or am I overseeing something?

Loss of context after printing or after printing is canceled. Version 58.0.3029.96 (64-bit)

For the XLSX and CSV download options, if using the categoryField has a date and the date is sent to the dataprovider as a timestamp rather than a date object, is there a way - out of the box - to make the download treat the date field as a date instead of an integer?

Hi guys,

referring to this SO post.
It seems like color names aren't recognized for exporting (and annotation) the same way they are for normal SVG rendering.

e.g. "orange" must be all lower-case to work for export

If I have tall enough chart and try to export that to PDF file, I either get blank PDF file or browser jams. Tested with Chrome (ver 46).

CodePen environment to reproduce this error: http://codepen.io/anon/pen/NxKVGY
Reproduce steps:
Hover over Download button on chart > Hover over "Download as..." > Click "PDF"

Result: Got PDF file with no chart
Expected result: To get PDF file with chart

Then you can edit css height of #chartdiv to 500px and try again, PDF export works.

Not an issue, more of a question really:
what are the possibilities around using the export tool for client-side elements &/or data that are not amCharts charts?

I'm using an image with position: absolute as a background of the chart, but it doesn't appear on the captured screenshot. Is there a way to include it to the screenshot? Thanks.

You can verify this bug with your donut chart demo: https://www.amcharts.com/demos/donut-with-radial-gradient/

It seems that if a chart has any values in gradientRatio-array, trying to save chart as an image will cause all slices to go transparent (excluding the borders) both on the page as well as in the saved image or pdf.

Everything goes fine if there are no gradientRatio parameter or if is an empty array.

Hello,

I'm not sure if this is an issue of export-library or fabric-library, but when trying to export Gantt chart to PNG with IE10, I get:
SCRIPT5022: SecurityError
fabric.js, line 678 character 1

Can be tested in Amchart demo site: https://www.amcharts.com/demos/gantt-chart/

Best regards
Kari S

Could you update the plugin in a newer version?
Actually i need italian translation.
Thank you.

Hello,

Is this plugin going to have an update where geometric shapes and text annotations can be added?

Thanks.

I'm trying to get floats i18n

                "export": {
                    "enabled": true,
                    "menuReviver": function(cfg,li) {
                        if ( cfg.format == "CSV" ) {
                            cfg.delimiter = "\t";
                            cfg.quotes = false;
                        }
                        if ( cfg.format == "XSLX" ) {
                            cfg.stringify = false; // false by default
                        }
                        return li;
                    },
                    "processData": function (data) {
                        for(i = 0, j = data.length; i < j; i++)
                        {
                            data[i]['time'] = parseFloat(data[i]['time']).toLocaleString();
                        }
                        return data;
                    }
                },

I've managed to use CSV as a data exporter witch commas as decimal separator, but for XLSX those values are exported as string values (with apostrophe).

When exporting a stacked chart, it looks like this

I'd like it to look like this

is there a command that enables this? If not, what's the best way to do it?

Looking at the 1.2.1 examples that allow for text annotation, I notice that when I add a text annotation, it is slightly awkward at first to see how small the text is. I think you may have just increased it with 1.2.2, which I just grabbed and added to the example, but it still seems, perhaps, just a bit too small? Maybe increase another number?

Maybe part of the awkwardness comes from trying to hover over the item to select it. What seems to happen is if I have multiple annotations on a chart, and none of the annotations are currently selected, then when I hover over the annotation, the "crosshair" cursor displays. But my thinking is that if I hover over an annotation at any time, shouldn't the cursor be the "move" cursor so that you can be confident the item is selectable?

Hi,

I want to know if it's possible to export only pre-filtered data ?

Thanks.

This plugin works great and I was wondering weather it can be used as a standalone script for exporting purposes.
Example I have my own table with data and want to export it to csv or excel or even PDF. Can I use this script somehow?

Just thinking it might be useful to provide a hook into the css of the base export div as a way to enable customizations and overrides of styling. The hook would not remove the base class names, but it would allow you to add an additional class name (or names) to the root div.

Hi,

I would like to retain my current drawings (drawn using the new annotation feature) when I am out of the drawing mode. That way, even if I add new indicators to the chart, I should be able to view existing drawings. Current feature probably does not allow that or am I missing something?

Regards,
SD

We're trying to set up Print Export for a serial chart. Seems that the chart is not resized before print, which causes charts to be cropped.

Is AmCharts assuming that we want to print in landscape? It seems that our charts are always fitting in landscape.

We followed directions at http://www.amcharts.com/tutorials/resizing-chart-for-print/, but that doesn't seem to have an effect for AmCharts 3.14

We noticed in export.js that the chart is added to the page with 100% width. Could this be a customizable option, like PDF export, to fit a particular page size?

According to issue #18, custom data can be exported using the plugin without using an amCharts chart.

To clarify, is it also possible to export a section of the DOM using the export plugin on a non-amCharts DOM element?

hello sir !,,, can u help me ?? :)
when i use line chart, i got errors :
TypeError: Cannot read property 'trim' of undefined(…)
fabric.min.js:1 TypeError: Cannot read property 'trim' of undefined(…)
fabric.min.js:1 TypeError: Cannot read property 'trim' of undefined(…)
fabric.min.js:1 TypeError: Cannot read property 'trim' of undefined(…)
fabric.min.js:1 TypeError: Cannot read property 'trim' of undefined(…)
fabric.min.js:1 TypeError: Cannot read property 'trim' of undefined(…)
fabric.min.js:1 TypeError: Cannot read property 'trim' of undefined(…)
fabric.min.js:1 TypeError: Cannot read property 'trim' of undefined(…)

i try to run the examples for line chart on amchart web and i got the same error..
thank's

Any idea why this would be appearing instead of the export menu?

http://i.imgur.com/ew46IBZ.png

This was produced on a stock chart with zoom features.

Here's part of the chart original. Note the zoom handles, and how the background color of the scrollbar is different between the zoomed in vs. the zoomed out portions.

And here's a picture of the image export. Notice how the zoomed in and zoomed out portions now have the same background color.

Using the default export.css file, the hover action for annotation shapes is black on black, and therefore makes the shape illegible.

It would be nice if the out-of-the-box export.css file had an alternate background hover color for the shapes. I realize anyone can customize the css file, but out of the box, the css file should not have to be altered for something of this nature.

.amcharts-export-menu .export-drawing-shape a:hover {
    background-color: #f5f5f5;
}

Curious if you have seen any issues with increased consumption of memory due to this plugin? It includes a number of 3rd party libraries for xlsx, pdf, etc. When I do not include the export plugin, the memory hit for an amCharts chart is not as bad.

Here is polish translation:

AmCharts.translations[ "export" ][ "pl" ] = {
    "fallback.save.text": "Naciśnij CTRL + C by skopiować dane do schowka.",
    "fallback.save.image": "Prawy przycisk myszy -> Zapisz obrazek jako... by zapisać obrazek.",

    "capturing.delayed.menu.label": "{{duration}}",
    "capturing.delayed.menu.title": "Kliknij by anulować",

    "menu.label.print": "Drukuj",
    "menu.label.undo": "Cofnij",
    "menu.label.redo": "Przywróć",
    "menu.label.cancel": "Anuluj",

    "menu.label.save.image": "Pobierz jako ...",
    "menu.label.save.data": "Zapisz jako ...",

    "menu.label.draw": "Rysuj ...",
    "menu.label.draw.change": "Zmień ...",
    "menu.label.draw.add": "Dodaj ...",
    "menu.label.draw.shapes": "Kształt ...",
    "menu.label.draw.colors": "Kolor ...",
    "menu.label.draw.widths": "Rozmiar ...",
    "menu.label.draw.opacities": "Przeźroczystość ...",
    "menu.label.draw.text": "Tekst",

    "menu.label.draw.modes": "Tryb ...",
    "menu.label.draw.modes.pencil": "Ołówek",
    "menu.label.draw.modes.line": "Linia",
    "menu.label.draw.modes.arrow": "Strzałka"
}

I wonder if you have considered another option for the default display of annotation tool menu options? It seems cumbersome to have to hover over multiple menus to be able to see all the options available. If triggering the annotation tool triggered the display of a static menu with most options visible by default, it might make the tool easier to use. Right now, it can get annoying to have to do so much hovering to select an option.

Hi,

This is more of a query rather than an issue and I would close it as soon as I get your thoughts on it.
I certainly would like to congratulate the team on this great piece of work - the export pluggin. I have a query related to the drawing tools. Currently, we can use pencil, arrow and line mode which is great. For amStockCharts, is there any future plan to add annotation tools like andrews pitchfork, elliot wave, Fibonacci retrenchment. If yes, Amcharts would be a complete and preferred stock analysis charting library and I would be eagerly waiting for its release.

Thank you as always
SD

.

Hi,

I would like the shapes feature to include the StockEvents types ("flag", "sign", "pin", "triangleUp", "triangleDown", "triangleLeft", "triangleRight", "text", "arrowUp", "arrowDown"). Is this possible to have these shapes added in colorful format

Regards,
SD

I get "s.t.match is not a function" error on exporting o Excel but no error when exporting the same data to CSV.
What can it be?

PS. I'm using it as standalone - not part of AmCharts.

Is there a working example showing how to customize the output of dates in both CSV and XLSX?

export: {
    enabled: true,
    dateFormat: "MMM D, YYYY JJ:NN:SS"
}

I've prepared an italian translation. Added here, I can not prepare now a pull request.
it.txt (just rename to it.js)

If you want, you can inclued it, feel free.

Hi guys,

Latest version of Fabric.js is v1.6.2 (https://github.com/kangax/fabric.js/tree/master/dist), and it fixes some issues for creating canvas from SVG (for me transform: rotate() was completely wrong), so it may be good to update it in AmCharts/export too.

I just use it for converting some non-AmChart graphs for export, and it is convenient since I already have AmCharts on the page, so don't need to load it additionally.

The current pdfmake version is very outdated. For exemple, it exports the package lodash version 3.1.0, but the current pdfmake version uses the version 4.17.4 (package.json of pdfmake).

I also recommend to use the Bower dependency instead of simply include it in the repository.

I would like disable export to PDF and XLSX. I have custom menu, but I can not disable loading libs.

Is there an example config setting for exporting pdf or png as landscape rather than the default of portrait?

maybe not an issue but more a misconfigured chart, i don't know

with the export module i can add shape and text
but there all coming to the center of the chart and i have not found how to move them (annoying)

i'm using 3.15.1 version of amcharts (with 1.2.1 version of export plugin)
and i try to update to lateste version of export plugin (1.2.8) but does not help

when i try to grab the object (shape or text) my pencil draws line ...

dear amcharts developer, i am having difficulties when trying to export my chart with multiple and dynamic data to image (PNG / JPG). when trying to export it, either as PNG or JPG, the charts turn blank and the cursor became + cursor, enabling me to draw anything inside instead of downloading the chart as image.

UPDATE

here is my code :

    var chartd = AmCharts.makeChart("chartd", {
        "type": "serial",
        "theme": "patterns",
        "dataProvider": {!! json_encode($gdata['d']['cactiData']) !!},
        "marginRight": 80,

        "graphs": [
        {
            "balloonText": "[[category]]: <b>[[value]]</b>",
            'valueField': 'bps',
            'title': "{{ $gdata['title']['Daily'] }}",
            'type': 'line',
            'fillColors':'00cf00',
            'fillAlphas': 0.7,
            'lineColor': '#00cf00',
            'lineAlpha': 1,
        },
        {
            "balloonText": "[[category]]: <b>[[value]]</b>",
            "valueField": "bps_to",
            'type': 'line',
            'fillColors':'Transparent',
            'fillAlphas': 0.3,
            'lineColor': '#072f97',
            'lineAlpha': 1,
            "title" : "{{ $gdata['title']['DailySC'] }}"
        },
        {
            "balloonText": "[[category]]: <b>[[value]]</b>",
            "valueField": "ninetyfifth",
            'type': 'line',
            'fillColors':'Transparent',
            'fillAlphas': 0.3,
            'lineColor': '#e10707',
            'lineAlpha': 1,
            "title" : "{{ $gdata['title']['DailyNF'] }}"
        }
        ],
        "categoryField": "hours",
        "categoryAxis": {
            'gridCount' : 10,
            'parseDates' : true,
            'minPeriod' : "mm",
            'dateFormats' : [
            { period: 'fff', format: 'JJ:NN:SS' },
            { period: 'ss', format: 'JJ:NN:SS' },
            { period: 'mm', format: 'JJ:NN' },
            { period: 'hh', format: 'JJ:NN' },
            { period: 'DD', format: 'MMM DD' },
            { period: 'WW', format: 'MMM DD' },
            { period: 'MM', format: 'DD MM YYYY' },
            { period: 'YYYY', format: 'YYYY'}
            ],
            "title" : "{{$gdata['d']['x_axis_title']}}",
            "titleBold" : false
        },
        "valueAxes":[{
            'title':'bits per second',
            'axisColor': "#FF6600",                                 
            'gridAlpha': 0.07,                                  
            'minimum': 0,
            'maximum': {{ $gdata['d']['cactiData'][0]['maxAll'] }},
            'unit': "{{ $gdata['d']['cactiData'][0]['unit'] }}",
        }],
        "chartScrollbar": {
            "autoGridCount": true,

            "scrollbarHeight": 40
        },
        "export": {
            "enabled": true,
        },
        "legend": {
            "useGraphSettings": true
        },
    });

i have included the libs in my blade layout as :

<script src="{{ asset('js/amcharts/amcharts.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/amcharts/serial.js') }}" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.js" type="text/javascript"></script>
<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet" type="text/css">

what i missed out? can you help me ? thank you

Hi i'm using the field balloonText to display the image in the charts like this

balloonText: img src='images/fly.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'>[[value]]

the only images that works are the ones in images folder in amcharts , i have tried with many png images downloaded from the internet but none of them works
maybe i need some modifications on images to make them works !!!
please help
thanks

Hi,

I would like to save the Amcharts JPG image in a server path without using any PHP and would like to know if I can use the export plugin for the same.

In the example below, onclick function will download the chart in JPG format directly into the Downloads folder of the user's desktop. Can I tweak it to save the chart in a particular server path (say ~Home/Script/102/Terminal) so that I can later use the file saved in the server path for further processing like uploading onto imgur.com etc. (the upload onto imgur.com etc will be done outside of Amcharts ofcourse)

"export": {
menu: [ {
label: "JPG",
click: function() {
this.capture({},function() {
this.toJPG( {}, function( data ) {
this.download( data, "image/jpg", "amCharts.jpg" );
});
});
}
} ]
}

When I try the code in the below example it works fine
https://www.amcharts.com/tutorials/export-charts-advanced/

Now when I use the "Annotation" mode in the setExport property, the hand drawn shapes etc. do not get logged into the base64 data. I used the rendered event listener like below:

chart.addListener("rendered", function(e) {

// WAIT FOR FABRIC
var interval = setInterval(function() {
if (window.fabric) {
clearTimeout(interval);

  // CAPTURE CHART
  e.chart.export.capture({}, function() {

    // SAVE TO JPG
    this.toJPG({}, function(base64) {

      // LOG IMAGE DATA
      console.log(base64);

      // CREATE LINK TO OPEN BASE64 IMAGE IN NEW TAB
      var a = document.createElement("a");
      a.setAttribute("href", base64);
      a.setAttribute("target", "_blank");
      a.setAttribute("style", "display: block; margin-top: 150px;");
      a.innerHTML = "Open embedded base64-image";

      var div = document.createElement("div");
      div.setAttribute("style", "position: absolute; width: 100%; top:0; bottom: 0; background-color: rgba(255,255,255,.9); z-index: 1337; display: block;text-align: center;");
      div.appendChild(a);

      this.setup.chart.div.appendChild(div);
    });
  });
}

}, 100);
});

How can I log the hand drawn shapes as I am trying to use the base64 and save it in a JPG in the server.

Thank you
SD

I'm using Your script as standalone.
I've got problem with order of columns in CSV.
toCSV({data: myData})
As data param I pass object which is like this column:value
Problem is that js is sorting object by alphabet and as a result columns in csv are sorted differently that I want. Is there a solution to change column order?

EDIT: I'ts not Your issue - openOffice's one

Is there a configuration option whereby you can set the value of the name of an xlsx worksheet for the xlsx export?