Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Integrate Javascript charts with APEX

Padmocho-OracleMay 7 2017 — edited May 8 2017

Hi,

I have reviewed many charting libraries on the Internet and would like to integrate some of them within my Apex application. I am able to integrate the examples into my Apex page but there is one step at which I'm always stuck - how to define data source?

Example (fusioncharts)

{

    "chart": {

        "caption": "Temperature Monitoring",

        "xaxisname": "Time",

        "yaxisname": "Temperature (in degree C)",

        "showvalues": "0",

        "bgalpha": "45",

        "bgcolor": "A6CAF0",

        "showalternatehgridcolor": "0",

        "outcnvbasefont": "Verdana",

        "outcnvbasefontsize": "12",

        "canvasborderthickness": "2",

        "canvasbordercolor": "73A8E1",

        "anchorradius": "5",

        "anchorsides": "16",

        "anchorbgcolor": "FFFFFF",

        "linethickness": "4",

        "anchorborderthickness": "2",

        "divlinealpha": "5",

        "divlinecolor": "14C56E",

        "canvasborderalpha": "40",

        "outcnvbasefontcolor": "43302E",

        "legendbordercolor": "93C995",

        "legendborderalpha": "80",

        "legendborderthickness": "2",

        "bordercolor": "93C995",

        "borderalpha": "50",

        "useforwardsteps": "0",

        "showborder": "0"

    },

    "categories": [

        {

            "category": [

                {

                    "label": "0.00",

                    "stepSkipped": false

                },

                {

                    "label": "3.00",

                    "stepSkipped": false

                },

                {

                    "label": "6.00",

                    "stepSkipped": false

                },

                {

                    "label": "12.00",

                    "stepSkipped": false

                },

                {

                    "label": "15.00",

                    "stepSkipped": false

                },

                {

                    "label": "18.00",

                    "stepSkipped": false

                },

                {

                    "label": "21.00",

                    "stepSkipped": false

                }

            ]

        }

    ],

    "dataset": [

        {

            "seriesname": "1st Jan 2007",

            "anchorbordercolor": "D30000",

            "color": "D30000",

            "data": [

                {

                    "value": "9"

                },

                {

                    "value": "5"

                },

                {

                    "value": "8"

                },

                {

                    "value": "10"

                },

                {

                    "value": "20"

                },

                {

                    "value": "14"

                },

                {

                    "value": "12"

                }

            ]

        },

        {

            "seriesname": "1st Jan 2008",

            "color": "0148b8",

            "anchorbordercolor": "0148b8",

            "data": [

                {

                    "value": "17"

                },

                {

                    "value": "12"

                },

                {

                    "value": "18"

                },

                {

                    "value": "23"

                },

                {

                    "value": "31"

                },

                {

                    "value": "25"

                },

                {

                    "value": "18"

                }

            ]

        }

    ]

}

Step Line Chart: Temperature Monitoring System

Now, obviously the data comes from the ""dataset": [] section above.

How can I modify the above code so that the same data is pulled from the database? Is there a common method for this kind of integration?

Appreciate any working examples (best with fusioncharts but can also be e.g. googlecharts).

Regards,

Pawel.

Comments
Locked Post
New comments cannot be posted to this locked post.
Post Details
Locked on Jun 5 2017
Added on May 7 2017
1 comment
552 views