Skip to main content

SVG Pattern fill for Gantt Charts

In one of the previous applications I have developed, there was a requirement to show several types of entries in the Gantt chart and I must use visually distinct colors so it would be easy for users to understand which task bar is referring to which task type. Even though there are lot of different colors available technically, distinguishing nearby colors, without keeping them side by side is not easy. Users can recognize basic colors, beyond that it gets tricky. In such cases, we need something beyond colors to fill our charts.

Gantt Chart with SVG Pattern Fill

SVG Patterns

SVG Patterns are somewhat similar to HTML5 templates. HTML5 template tag can contain some HTML, but it will not be rendered when page is loaded. Later, we can use the template using JavaScript. In similar fashion, SVG Patterns holds graphic object, but it will not be rendered. However, the pattern can be used for other elements by referencing the pattern in the fill and/or stroke attributes. You can have quick look here to understand more about pattern element.

Now, to use SVG pattern as fill (background color), we first need to define a pattern. So, let's put below pattern code in Page > Header and Footer > Footer Text section.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <pattern id="honeycomb" patternUnits="userSpaceOnUse" width="56" height="100">
            <rect width='56' height='100' fill='#f8d203' />
            <path d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='#fff629' stroke-width='2' />
            <path d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='#ffe503' stroke-width='2' />
        </pattern>
    </defs>
</svg>

This code gives us honeycomb pattern. If you want to use any other patterns, you can refer this website. If you like any pattern, just click on the get code button. That should take you to a JSBIN page. There, you can see the SVG code. If you want, you can tweak it according to your needs. After that, copy the SVG code and paste it into APEX page. When you are copying code from JSBIN page, you can use below SVG template. Basically, you have to copy pattern code from JSBIN page and then you need to copy it into pattern tag. Please read inline comments in below SVG code.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <!--
          give unique id for this pattern, we will use id later to refer this pattern
          copy the SVG element width and height from JSBIN example to here.
        -->
        <pattern id="some_unique_id" patternUnits="userSpaceOnUse" width="56" height="100">
            <!-- copy SVG code from JSBIN to here, excluding SVG tags,   -->            
        </pattern>
    </defs>
</svg>

Using SVG Patterns for Gantt Charts

We can define classes for Gantt chart task bars. Using CSS classes, we can refer SVG patterns. For e.g. if Gantt chart task has demo-honeycomb class, then you can use below CSS code to use SVG pattern as background. Observe, we are using the pattern id honeycomb which we have defined in the above step.
 
path.demo-honeycomb {
  fill: url(#honeycomb);  
}

If you are not sure how to specify custom CSS classes for Gantt Chart task bars, you may refer "Colors and Borders" section in Few tips on Gantt Charts blog post.
 

Using Patterns for Other Chart Types

You can use patterns in other chart types in relatively easy way. For e.g. if you have a Pie chart with multiple defined series and you want to give pattern fill for series 2, then you can do it using below code. You need to put this code in Chart > Attributes > Advanced > JavaScript Initialization Code section.

function( options ){
    // Setup a callback function which gets called when data is retrieved, it allows to manipulate the series
    options.dataFilter = function( data ) {
        data.series[2].pattern = "largeCrosshatch";
        return data;
    };
    // Set chart initialization options
    return options;
}

You can also refer "Area Chart (Color JavaScript Code Customization)" chart in Page-2 in Sample Charts application for similar example. You can refer JET Documentation for list of patterns supported (check DataItem section, look for pattern property).


Thank You.

Comments

ToreG said…
Hi Hari, Thanks fro the tutorial. I used your tip successfully in Apex 21.1. After the upgrade to Apex 21.2 it seems that the universal theme is now rendering the svg definition in the footer. I have a 300 px empty box on the top of the page. Any ideas on how to solve this?
Hari said…
Hi Tore,

You can provide height 0 for svg tag. That should fix the issue.

<svg style="height:0;" xmlns="http://www.w3.org/2000/svg" version="1.1"

Regards,
Hari
ToreG said…
Thank you Hari, it worked perfectly
Divya said…
This comment has been removed by the author.

Popular posts from this blog

Interactive Grid - Conditional Enable/Disable

In this blogpost, I am going to discuss few approaches using which we can conditionally enable/disable Interactive Grid (IG) column(s) based on other column(s) values. Note:    There is a bug  30801170  in APEX 19.2/20.1 with respect to "enable/disable" dynamic actions for IG columns. Workaround for this bug is provided at the end of this blogpost . This bug has been fixed in APEX version 20.2. Client Side Only Conditions If conditions to enable/disable are simple, then we can check those conditions easily on the client side. For e.g. let's consider IG on EMP table with following SQL Query. SELECT EMPNO, ENAME, JOB, MGR, HIREDATE, SAL, COMM, DEPTNO FROM EMP Let's consider the requirement as - Enable "Commission" column only when JOB is equals to 'SALESMAN' and disable "Commission" column in all other cases. This can be done declaratively using dynamic actions (DA) DA "Enable/Disable Commission - 1" Create DA and give it a prope

Interactive Grid - Bulk Operation on Selected Rows

What's the Problem? Let's say you have an IG on employee table and you want to update selected employees commission based on user's input. Ideally, it should be very simple, where you can write UPDATE statement in page process and select IG region as "Editable Region" under "Execution Options" of the page process. But, when you select rows and submit page, you can see that, this process won't get executed! The reason is  Selection of 'Row Selector' check-boxes is not considered as row-change. Thus selected rows are not submitted to server. So, is there any work around?  Yes! Luckily there are lot of JavaScript (JS) APIs available to work with IG. If you are not already aware, you can refer "APEX IG Cookbook"  or  JavaScript API Reference documentation. If we continue with above Employee IG example, when user selects IG rows, enters "Commission %" and clicks on "Update Commission" button, then we can writ

Interactive Grid - Process Filtered Data on Server Side

Recently one of the APEX developers has reached out to me and asked if it's possible to capture filtered rows data of the Interactive Grid on the server-side and do some processing. In APEX 20.1, there is a new API APEX_IG , using which we can achieve this. Photo by Jakub Kapusnak on Unsplash The approach is very simple and straightforward. Get the internal region id based on the Static ID given for the IG region Get the last viewed report id based on region id Open query context for the region and report using region id and report id Fetch and loop through the rows using the query context Do something with fetched rows And finally, close the query context If you have already done this for interactive reports, then you should be already aware of these steps. The only difference here is, we use APEX_IG APIs instead of APEX_IR APIs. For the demo purpose, let's Build an Interactive Grid on EMP table and let's give it a Static ID as emp Create a Textarea page item with