1 2 Previous Next 20 Replies Latest reply on Oct 13, 2014 8:06 AM by kdario

    Embedding javascript charts in adf ?

    Medo Hassan

      Hi,

      I need to embed javascript pie chart in adf and i'm a beginner and i don't know how ?

      i'll be grateful if any one could help me in this.

      Thanks

        • 2. Re: Embedding javascript charts in adf ?
          Medo Hassan

          i'm using Jdev 11g R2  11.1.2.4.0

          • 3. Re: Embedding javascript charts in adf ?
            Timo Hahn

            You are aware pig the adf dvt components which offer pie charts as well.

            If you plan to use JavaScript I assume you want to use a JavaScript framework like jQuery. If this is the case you should tell us as there are samples on how to include such JavaScript.

             

            Timo

            • 4. Re: Embedding javascript charts in adf ?
              Medo Hassan

              "If you plan to use JavaScript I assume you want to use a JavaScript framework like jQuery"

              yes .. That's it

              • 7. Re: Embedding javascript charts in adf ?
                Medo Hassan

                i tried to embed this chart to jsf page and i couldn't

                how to make pie chart with dynamic data change with only Jquery-1.6.3 version allowed - JSFiddle

                i added the Jquery lib to the project and the javascript method and called it from clientListener in a button

                • 8. Re: Embedding javascript charts in adf ?
                  Timo Hahn

                  User, the pie chart contains static data. If you want to show static data you can use the adf dvt component too. No need to use jQuery.

                   

                  Timo

                  • 9. Re: Embedding javascript charts in adf ?
                    Medo Hassan

                    this static data just for test , late i'll add dynamic data & adf dvt component doesn't support like this animation on display time

                    • 10. Re: Embedding javascript charts in adf ?
                      kdario

                      i tried to embed this chart to jsf page and i couldn't

                      how to make pie chart with dynamic data change with only Jquery-1.6.3 version allowed - JSFiddle

                      i added the Jquery lib to the project and the javascript method and called it from clientListener in a button

                      Post relevant code so we can see what exactly you have tried.

                      Also, use Developer Tools provided by your browser to check if there is some javascript error.

                       

                      Dario

                      • 11. Re: Embedding javascript charts in adf ?
                        Medo Hassan

                        i added the Jquery lib to the project and added this method

                        $(document).ready(function () {   

                                  

                                    RenderPieChart('container', [

                                              ['Firefox', 45.0],

                                              ['IE', 26.8],

                                              ['Chrome',  12.8],                        

                                              ['Safari', 8.5],

                                              ['Opera', 6.2],

                                              ['Others', 0.7]

                                          ]);    

                            

                             $('#btnPieChart').live('click', function(){

                                 var data = [

                                              ['Firefox', 42.0],

                                              ['IE', 26.8],

                                              {

                                                  name: 'Chrome',

                                                  y: 14.8,

                                                  sliced: true,

                                                  selected: true

                                              },

                                              ['Safari', 6.5],

                                              ['Opera', 8.2],

                                              ['Others', 0.7]

                                          ];

                                    

                                    RenderPieChart('container', data);

                             });

                            

                                    function RenderPieChart(elementId, dataList) {

                                        new Highcharts.Chart({

                                            chart: {

                                                renderTo: elementId,

                                                plotBackgroundColor: null,

                                                plotBorderWidth: null,

                                                plotShadow: false

                                            }, title: {

                                                text: 'Browser market shares at a specific website, 2010'

                                            },

                                            tooltip: {

                                                formatter: function () {

                                                    return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';

                                                }

                                            },

                                            plotOptions: {

                                                pie: {

                                                    allowPointSelect: true,

                                                    cursor: 'pointer',

                                                    dataLabels: {

                                                        enabled: true,

                                                        color: '#000000',

                                                        connectorColor: '#000000',

                                                        formatter: function () {

                                                            return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';

                                                        }

                                                    }

                                                }

                                            },

                                            series: [{

                                                type: 'pie',

                                                name: 'Browser share',

                                                data: dataList

                                            }]

                                        });

                                    };

                                });

                         

                        and in the jsf page i add a button and this the source code

                        <af:form id="f1">

                                <af:resource type="javascript" source="/javaScript/jquery-1.4.4.js"/>

                                    <af:commandButton text="commandButton 1" id="cb1">

                                        <af:clientListener method="Pie Chart" type="action"/>

                                    </af:commandButton>

                                </af:form>

                        • 12. Re: Embedding javascript charts in adf ?
                          Timo Hahn

                          In the blog you are referring to there are other JavaScript libraries included

                          <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

                          <script src="http://code.highcharts.com/highcharts.js"></script>

                          <script src="http://code.highcharts.com/modules/exporting.js"></script>

                          And you have not told us what the problem is.

                           

                          Timo

                          • 13. Re: Embedding javascript charts in adf ?
                            Medo Hassan

                            you mean i should attach this libraries to the project also and refer to it in the jsf page with <af:resource ?

                             

                            the problem is when i run the page the chart doesn't run

                            • 14. Re: Re: Embedding javascript charts in adf ?
                              kdario

                              This will not work like that.

                               

                              - Where you exactly added your javascript code?

                              - You just included javascript for jquery, but you need to include libraries for higcharts (like for example: higcharts.js)

                                also, this is not very good place for af:resource tag (this should be placed to metaContainer facet of af:document tag)

                              - $(document).ready() will probably not work.

                              - <af:clientListener method="Pie Chart" type="action"/>    method should be name of javascript function(so you need to write some javascript method and use name as "method" property).

                              - commandButton probably should have partialSubmit="true"

                              - you must attach chart to some html component(like div), and reference id of this component in RenderPieChart() function

                               

                              So this should be probably like this(note that I'm writing this online so you will have to correct typing errors )

                              In your page:

                              <af:document ....>
                              
                                <af:form id="f1">
                                    <af:commandButton text="commandButton 1" id="cb1" partialSubmit="true">
                                        <af:clientListener method="showChart" type="action"/>
                                    </af:commandButton>
                                    <div id="chartContainer"></div>
                                </af:form>
                              
                                <f:facet name="metaContainer">
                                    <af:resource type="javascript" source="http://code.jquery.com/jquery-1.6.3.min.js"/>
                                    <af:resource type="javascript" source="http://code.highcharts.com/highcharts.js"/>
                                    <af:resource type="javascript" source="http://code.highcharts.com/modules/exporting.js"/>
                                    <af:resource type="javascript" source="/resources/js/chart.js"/>
                                </f:facet>
                              
                              </af:document>
                              
                              

                               

                              In js/chart.js:

                              function RenderPieChart(elementId, dataList) {
                                  new Highcharts.Chart({
                                      chart: {
                                          renderTo: elementId,
                                          plotBackgroundColor: null,
                                          plotBorderWidth: null,
                                          plotShadow: false
                                      }, title: {
                                          text: 'Browser market shares at a specific website, 2010'
                                      },
                              
                                      tooltip: {
                                          formatter: function () {
                                              return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                                          }
                                      },
                              
                                      plotOptions: {
                                          pie: {
                                              allowPointSelect: true,
                                              cursor: 'pointer',
                                              dataLabels: {
                                                  enabled: true,
                                                  color: '#000000',
                                                  connectorColor: '#000000',
                                                  formatter: function () {
                                                      return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                                                  }
                                              }
                                          }
                                      },
                              
                                      series: [{
                                          type: 'pie',
                                          name: 'Browser share',
                                          data: dataList
                                      }]
                                  });
                              };
                              
                              function showChart(){
                                 var data = [
                                        ['Firefox', 42.0],
                                        ['IE', 26.8],
                                        {
                                            name: 'Chrome',
                                            y: 14.8,
                                            sliced: true,
                                            selected: true
                                        },
                                        ['Safari', 6.5],
                                        ['Opera', 8.2],
                                        ['Others', 0.7]
                                    ];
                              
                                  RenderPieChart('chartContainer', data);
                              };
                              
                              

                               

                              Dario

                              1 2 Previous Next