Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

APEX 5.1 Charts with OracleJET

in Oracle Application Express #orclapex
by

Scott Wesley

on 24 November 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of APEX 5.1 Charts with OracleJET

/
www.anychart.com/products/oracleapex/overview/
AnyChart APEX Extension
APEX 5.0
AnyChart 6.x
2015
<= APEX 5.0
Scott: Kscope
Book
developer focus => UI
.NET
Scott Wesley
APEX 5.1 Charts
with OracleJET
Timeline of Charts
AnyChart Library
Flash
SVG Charts
APEX 5.1
OracleJET
APEX 4.0
Plug-ins
APEX 3.x
html5
Declarative
APEX 4.2
svenweller.wordpress.com/2016/04/07/integrate-oracle-jet-into-apex-5/
roelhartman.blogspot.com.au/2016/08/creating-apex-plugin-for-oracle-jet.html
/images
ORDS
12c
/oj
/AnyChart
/jQuery
/1.8
/1.7
/4000 Builder
/APEX
/100 Sample
/301 Sandpit
/110 Charts
Upgrade
Core packages
IDE Updates
Upgrade
Plug-in
<html> ... </html>
SQL
DB <-> JSON
Builder
Robust App
Plug-in
APEX Advisor
D3 Charts
Packaged App
Plug-in
OracleJET
Flows
HTML DB 1.5
mod_plsql
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Highsoft.Web.Mvc.Charts;


namespace MVC_Demo.Areas.Highcharts.Controllers.Shared
{
public partial class SharedController : Controller
{
public ActionResult DynamicClickToAdd()
{
return View();
}
}
}

@*You need to add a reference to jQuery prior to referencing the highcharts javascript file*@

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

@using Highsoft.Web.Mvc.Charts

<script type="text/javascript">

function addPoint(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];

// Add it
series.addPoint([x, y]);
}

function pointClick() {
if (this.series.data.length > 1) {
this.remove();
}
}

</script>


@(Html.Highsoft().Highcharts(
new Highcharts
{
Chart = new Chart
{
Events = new ChartEvents
{
Click = "addPoint"
}
},
Title = new Title
{
Text = "User Applied Data"
},
Subtitle = new Subtitle
{
Text = "Click the plot area to add a point. Click a point to remove it."
},
XAxis = new List<XAxis>
{
new XAxis
{
GridLineWidth = 1,
MinPadding = 0.2,
MaxPadding = 0.2,

}
},
YAxis = new List<YAxis>
{
new YAxis
{
Title = new YAxisTitle
{
Text = "Value"
},
MinPadding = 0.2,
MaxPadding = 0.2,
PlotLines = new List<YAxisPlotLines>
{
new YAxisPlotLines
{
Value = 0,
Width = 1,
Color = "#808080"
}
}
}
},
Legend = new Legend
{
Enabled = false
},
Exporting = new Exporting
{
Enabled = false
},
PlotOptions = new PlotOptions
{
Series = new PlotOptionsSeries
{
LineWidth = 1,
Point = new PlotOptionsSeriesPoint
{
Events = new PlotOptionsSeriesPointEvents
{
Click = "pointClick"
}
}
}
},
Series = new List<Series>
{
new ScatterSeries
{
Data = new List<ScatterSeriesData>
{
new ScatterSeriesData { X = 20, Y = 20 },
new ScatterSeriesData { X = 80, Y = 80 }
}
}
}
}
, "chart")
)
130 lines JavaScript
(not including data)
XML
Larger chart set
Keyboard support
Responsive
BiDi support
Slick
dotnet.highcharts.com/Highcharts/Demo/Gallery?demo=DynamicClickToAdd
@{
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Employees")
.AddSeries(chartType: "column",
xValue: new[] { "Neil", "Phil", "Mary" },
yValues: new[] { "2", "6", "4" })
.Write();
}
2007
2010
AnyChart 6.x
2000
2004
2014
201_
?
Interactive Grid
Oracle APEX makes
declarative
by

SQL
+ attributes
= Fancy Chart
~= This is premise of plugin
AnyChart
Disclaimer:
original presentation
data
analysis
plugin
consumption
OracleJET
pathway
www.eso.org/public/images/eso1509a/
ESO/M. Kornmesser
APEX x.y
Chart Sample Application
#orclapex
developer focus => data
Upgrade Awareness
APEX 5.1 Early Adopter 2
apexea.oracle.com
OracleJET
"government project ready"
Licenced
JSON
6.x
7.0
OJ
XML API
AnyChart 7 announced
Richer HTML5
JSON API
>= APEX 5.1
Treat OracleJET as plug-in
JSON API
Proven
Frequent Internal Timelines
+1 Accessibility
charts?
tl;dr
APEX 5.2/6.x Template Content
= XML / JSON
+ framework
Scott: University
Scott: Oracle Forms
"In the beginning the Universe was created.
This has made a lot of people very angry and been widely regarded as a bad move." - DA
Scott: Oracle ACE
Scott: Wins Lotto
Chart of charts, if you will
Dynamic Actions
Tree View
Not Responsive
Poor touchscreen support
Bar, Line, Pie, Dial
Supporting Library
/OracleJET
1
2
3
<html>
PL/SQL
JSON
SQL
attributes
IDE = white box
Install f4000.sql
Improvements
date gaps? no worries
data format aware
series flexibility
No more XML hacking
JavaScript is the future
Scott's Tip:
electron.atom.io
Interesting case examples
https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658#.8ymuu1wlt
https://scotch.io/tutorials/creating-desktop-applications-with-angularjs-and-github-electron
Easier to tweak
slick
responsive
touch aware
grid layout not painful
Charts
UI Rich
Scott's
Prediction:
ADF
Apples
Scott learns APEX
starts
@swesley_perth
Lunar far side
...
List Template -> Menu
www.grassroots-oracle.com/2013/05/css-pull-down-menu-using-apex-list.html
No plug-in required
/include.css
html
li
Sublist Entry
Before Sublist
Template Definition
After List Entry
/html
Create
List Region...
Granular Settings Galore
Attributes + Customisation
DATA
Pivot
unpivot
columns
rows
ORA-04030: Out of Process Memory
What's JET?
Timeline
Upgrades
Improvements
Toaster Ovens
Helps leave apps untouched during APEX upgrade
No
need
to publish
Feedback from Community
GitHub experience
Built
Full transcript