powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / Oracle APEX [игнор отключен] [закрыт для гостей] / Динамическое обновление PL SQL региона (HighCharts)
10 сообщений из 10, страница 1 из 1
Динамическое обновление PL SQL региона (HighCharts)
    #38408780
Полено
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Есть такое чудо - http://www.highcharts.com/
Пробуем интегрировать его в апекс, что получается
http://apex.oracle.com/pls/apex/f?p=25595:1
Все отлично однако хочется динамического обновления графика по нажатию на кнопку
Для это используем - http://ora-00001.blogspot.ru/2012/11/apex-plugin-execute-plsql-code-and-return-content-to-page.html
Однако не работает :(
Как можно реализовать динамическое обновление графика с передачей параметров естественно, и формирования самого графика (JS, JSon и пр.) в хранимой процедуре?

Реквезиты WS
http://apex.oracle.com/pls/apex/f?p=4550:1:0:::::
WS - dshtukin
user - developer
password 123
Application - higcharts
...
Рейтинг: 0 / 0
Динамическое обновление PL SQL региона (HighCharts)
    #38409228
Полено
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Полено,

UP
...
Рейтинг: 0 / 0
Динамическое обновление PL SQL региона (HighCharts)
    #38411351
Alex-A
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Когда-то на просторах сети мне попадался Apex plug-in для работы с HightCharts. Потом они это дело прикрыли (по видимому не договорились о лицензии). Вот кусок js-кода из странички, по которому можно посмотреть как это было реализовано:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
apex.jQuery(document).ready(function(){
    (function () {
        var options =
        {
            chart:{
                renderTo:'nfchart_26796812755402887',
                defaultSeriesType:'line',
                width:null,
                height:null,
                alignTicks:true,
                animation:true,
                marginRight:30,
                marginBottom:100,
                plotBackgroundColor:null,
                plotBackgroundImage:null,
                plotBorderColor:'#C0C0C0',
                backgroundColor:'#FFFFFF',
                plotBorderWidth:0,
                plotShadow:false,
                reflow:true,
                spacingTop:10,
                spacingRight:10,
                spacingBottom:15,
                spacingLeft:10,
                style:{
                    fontFamily:'"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',
                    fontSize:'12px'
                },
                zoomType: 'y',
                events: {
                    redraw: function() {
                        jQuery('#R26796812755402887').trigger('redraw', this);
                    },
                    addSeries: function(e) {
                        jQuery('#R26796812755402887').trigger('drawseries', e.options);
                    },
                    selection: function(event) {
                        jQuery('#R26796812755402887').trigger('selection', event);
                    },
                    click: function(event) {
                        jQuery('#R26796812755402887').trigger('chartclick', {"event":event, "chart":this});
                    }
                }
            },
            plotOptions: {
                series: {
                    animation: {
                        duration: 2000,
                        easing: 'easeOutBounce'
                    },
                    point: {
                        events: {
                            click: function(event) {
                                jQuery('#R26796812755402887').trigger('pointclick', {"event": event, "point": this});
                            }
                        }
                    }
                }
            },
            credits: {
                enabled: false,
                position: {
                    align: 'left',
                    x: 10
                },
                itemStyle: {
                    cursor: 'pointer',
                    color: 'red',
                    fontSize: '20px'
                },
                position: {
                    align: 'right',
                    x: -90,
                    verticalAlign: 'bottom',
                    y: -5
                }
            },
            title: {
                text: 'Simple Chart',
                x: -20 //center
            },
            subtitle: {
                text: '(using random data)',
                x: -20
            },
            xAxis: {
                categories: ['','','','','','','','',''],
                labels: {
                    rotation: 0,
                    align: 'right',
                    style: {
                        color: 'black'
                    }
                }
            },
            yAxis: [{
                title: {text: ''},
                gridLineColor: 'black',
                labels: {
                    rotation: 0,
                    align: 'right',
                    style: {
                        color: 'black'
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: 'black'
                }],
                offset: 0,
                opposite: false
            }],
            tooltip: {formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y;
            }},
            legend: {
                layout: 'vertical',
                enabled: false,
                align: 'right',
                verticalAlign: 'top',
                x: 10,
                y: 100,
                borderWidth: 0
            },
            series: [
                {
                    name: 'LABEL',
                    data: []
                }
                ,
                {
                    name: 'VALUE',
                    data: []
                }
            ]
        };
        chart_26796812755402887 = new Highcharts.Chart(options);

        function loadData(pData) {
            var series = chart_26796812755402887.series[0];
            console.log(pData);
            var json = $.parseJSON(pData);
            $.each(chart_26796812755402887.series, function(i, val) {
                chart_26796812755402887.series[0].remove(false);
            });
            $.each(json.chart.series, function(i, val) {
                var newseries = {};
                newseries.data = val.data;
                newseries.name = val.name;
                jQuery('#R26796812755402887').trigger('drawseries', newseries);

                chart_26796812755402887.addSeries(newseries, false);
            });
            chart_26796812755402887.redraw();
            if ((chart_26796812755402887.series.length > 0) &&(chart_26796812755402887.series[0].xAxis )) {
                chart_26796812755402887.xAxis[0].setCategories(json.chart.categories);
            }
        }

        function dataready() {
            if(p.readyState == 1){
            }else if(p.readyState == 2){
            }else if(p.readyState == 3){
            }else if(p.readyState == 4){
                loadData(p.responseText);
            }else{return false;}
        }

        jQuery('#nfchart_26796812755402887').bind('apexrefresh', function() {
            var get = new htmldb_Get(null,$v('pFlowId'),'PLUGIN=3E82B85D49E4F164979F708B39D9FA47ECA7A765DA794369B378B73CE4154A16',$v('pFlowStepId'));
            get.GetAsync(dataready);
            get = null;
        });

        jQuery('#nfchart_26796812755402887').trigger('apexrefresh');
        jQuery('#nfchart_26796812755402887').trigger('apexrefresh');
    })();
...
Рейтинг: 0 / 0
Динамическое обновление PL SQL региона (HighCharts)
    #38415975
Полено
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alex-A,

Cпасибоза ответ, только не знаю как он может быть мне полезен.
Я задал вопрос тут https://forums.oracle.com/message/11210170
Товарищ JoniVandenberghe даже предложил способ решения , однако я не знаю какего реаизизовать, может кто то из более опытных коллег подскажет?
...
Рейтинг: 0 / 0
Динамическое обновление PL SQL региона (HighCharts)
    #38416318
Alex-A
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Мой ответ может быть полезен тем, что можно посмотреть как добавляют/обновляют данные для HightCharts другие люди и попробовать сделать по аналогии или творчески переработав. На https://forums.oracle.com/message/11210170 вы просите народ написать код за вас. На этом форуме вы спросили авторКак можно реализовать динамическое обновление графика.. Наверное прАвильнее в вашем случае было написать "Реализуйте кто-нибудь для нас вот такой функционал"
...
Рейтинг: 0 / 0
Динамическое обновление PL SQL региона (HighCharts)
    #38416695
Полено
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alex-A,

Это всего лишь ваше мнение, еще раз с спасибо за высказывание.
В итоге реализовал динамическое обновление, если кому интересно - http://apex.oracle.com/pls/apex/f?p=25595:40:109983127530174
Но при это мой продуктив тоже нужно будет обновить до 4.2. чтобы использовать apex.server.process
Всем спасибо.
...
Рейтинг: 0 / 0
Динамическое обновление PL SQL региона (HighCharts)
    #38417714
Полено
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Осталась послденяя проблема - форматирование всплывающей подсказки при наведении на график.
http://apex.oracle.com/pls/apex/f?p=25595:40:1153007391873:::::

Это делается так - http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked-and-grouped/

То есть есть некая функция форматирования, она описана отдельно на уровне страницы в секции JavaScript - как
function format_tt() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;

}

Однако при ее вызове в консоль FireBug выдается ошибка - TypeError: i.call is not a function


...is.isHidden&&(Wa(d),d.attr("opacity",1).show()),d.attr({text:i}),k=e.borderColor...
...
Рейтинг: 0 / 0
Динамическое обновление PL SQL региона (HighCharts)
    #38417718
Полено
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ПоленоОсталась послденяя проблема - форматирование всплывающей подсказки при наведении на график.
http://apex.oracle.com/pls/apex/f?p=25595:40:1153007391873:::::

Это делается так - http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked-and-grouped/

То есть есть некая функция форматирования, она описана отдельно на уровне страницы в секции JavaScript - как
function format_tt() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;

}

Однако при ее вызове в консоль FireBug выдается ошибка - TypeError: i.call is not a function


...is.isHidden&&(Wa(d),d.attr("opacity",1).show()),d.attr({text:i}),k=e.borderColor...

Здес неверная ссыдка на JSFidle вот - http://jsfiddle.net/AN7nz/ тут описание функции форматирования - "выше" самого выводаграфика
...
Рейтинг: 0 / 0
Динамическое обновление PL SQL региона (HighCharts)
    #38417736
Полено
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Все оказалось проще, надо просто в результирующем JSON присвоить атрибуту нужное значение.
...
Рейтинг: 0 / 0
Динамическое обновление PL SQL региона (HighCharts)
    #38429302
Полено
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Модет кому пригодится добавил индикатор ожидания http://apex.oracle.com/pls/apex/f?p=25595:40:
Плагин - http://malsup.com/jquery/block/#demos
...
Рейтинг: 0 / 0
10 сообщений из 10, страница 1 из 1
Форумы / Oracle APEX [игнор отключен] [закрыт для гостей] / Динамическое обновление PL SQL региона (HighCharts)
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]