Chart not displaying when making PREVIOUS AJAX call

[George SParticipant]

Hello,

I am working through the process of building a chart, and I am getting some weird behavior. I have traced the behavior down as follows.
My original data is coming from a JSON stream. My code will (eventually) manipulate it, and put it in an array, and then build my graph out of that array. Right now, I have a standalone routine, called draw_graph. It uses static data, and draw a chart properly. It is literally a copy (although I have changed a few of the array attribute names) to your spline sample.

If I call draw_graph, it works. I have an earlier routine that gets the JSON data, and will EVENTUALLY format it, and then call draw_graph, passing the array, but the code is not there yet. Right now… build_purchase_trends() just gets the JSON data, it doesn’t do anything with it. On DONE, it calls draw_data(). It does NOT pass anything to the routine.

If I call draw_graph outside of the JSON done, I get my graph. If I call build_purchase_trends, which then calls draw_graph(), I get a blank screen. I do not get any errors in the console, just a blank screen (in the DIV).

Here are my code routines. When this runs, I DO get my alert

///////////////////////////////////////////////////////////////////////////////////
function build_purchase_trends() {
// This routine will build the graph on the purchase trends page
  // prepare chart data as an array

    
    
        var company_name = $v("P45_NORMALIZED_ACCOUNT_NAME");

        // We now make an ajax call to the DB to get a JSON list of -grouped by- purchase history
        // This becomes our Purchase Trends Graph
        var trendsAnalysis = apex.server.process('PopupDetail_PurchaseTrends', {
            x01: company_name
        }, {
            dataType: 'json'
        });

        // Register the function to call when the AJAX request is complete
        trendsAnalysis.done(function(data4) {
       alert('Calling draw_graph');
       draw_graph();
        }
      );                      
      }

Here is my draw_graph() routine. I DO get console messages, showing that this code is running.

////////////////////////////////////////////////////////////////////////////////                            
function draw_graph()                             
    {    
    console.log('Building Purchase Trends Chart');
            var sampleData = [
                    { Qtr: 'Fy10', DB: 30, MW: 0,  Apps: 25, Sup: 40 },
                    { Qtr: 'Fy11', DB: 25, MW: 25, Apps: 0,  Sup: 50 },
                    { Qtr: 'Fy12', DB: 30, MW: 0,  Apps: 25, Sup: 60 },
                    { Qtr: 'Fy13', DB: 20, MW: 20, Apps: 25, Sup: 40 },
                    { Qtr: 'Fy14', DB: 0,  MW: 20, Apps: 25, Sup: 50 },
                    { Qtr: 'Fy15', DB: 30, MW: 0,  Apps: 30, Sup: 60 },
                    { Qtr: 'Fy16', DB: 20, MW: 40, Apps: 0,  Sup: 90 }
                ];
            // prepare jqxChart settings
            var settings = {
                title: "License and Support Trends over Time",
                description: "License Product Category by Fiscal Year",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                colorScheme: 'scheme05',
                borderLineColor: '#888888',
                xAxis:
                {
                    dataField: 'Qtr',
                    unitInterval: 1,
                    tickMarks: 
                    {
                        visible: true,
                        interval: 1,
                        color: '#888888'
                    },
                    gridLines:{
                        visible: false,
                        interval: 1,
                        color: '#888888'
                    },
                    axisSize: 'auto'
                },
                valueAxis:
                {
                    visible: true,
                    unitInterval: 10,
                    minValue: 0,
                    maxValue: 100,
                    title: { text: 'Dollars, in $K' },
                    tickMarks: {color: '#888888'},
                    gridLines: {color: '#888888'},
                    axisSize: 'auto'
                },
                seriesGroups:
                    [
                        {
                            type: 'splinearea',
                            series: [
                                    { dataField: 'Sup', displayText: 'Support', opacity: 0.7 }
                                ]
                        },
                        {
                            type: 'stackedcolumn',
                            columnsGapPercent: 50,
                            seriesGapPercent: 5,
                            series: [
                                    { dataField: 'DB', displayText: 'Database' },
                                    { dataField: 'MW', displayText: 'Middleware' },
                                    { dataField: 'Apps', displayText: 'Applications' }
                                ]
                        }
                    ]
            };
            // setup the chart
            console.log('Getting ready to display');
           
           // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
    } 

So to summarize…
build_purchase_trends() -> draw_graph() gives me a blank screen.
draw_graph() by itself works fine.

The only thing I can even think of is some type of name collision…
Any ideas?

[HristoParticipant]

Hello George S,

Please take a look this demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_live_updates.htm?arctic
This approach to recreating Chart again is not very correct. I would like to present you one article that could be helpful for this task.
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-data-source.htm
http://jsfiddle.net/jqwidgets/GSNPm/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[George SParticipant]

Thank you for your reply, but I am confused by it. You are saying that my approach is not correct. The actual building of the chart is an almost exact copy of your demo code. You are building the chart via an array. The only thing I am doing differently is that I will be building the array from a JSON stream, as opposed to having static data.

If I move the routine draw-graph() down 3 lines, it works fine. There is some kind of clash when called within the AJAX routine (apex.server.process). I need to do it this way, because I need to manipulate the data to get the chart to display the way I want.

///////////////////////////////////////////////////////////////////////////////////
function build_purchase_trends() {
// This routine will get the data for the graph
        
        var company_name = $v("P45_NORMALIZED_ACCOUNT_NAME");

        // We now make an ajax call to the DB to get a JSON list of -grouped by- purchase history
        // This becomes our Purchase Trends Graph
       var trendsAnalysis = apex.server.process('PopupDetail_PurchaseTrends', {      
            x01: company_name
        }, {
            dataType: 'json'
        });

        // Register the function to call when the AJAX request is complete
        trendsAnalysis.done(function(data4) {
       alert('Calling draw_graph');
       draw_graph();
        }  
      ); 
       //draw_graph();      THIS WORKS when called from here if I uncomment
    }

In the above code, I get no chart. If I comment out the top draw_graph() and run the 2nd one instead, I get my graph. Any idea what could be causing this?

[HristoParticipant]

Hello George S,

Please provide us an example that demonstrate this issue. (http://jsfiddle.net/)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[George SParticipant]

I think I have it now solved. The chart is on a page that is part of a tab within Oracle Apex. If the tab is NOT visible, then I get this issue. The way I worked around it is to add a button on the tab. When the user clicks the button, they are obviously on that tab (and the page is visible). The button then initiates the chart creation. This seems to work fine.

Thanks

[Author]

Posts