6 Replies Latest reply on Apr 8, 2017 12:15 PM by pjsiong-JavaNet

    New stack chart in Apex 5.1

    pjsiong-JavaNet

      Hi

      I am trying to create a chart as below, a sample from the Apex 5.1 sample chart package app.

      However, I could not find the way to display different color for series even I use the similar sql.

      what else step I missed to display different color for different series ?

       

      The sql of  below sample chart indicate the color (although the "red" color do not show the correct color).

      select id,

             project as label,

             NVL((select sum(t.budget) from eba_demo_chart_tasks t where t.project =  p.id and t.budget > t.cost),0) as value,

             'under budget' as series ,

             'green' as color

        from eba_demo_chart_projects p

      union all

      select id,

             project as label,

             NVL((select sum(t.budget) from eba_demo_chart_tasks t where t.project =  p.id and t.budget <= t.cost),0) as value,

             'over budget' as series ,

             'red' as color

        from eba_demo_chart_projects p

        • 1. Re: New stack chart in Apex 5.1
          pjsiong-JavaNet

          Hi,

          I just noticed that to make the chart work properly, different series must have same number of rows with same label,

          otherwise the chart will be stacked wrongly. (can this consider a bug ?)

          By the way, the chart still not show the correct color even we put 'red' in the sql.

           

          Rgds

          Vincent

          • 2. Re: New stack chart in Apex 5.1
            Hilary Farrell-Oracle

            Hi Vincent,

             

             

            The sql of below sample chart indicate the color (although the "red" color do not show the correct color).

            select id,

            project as label,

            NVL((select sum(t.budget) from eba_demo_chart_tasks t where t.project = p.id and t.budget > t.cost),0) as value,

            'under budget' as series ,

            'green' as color

            from eba_demo_chart_projects p

            union all

            select id,

            project as label,

            NVL((select sum(t.budget) from eba_demo_chart_tasks t where t.project = p.id and t.budget <= t.cost),0) as value,

            'over budget' as series ,

            'red' as color

            from eba_demo_chart_projects p

             

            While the chart query includes colour information, it's just not being utilised in this particular example. That's the only reason you're not seeing red reflected on the chart for the 'over budget' series.  If you do want to apply it to the chart, you just need to reference that column in the series-level 'Color' attribute:

             

             

             

            In relation to the rendering of the data - JET requires that each series of the chart contain the same number of data points, otherwise it will just render them in the order in which they appear in the JSON object - which may not be the expected result.  The handling of nulls needs to be done by the query, but we may revise this behaviour in a future release.

             

            Regards,

            Hilary

            1 person found this helpful
            • 3. Re: New stack chart in Apex 5.1
              fac586

              pjsiong-JavaNet wrote:

               

              I just noticed that to make the chart work properly, different series must have same number of rows with same label,

              otherwise the chart will be stacked wrongly. (can this consider a bug ?)

              Hilary Farrell-Oracle wrote:

               

              In relation to the rendering of the data - JET requires that each series of the chart contain the same number of data points, otherwise it will just render them in the order in which they appear in the JSON object - which may not be the expected result. The handling of nulls needs to be done by the query, but we may revise this behaviour in a future release.

              Partitioned outer joins are a good way to address this type of data densification problem. See previous discussion on this topic:Series Name in JET Charts

              • 4. Re: New stack chart in Apex 5.1
                pjsiong-JavaNet

                Thanks Hilary

                By the way, do you know how can we modify the font-size of the value ?

                • 5. Re: New stack chart in Apex 5.1
                  Hilary Farrell-Oracle

                  Hi Vincent,

                   

                  Apologies for the delay in responding - I'm catching up on a number of threads on topics that I demonstrated during my presentation at APEX World last week.  I'm in the process of adding new examples to my sample app, including one to demo changing the font colour/size of labels on a chart.  The series-level 'CSS Classes' attribute should really be named 'CSS Styling', as it accepts a CSS style like the following: font-size:14px;color:white; - so we will ensure the naming of at attribute is updated for APEX 5.2, along with its item-level help.  I've added an example here: https://apex.oracle.com/pls/apex/f?p=36648:165 , and will update the Sample Charts app for 5.2 also.

                   

                  Regards,

                  Hilary