6 Replies Latest reply on Aug 10, 2018 2:13 AM by Scott Wesley

    Different color bars same series JET chart?

    Keegan_W

      How do you do different bar colors in the same series for JET charts ? Legacy AnyChart currently looks like this and when upgrading through the wizard, changes to all blue bars.

       

       

      AnyChart:

      Different color bars.JPG

       

      After Upgrade to JET:

       

      Upgrade to JET.JPG

       

      Current APEX version: 5.1.2

        • 1. Re: Different color bars same series JET chart?
          Keegan_W

          Was directed to the Sample Charts app: https://apex.oracle.com/pls/apex/f?p=10800:9:0::NO

           

          Under Bar > Bar Chart (Series Colors) > Custom Colors via JavaScript

           

          It provided the following code to enter into Advanced > JavaScript Code in the Chart region attributes:

           

          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[ 0 ].items[0].color = "red";

            data.series[ 0 ].items[1].color = "blue";

            data.series[ 0 ].items[2].color = "yellow";

            data.series[ 0 ].items[3].color = "green";

            data.series[ 0 ].items[4].color = "purple";

            return data;

            };

           

            // Set chart initialization options

            return options;

          }

           

          The default colors are a bit bright so I dimmed them down with some Hex and now they look great:

           

          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[ 0 ].items[0].color = "#3D7FCB";

                  data.series[ 0 ].items[1].color = "#E14F45";

                  data.series[ 0 ].items[2].color = "#6DA680";

                  data.series[ 0 ].items[3].color = "#F3CF6C";

                  return data;

              };

               

              // Set chart initialization options

              return options;

          }

           

           

          Result:

           

          woo.JPG

          • 2. Re: Different color bars same series JET chart?
            Hilary Farrell-Oracle

            Hi Keegan,

             

            I hope you're keeping well, and I'm happy to see that another customer on Twitter pointed you in the direction of the Sample Charts app.  The changing of colours was actually one of the demos I covered during my session at KScope, if you recall.  The colours can also be set at series level, if you'd prefer not to add JavaScript to the chart - the 'SQL Series-Defined Colors' example on page 9 demonstrates that approach.

             

            I saw your tweet in relation to finding it difficult to upgrade your AnyChart charts to JET, due to the charts having 'lost as lot of declarative customization'.  Could you please let me know specifically what customisations it is that you feel are missing?  AnyChart and JET are two very different charting solutions, and some options that were supported by AnyChart (e.g. 3D effect on all charts) just aren't available with JET.  However, if there are attributes that can easily be included to extend the JET declarative support, without overloading Page Designer, I'll certainly take a look at them for a future release of APEX.  Thanks in advance for taking the time to provide the additional information.

             

            Thanks,

            Hilary

            • 3. Re: Different color bars same series JET chart?
              Keegan_W

              Hi Hilary,

               

              Nice to hear from you - thanks for taking the time to read my posts! 

               

              Your Sample Charts app is very helpful and I've saved it in my favourites.  The Color attribute at the series level wouldn't have worked for me in this case as it's one series with multiple colours.  I'm also not sure how the JavaScript solution might work if there wasn't a fixed number of bars on the chart?

               

              Some declarative attributes we miss from AnyChart are the coloring (as discussed in this thread) as well as axis label formatting (font, size, format mask, rotation).  I had another issue with rotating date labels so they appeared vertical and the solution I received from the forums was to do a TO_CHAR in the SQL to change the dates so that the Time Axis Type attribute would work on them to achieve the format it had prior to JET chart upgrade.  Thread here: Date axis label rotation for JET chart upgrade

               

              I've also found that the drilldown on some of my charts stops working after upgrade due to the way the variables are passed (#LABEL# versus &LOCATION_DESC.)

               

              Thanks!

              • 4. Re: Different color bars same series JET chart?
                Scott Wesley

                Colours are declarative and data driven, at series level. Here's how I refer to my SQL column.

                 

                Depending on your exact patch level, there was an issue with linking within charts.

                Re: Oracle JET link target

                • 5. Re: Different color bars same series JET chart?
                  Hilary Farrell-Oracle

                  Thanks Keegan,

                   

                  Thanks a mill for your follow-up comments.  I'll try to address each of them now...

                   

                  The Color attribute at the series level wouldn't have worked for me in this case as it's one series with multiple colours.

                  Cheers Scott, for pointing out the declarative colour option - that's exactly the option I was referring to in my previous post: the 'SQL Series-Defined Colors' example demonstrates this, and how the Color attribute can be used in this manner:

                   

                   

                  I'm also not sure how the JavaScript solution might work if there wasn't a fixed number of bars on the chart?

                  You'd just need to modify the JS so it's looping through the array of items on the chart - rather than specifically referencing each element of the item[] array.  I've added an example to my sample app, here:

                  https://apex.oracle.com/pls/apex/f?p=36648:187.  So hopefully that'll help.

                   

                  ...as well as axis label formatting (font, size, format mask, rotation)

                  Ah yes, I remember discussing this topic with yourself and your colleagues during the office hours session at KScope - specifically the font, size and rotation.  Lets take each one of your list separately:

                   

                  Font, Size - JET supports a 'style' attribute on each axis of a chart, which supports defining a CSS style. The CSS style object defining the style supports color, fontFamily, fontSize, fontStyle, fontWeight, textDecoration, cursor, backgroundColor, borderColor, borderRadius, and borderWidth properties - but similar to the 'rotation' attribute, it only applies to a categorical axes.  We don't currently expose this attribute declaratively, but I've got an enhancement request logged to track this - so it's on my list!  So in the meantime, you will have to continue using JS code to apply changes here, similar to the examples here: https://apex.oracle.com/pls/apex/f?p=36648:165 .

                   

                  Format Mask - there is already declarative support for applying formatting to values on the axes and chart elements, and that's via the 'Format Type' attribute.  That attribute can be used to define a specific JET Date format mask to Datetime information, or Decimal / Currency / Percent formatting to numeric values.  If you wish to customise the Datetime format to something other than the JET-supported formats, then the 'Pattern' attribute can be used:

                   

                  There are various examples contained in the Sample Charts app, see https://apex.oracle.com/pls/apex/f?p=10800:38:::NO::: .  What's important to note is that if your axis Column is Datetime data, then you must enable the 'Time Axis Type' chart-level attribute.  Without that attribute set, JET won't know how to properly render the information on the chart.

                   

                  Rotation - as mentioned at KScope, this is certainly one attribute that differs to the previous AnyChart support.  Where with the legacy solution you had the ability to define the degree of rotation (e.g 90 degrees), the JET API just doesn't offer that level of support.  The ojChart API only supports rotation for the x-axis tickLabel attribute (i.e. the value displayed under each chart element on the x-axis): see https://docs.oracle.com/en/middleware/jet/4.2.0/reference-api/oj.ojChart.html#xAxis.tickLabel.rotation which states

                   

                  "Defines whether the chart will automatically rotate the labels by 90 degrees in order to fit more labels on the axis. The rotation will only be applied to categorical labels for a horizontal axis"

                   

                  So as stated in their API, the rotation attribute will only impact categorical labels - which is why the TO_CHAR function usage allowed you to achieve the rotation.  The attribute is not applied to DateTime labels.  That is a limitation of the JET API, and nothing we can change, unfortunately.

                   

                   

                  I've also found that the drilldown on some of my charts stops working after upgrade due to the way the variables are passed (#LABEL# versus &LOCATION_DESC.)

                  As Scott referred to, I believe this was an issue with one of the early 5.1.x patch releases.  I strongly encourage you to upgrade to our latest release, 18.1 - but if that's too big a leap, at a minimum move to 5.1.4.

                   

                  I hope this helps.  If anything else springs to mind in terms of declarative support you'd hope to see for charts, please do let me know, and if it's feasible to add (assuming the JET API supports it), then we'll certainly consider it for a future release.  Regards to your colleagues - it was a pleasure getting to meet ye in person during the summer.

                   

                  Regards,

                  Hilary

                  • 6. Re: Different color bars same series JET chart?
                    Scott Wesley

                    Ahh, yes. Either I missed/ignored that reference, or maybe I was thinking an inline screenshot would help readers. ;p

                     

                    I also missed this key statement from Keegan:

                    one series with multiple colours

                    So that extra sample you created is great. No doubt we've got some use-cases for that, too.