{"id":1029,"date":"2015-09-02T16:51:38","date_gmt":"2015-09-02T16:51:38","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=1029"},"modified":"2015-09-02T17:03:09","modified_gmt":"2015-09-02T17:03:09","slug":"save-as-image-oracle-apex","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/","title":{"rendered":"Saving AnyChart 6 Charts as Images in Oracle APEX"},"content":{"rendered":"

NOTE: This article tells how to set up the script in Oracle APEX and doesn’t affect AnyChart customers who use AnyChart outside of Oracle APEX.<\/b><\/p>\n

Oracle Application Express is a web-based application development tool integrated with all editions of Oracle Database. It enables users with limited programming skills to easily develop secure web applications that run inside their Oracle Database, and scale to support tens, hundreds, or thousands of users.<\/p>\n

Since Oracle Application Express Release 3.0, AnyChart is used as a charting engine (you can read about this in a success story: Oracle Chooses AnyChart Solution for Latest Release of Oracle\u00ae Application Express<\/a>). <\/p>\n

One of the nice features available in AnyChart since version 4.1.0<\/a> is the ability to save a Flash chart as an image – in order to make it possible, we have to use a server-side script, which is hosted on the AnyChart.Com site by default (read more about saving charts as images in AnyChart 6<\/a>).<\/p>\n

Federico Bonifazi from Geko Sistemi Informativi s.r.l. shared a solution that allows to save charts as images on the server side. We are very thankful for that and present it here for anyone who wants to do the same. This tutorial is very basic and is not a ready-to-go solution, but it gives the general idea, so you can use it to break ground on your project.<\/p>\n

This configuration in based on Oracle Standard Edition on a Linux server, Oracle Rest and Tomcat are used.<\/p>\n

<\/p>\n

1. Things to do in an Oracle APEX page<\/b><\/p>\n

1.1. Add the following to the html header of the page:<\/b>
\n
\n<script type=\"text\/javascript\" src=\"\/i\/flashchart\/anychart_6\/js\/AnyChart.js\"><\/script>
\n<script type=\"text\/javascript\" language=\"JavaScript\">
\n\/\/<![CDATA[<\/p>\n

AnyChart.swfFile = \"\/i\/flashchart\/anychart_6\/swf\/OracleAnyChart.swf\";<\/p>\n

function makeMultipartFormDataPostRequest(path, params) {
\n var xmlhttp = false;
\n var formData = new FormData();<\/p>\n

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
\n try {
\n xmlhttp = new XMLHttpRequest();
\n } catch (e) {
\n xmlhttp=false;
\n }
\n }<\/p>\n

if (!xmlhttp && window.createRequest) {
\n try {
\n xmlhttp = window.createRequest();
\n }catch (e) {
\n xmlhttp=false;
\n }
\n }
\n xmlhttp.open('POST', path, false);
\n for (var propName in params) {
\n formData.append(propName, params[propName]);
\n }
\n return xmlhttp.send(formData);
\n }<\/p>\n

function saveChartAsImage(chartName, chart) {
\n var requestData = {};
\n requestData['sessione'] = '&SESSION.';
\n requestData['imgName'] = chartName;
\n requestData['imgType'] = 'png';
\n requestData['imgDesc'] = 'nn';
\n requestData['imgData'] = chart.getPNG();<\/p>\n

var path = makeMultipartFormDataPostRequest('http:\/\/localhost:8080\/apex\/report\/saveImage\/saveChart', requestData);
\n }
\n \/\/]]>
\n<\/script>
\n<\/code><\/p>\n

1.2. Create a Flash chart:<\/b>
\n
\n<div id=\"report\">
\n <div id=\"chart_container1\"><\/div>
\n <script type=\"text\/javascript\" language=\"javascript\"><\/p>\n

var chart = new AnyChart();
\n chart.setXMLData($v('P205_CHARTO1_XML'));<\/p>\n

chart.addEventListener(\"draw\", function() {
\n saveChartAsImage(\"chart1\", chart);
\n });<\/p>\n

