Can you automatically take an image of a chart and attach it to a record?

I’d like to create a button that in one click attaches an image of a chart to a record in Salesforce.

I can conceive of some javascript that would either target the hamburger icon on a chart and click it, OR access the highcharts library directly so that you could have a download by clicking a button.

Is there any javascript that can create an attachment on a Salesforce record from a given file? 

My use case is we have a Meetings module where an agenda item could display a chart, and after the meeting is over we need to preserve exactly what was seen in the meeting. So I’m looking for a button “Lock Meeting” that would create an image of exactly what the chart is displaying at the time and attach to the agenda item. 

Jack,

I helped with some Skuid page builds that were targeted for use on a tablet.  What I saw is that when you click the File Upload ‘button’, the tablet presented an option to take a picture along with uploading a file from the device.  I think you should test this with your page.  You may not need any JavaScript.

Thanks,

Bill

Thanks Bill, but not quite what I’m looking for. 

I’m looking at the Download PDF Document function on skuid’s charts components. I’d like a button that automatically creates that PDF and attaches it to a given record id. 

Jack,

Yep…I misunderstood what you were trying to do.

There is an ‘exportChart’ function in Highcharts.  See here->  https://stackoverflow.com/questions/20572744/how-to-export-a-highchart-chart-to-pdf-thanks-to-a-button-outside-the-chart

Highcharts Fiddle:

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/chart-exportchart-filename/

Thanks,

Bill

I think there’s some way to make the drop down menu do this instead of showing the drop down menu. You can add an onclick function to it, and even change the icon

https://api.highcharts.com/highcharts/exporting.buttons.contextButton

This sounds like a great candidate for a Component Action on the Chart component — so that you could have a button which lets you declaratively capture the chart as a PDF / JPEG and then allow you to store it to the locations that we support for the File Upload component, e.g. for Salesforce, attachments / content documents / etc. Would also be great to be able to just initiate the download using your own custom buttons instead of relying on the user to click the icon.

Agree! I actually checked to see if it was, just in case maybe y’all had snuck it in there when I wasn’t looking. :slight_smile:

Thanks Bill. Any ideas on how to select the chart from within skuid? The snippets from highcharts have the chart being created within the JS snippet, or that stack overflow link suggests using var chart = $(‘#container’).highcharts();

I can select my chart’s div using document.querySelector(‘#chartUniqueId’) but that’s not anywhere close to the actual chart itself. 

In the console inspection, it appears that there’s a div with a class of highcharts-container, but the id of that div changes on every page load. I would need to "select the div with the class highcharts-container that is a child of the child of the child of the div with the id of myChartUniqueId


Jack,

I have not tried accessing the chart from the Skuid page itself.  If I don’t think I can add the code to the Before Render snippet, I will just add a template component and render the chart there since I can guarantee the id of the chart div.

Thanks,

Bill

There is a chartMap in the component. I use this when doing drilldowns because Skuid doesn’t change the id when drilling back up. You can assign unique id to chartset in XML.

Just a follow up here, I was able to remove all the menu items and make the icon just a single-click export of the chart:

var chart = arguments[0];
$ = skuid.$;

$.extend(true, chart.exporting,{
        buttons: {
            contextButton: {
                menuItems: null,
                onclick: function () {
                    this.exportChart();
                }
            }
        }
        
});