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

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. 🙂

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();
                }
            }
        }
        
});