chart.write(\"chart_container1\");
\n <\/script>
\n<\/div>
\n<\/code><\/p>\n

P205_CHART1_XML is hidden and filled with the dynamic content based on a query.<\/p>\n

2. RestFull Service<\/b><\/p>\n

2. Create a RestFull Service:<\/b>
\nOn Oracle APEX main page -> SQL Workshop -> RESTful services<\/p>\n

RESTful Service Module: report
\nURI Prefix: saveImage\/<\/p>\n

2.1. then create<\/b>
\nRESTful Service Module: report
\nURI Template: saveChart<\/p>\n

2.2. Create POST Handler with PL\/SQL code:<\/b>
\n
\nbegin
\n :status := saveBase64toBlob
\n (
\n pSession => :session,
\n pImgName => :imgName,
\n pImgType => :imgType,
\n pImgDesc => :imgDesc,
\n pImgData => :imgData
\n );
\nend;
\n<\/code><\/p>\n

3.Saving the image to a table<\/b><\/p>\n

saveBase64toBlob converts the base64 png to a blob and into the tbl_image:
\n
\n function saveBase64toBlob
\n (
\n pSession varchar2,
\n pImgName varchar2,
\n pImgType varchar2,
\n pImgDesc varchar2,
\n pImgData clob
\n ) return integer
\n is
\n retVal integer;
\n l_clob clob;
\n l_blob blob;
\n l_offset number;
\n v_buffer_size binary_integer := 48;
\n v_buffer_varchar varchar2(48);
\n v_buffer_raw raw(48);<\/p>\n

begin
\n -- initialize
\n dbms_lob.createtemporary(l_blob, true);
\n l_offset := 1;
\n retVal := 0;<\/p>\n

-- remove CRLF
\n l_clob := REPLACE(pImgData, chr(10), '');
\n l_clob := REPLACE(l_clob, chr(13), '');<\/p>\n

for i in 1 .. ceil(dbms_lob.getlength(l_clob) \/ v_buffer_size)
\n loop
\n dbms_lob.read(l_clob, v_buffer_size, l_offset, v_buffer_varchar);
\n v_buffer_raw := utl_raw.cast_to_raw(v_buffer_varchar);
\n v_buffer_raw := utl_encode.base64_decode(v_buffer_raw);
\n dbms_lob.writeappend(l_blob, utl_raw.length(v_buffer_raw), v_buffer_raw);
\n l_offset := l_offset + v_buffer_size;
\n end loop;<\/p>\n

insert into tbl_image
\n (
\n session,
\n img_name,
\n img_type,
\n img_desc,
\n img_data,
\n data_ora
\n )
\n values
\n (
\n pSession,
\n pImgName,
\n pImgType,
\n pImgDesc,
\n l_blob,
\n sysdate
\n );
\n commit;
\n return retVal;
\n end saveBase64toBlob;
\n<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

NOTE: This article tells how to set up the script in Oracle APEX and doesn’t affect AnyChart customers who use AnyChart outside of Oracle APEX. Oracle Application Express is a web-based application development tool integrated with all editions of Oracle Database. It enables users with limited programming skills to easily develop secure web applications that […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,14,4],"tags":[],"class_list":["post-1029","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-oracle-apex","category-tips-and-tricks","wpautop"],"yoast_head":"\nSaving AnyChart 6 Charts as Images in Oracle APEX | AnyChart News<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Saving AnyChart 6 Charts as Images in Oracle APEX | AnyChart News\" \/>\n<meta property=\"og:description\" content=\"NOTE: This article tells how to set up the script in Oracle APEX and doesn’t affect AnyChart customers who use AnyChart outside of Oracle APEX. Oracle Application Express is a web-based application development tool integrated with all editions of Oracle Database. It enables users with limited programming skills to easily develop secure web applications that […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-02T16:51:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-09-02T17:03:09+00:00\" \/>\n<meta name=\"author\" content=\"Timothy Loginov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Timothy Loginov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/\"},\"author\":{\"name\":\"Timothy Loginov\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/a944a69f34509440ab4a9b5ead73caa6\"},\"headline\":\"Saving AnyChart 6 Charts as Images in Oracle APEX\",\"datePublished\":\"2015-09-02T16:51:38+00:00\",\"dateModified\":\"2015-09-02T17:03:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/\"},\"wordCount\":349,\"commentCount\":1,\"articleSection\":[\"AnyChart Charting Component\",\"Oracle Apex\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/\",\"name\":\"Saving AnyChart 6 Charts as Images in Oracle APEX | AnyChart News\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"datePublished\":\"2015-09-02T16:51:38+00:00\",\"dateModified\":\"2015-09-02T17:03:09+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/a944a69f34509440ab4a9b5ead73caa6\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Saving AnyChart 6 Charts as Images in Oracle APEX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/a944a69f34509440ab4a9b5ead73caa6\",\"name\":\"Timothy Loginov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/00860a412d134244a5234231874065a30044d4d59f78aef4cca746e1e2dd3691?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/00860a412d134244a5234231874065a30044d4d59f78aef4cca746e1e2dd3691?s=96&r=g\",\"caption\":\"Timothy Loginov\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/timothy-loginov\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Saving AnyChart 6 Charts as Images in Oracle APEX | AnyChart News","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/","og_locale":"en_US","og_type":"article","og_title":"Saving AnyChart 6 Charts as Images in Oracle APEX | AnyChart News","og_description":"NOTE: This article tells how to set up the script in Oracle APEX and doesn’t affect AnyChart customers who use AnyChart outside of Oracle APEX. Oracle Application Express is a web-based application development tool integrated with all editions of Oracle Database. It enables users with limited programming skills to easily develop secure web applications that […]","og_url":"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2015-09-02T16:51:38+00:00","article_modified_time":"2015-09-02T17:03:09+00:00","author":"Timothy Loginov","twitter_card":"summary_large_image","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Timothy Loginov","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/"},"author":{"name":"Timothy Loginov","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/a944a69f34509440ab4a9b5ead73caa6"},"headline":"Saving AnyChart 6 Charts as Images in Oracle APEX","datePublished":"2015-09-02T16:51:38+00:00","dateModified":"2015-09-02T17:03:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/"},"wordCount":349,"commentCount":1,"articleSection":["AnyChart Charting Component","Oracle Apex","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/","url":"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/","name":"Saving AnyChart 6 Charts as Images in Oracle APEX | AnyChart News","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"datePublished":"2015-09-02T16:51:38+00:00","dateModified":"2015-09-02T17:03:09+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/a944a69f34509440ab4a9b5ead73caa6"},"breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2015\/09\/02\/save-as-image-oracle-apex\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Saving AnyChart 6 Charts as Images in Oracle APEX"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/a944a69f34509440ab4a9b5ead73caa6","name":"Timothy Loginov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/00860a412d134244a5234231874065a30044d4d59f78aef4cca746e1e2dd3691?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/00860a412d134244a5234231874065a30044d4d59f78aef4cca746e1e2dd3691?s=96&r=g","caption":"Timothy Loginov"},"url":"https:\/\/www.anychart.com\/blog\/author\/timothy-loginov\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/1029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=1029"}],"version-history":[{"count":30,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/1029\/revisions"}],"predecessor-version":[{"id":1061,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/1029\/revisions\/1061"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=1029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=1029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=1029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}