1 2 Previous Next 21 Replies Latest reply on May 24, 2017 10:12 PM by sk*419893*er

    line chart to scale

    sk*419893*er

      Having trouble figuring this out. Can you create a line chart with a numerical x-axis that is to scale?

       

      Thanks.

       

      Bill

        • 2. Re: line chart to scale
          sk*419893*er

          I should have been more precise. I have data that is numerical x,y as shown below, the altitude of an aircraft arriving at its destination. I want the x axis to have constant increments between each tick, so the axis will be to scale. Right now, ApEx is treating each point as if it was just the next point in the list, not a varying distance from the end of a trajectory. How do I get ApEx to build a normal mathematical x axis and graph the x,y points in a flash chart? Thanks.

           

          Bill

          thechart.png

          • 3. Re: line chart to scale
            fac586

            sk*419893*er wrote:

             

            I should have been more precise. I have data that is numerical x,y as shown below, the altitude of an aircraft arriving at its destination. I want the x axis to have constant increments between each tick, so the axis will be to scale. Right now, ApEx is treating each point as if it was just the next point in the list, not a varying distance from the end of a trajectory. How do I get ApEx to build a normal mathematical x axis and graph the x,y points in a flash chart?

            You must supply full details of your environment and application when asking a question to enable effective version-, environment-, and component-specific solutions to be provided.

             

            Is this really a Flash chart? In your last question you said you were using APEX 5.1.1, in which AnyChart Flash charts were replaced by Oracle JET as the default chart component.

             

            In either case, the solution is to change the chart type from Line to Scatter [Marker].

            • 4. Re: line chart to scale
              sk*419893*er

              Yes, you're right I should have included more details. I am using 5.1.1.00.08 and did not know that bit about Oracle JET. Thank you for the education. If I may, can I ask is there a way to make ApEx connect the points? In the Series properties there is a line option but it didn't seem to do anything.

               

              Bill

              • 5. Re: line chart to scale
                fac586

                sk*419893*er wrote:

                 

                Yes, you're right I should have included more details. I am using 5.1.1.00.08 and did not know that bit about Oracle JET. Thank you for the education. If I may, can I ask is there a way to make ApEx connect the points? In the Series properties there is a line option but it didn't seem to do anything.

                This appears to be a bug with the Line properties. Only two—Style and Width—can be specified declaratively in the APEX property sheet. However there are three attributes—lineStyle, lineWidth, and lineType in the JET chart object, and all three must be set in order for the lines connecting the plots to appear.

                 

                A workaround is available by setting all 3 line properties manually in the Advanced JavaScript Code property of the chart region's Attributes:

                 

                function (options) {
                    options.dataFilter = function (data) {
                        // See linked JET documentation for supported options
                        data.series[0].lineStyle = "solid";
                        data.series[0].lineType = "straight";
                        data.series[0].lineWidth = 2;
                        return data;
                    };
                    return options;
                }
                

                 

                See the Sample Charts application for more information.

                 

                Hilary Farrell-Oracle: Is this a bug?

                • 6. Re: line chart to scale
                  sk*419893*er

                  That's brilliant! It worked instantly, but only for the primary series. I had added 3 other series and they show no change. However, I don't want the last two to have lines. Here's the current status:

                   

                  draft profiles.png

                   

                  Leave it to me to find a friggin bug.

                   

                  OK, then can I ask one more? How do I control the chart appearance? I'd like darker gridlines, maybe a white background...just want to make it more readable.

                  • 7. Re: line chart to scale
                    fac586

                    sk*419893*er wrote:

                     

                    That's brilliant! It worked instantly, but only for the primary series. I had added 3 other series and they show no change. However, I don't want the last two to have lines. Here's the current status:

                     

                    draft profiles.png

                     

                    Leave it to me to find a friggin bug.

                     

                    OK, then can I ask one more? How do I control the chart appearance? I'd like darker gridlines, maybe a white background...just want to make it more readable.

                    That's why you should always explain the whole problem. I simplified the original code I copied because only one series was mentioned! For the first 2 series use:

                     

                    function (options) {
                        options.dataFilter = function (data) {
                            for (var g = 0; g < 2; g++) {
                                data.series[g].lineStyle = "solid";
                                data.series[g].lineType = "straight";
                                data.series[g].lineWidth = 2;
                            }
                            return data;
                        };
                        return options;
                    }
                    

                     

                    As for appearance, it looks like you aren't using the Universal Theme, which complicates matters. The most recent advice on formatting JET charts involves customising UT theme styles using the Theme Roller:APEX 5.1.1, JET Charts, increase font size of all texts

                     

                    If this isn't available, you'll have to create a custom style sheet and attach it to the app. Add it using the User Interface CSS File URLs rather than modifying page templates.

                    • 8. Re: line chart to scale
                      sk*419893*er

                      I owe you. You wrote some code for me - I really appreciate it! The result looks good. I switched over to the Universal Theme and it looks much better, except for some peripheral issues with controlling column widths. Seems like that's always a struggle with ApEx. I'll watch this video:

                      https://www.youtube.com/watch?v=2uBQF7wk3zg

                       

                      Thanks again.

                       

                      Bill

                      • 9. Re: line chart to scale
                        sk*419893*er

                        Gotta ask one more.

                         

                        If I want to differentiate the line properties using the javascript, what parameter can I use to identify the individual series? Is there a data.something I can hook onto? My chart is looking good.

                         

                         

                        Bill

                         

                        1. function (options) { 
                        2.     options.dataFilter = function (data) { 
                        3.         for (var g = 0; g < 2; g++) { 
                        4.             data.series[g].lineStyle = "solid"
                        5.             data.series[g].lineType = "straight"
                        6.             data.series[g].lineWidth = 2
                        7.         } 
                        8.         return data; 
                        9.     }; 
                        10.     return options; 
                        • 10. Re: line chart to scale
                          fac586

                          sk*419893*er wrote:

                           

                          If I want to differentiate the line properties using the javascript, what parameter can I use to identify the individual series? Is there a data.something I can hook onto? My chart is looking good.

                          It is indeed.

                           

                          Differentiate what properties? How?

                           

                          The JET Chart object is documented here. groups has various properties that might be used for identification purposes. The APEX example I'm looking at only seems to have set a name...

                          • 11. Re: line chart to scale
                            Hilary Farrell-Oracle

                            Hi Paul,

                             

                            Yes, it is indeed a bug - the Line 'Type' attribute should be visible in Property Editor for a Scatter chart.  So I've logged bug 26030893 and it will be resolved in our next patch release, 5.1.2.  In the meantime, your suggested workaround of using the JavaScript Code attribute will do the trick. Thanks for bringing this to my attention.

                             

                            Regards,

                            Hilary

                            • 12. Re: line chart to scale
                              sk*419893*er

                              Thanks!

                              • 13. Re: line chart to scale
                                sk*419893*er

                                So I am able to hook onto the data.series[g] object to adjust the line width based on the order of the series. But the code below fails if I only have 4 series. I tried using a page item as a variable but I guess the javasacript isn't processed to make those substitutions:

                                 

                                for (var g = 0; g <  :P9_COUNT; g++)

                                 

                                What else can I do with the javascript? What methods can I use? I'd like to be able to vary the number of series, change lineWidth based on a property of the series, and generally have more customization. Thanks.

                                 

                                Bill

                                 

                                function (options) { 

                                    options.dataFilter = function (data) { 

                                        for (var g = 0; g < 5; g++) {

                                            data.series[g].lineStyle = "solid"; 

                                            data.series[g].lineType = "straight"; 

                                            if(g>2)

                                                {data.series[g].lineWidth = 4; }

                                            else

                                                {data.series[g].lineWidth = 2; }

                                        } 

                                        return data; 

                                    }; 

                                    return options; 

                                • 14. Re: line chart to scale
                                  fac586

                                  sk*419893*er wrote:

                                   

                                  So I am able to hook onto the data.series[g] object to adjust the line width based on the order of the series. But the code below fails if I only have 4 series. I tried using a page item as a variable but I guess the javasacript isn't processed to make those substitutions:

                                   

                                  for (var g = 0; g < :P9_COUNT; g++)

                                  That is not a substitution. It's a bind variable reference and is only available in SQL or PL/SQL code executed on the server.

                                   

                                  To get the current value of an item on the current page in JavaScript (application items and items on other pages are not directly accessible in JS), use the apex.item(...).getValue method or the $v shorthand equivalent:

                                   

                                  for (var g = 0; g < parseInt($v('P9_COUNT')); g++) {
                                    ...
                                  }
                                  

                                  What else can I do with the javascript? What methods can I use? I'd like to be able to vary the number of series, change lineWidth based on a property of the series, and generally have more customization.

                                  All of the available options are described in the JET Chart documentation.

                                  1 2 Previous Next