Graphs Interface

class epyk.interfaces.graphs.CompCharts.Graphs(ui)

property apex: ApexChart

Interface for the ApexChart library.

Category:: Web application

Usage:

Related Pages:

https://apexcharts.com/

property bb: Billboard

Interface to the Javascript Billboard module.

This will propose various charts for data analysis and visualisation based on D£. This project has been forked from C3.js.

Category:: Analytics, Dataviz

Usage:

languages = [
  {"name": 'C', 'type': 'code', 'rating': 17.07, 'change': 12.82},
  {"name": 'Java', 'type': 'code', 'rating': 16.28, 'change': 0.28},
]

c = page.ui.charts.bb.line(languages, y_columns=["rating", 'change'], x_axis='name')

Related Pages:

https://naver.github.io/billboard.js/

property billboard: Billboard

Interface to the Javascript Billboard module.

This will propose various charts for data analysis and visualisation based on D£. This project has been forked from C3.js.

Category:: Analytics, Dataviz

Usage:

data = page.py.requests.csv(data_urls.DEMO_COUNTRY)
c3 = page.ui.charts.billboard.bar(results, y_columns=['Value'], x_axis="Year")

Related Pages:

https://naver.github.io/billboard.js/

property c3: C3

Interface to the JavaScript C3 module.

Category:: Analytics, Dataviz

Usage:

data = page.py.requests.csv(data_urls.DEMO_COUNTRY)
c3 = page.ui.charts.c3.line(results, y_columns=['Value'], x_axis="Year")

Related Pages:

https://c3js.org/

property canvas: Canvas

The HTML <canvas> element is used to draw graphics on a web page.

The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

Usage:

Related Pages:

https://www.w3schools.com/html/html5_canvas.asp

property chartCss: CompChartCss

Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts.

Category:: Web application

Related Pages:

https://chartscss.org/

property chartJs: ChartJs

Simple yet flexible JavaScript charting for designers & developers.

Category:: Web Application

Usage:

Related Pages:

https://www.chartjs.org/

Returns:: A Python ChartJs object

property d3: D3

D3.js is a JavaScript library for manipulating documents based on data.

Category:: Analytics, Dataviz

Usage:

Related Pages:

https://d3js.org/

property dc: DC

dc.js is a javascript charting library with native crossfilter support, allowing highly efficient exploration on large multi-dimensional datasets (inspired by crossfilter’s demo).

Category:: Analytics, Dataviz

Usage:

Related Pages:

https://dc-js.github.io/dc.js/

property frappe: CompChartFrappe

GitHub-inspired simple and modern SVG charts for the web with zero dependencies.

Category:: Web application

Related Pages:

https://frappe.io/charts

property google: ChartGoogle

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.

Category:: Analytics, Dataviz

Usage:

Related Pages:

https://developers.google.com/chart

menu(chart: Html, height: Union[tuple, int, str] = (18, 'px'), options: Optional[dict] = None, post: Optional[Union[List[Union[str, JsDataModel]], str]] = None, profile: Optional[Union[bool, dict]] = None) → Col

Add a standard menu on the table to trigger standard operation (add, empty, copy, download).

Parameters:

chart – The chart component
height – Optional. A tuple with the integer for the component height and its unit
options – Optional. Specific Python options available for this component
post – Optional.
profile – Optional. A flag to set the component performance storage

property nvd3: Nvd3

Interface to the Javascript NVD3 library.

Category:: Analytics, Web application

Usage:

Related Pages:

http://nvd3.org/

plot(pkg: str = 'apex', record=None, y: Optional[list] = None, x: Optional[str] = None, kind: str = 'line', profile: Optional[Union[bool, dict]] = None, width: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None)

Generic shortcut to plot a chart in the framework. Family and kind of chart are passed in parameter.

Usage:

:param pkg: Optional. The external chart package reference. Default ApexCharts
:param record: Optional. The list of dictionaries with the input data
:param y: Optional. The columns corresponding to keys in the dictionaries in the record
:param x: Optional. The column corresponding to a key in the dictionaries in the record
:param kind: Optional. The chart type
:param profile:  Optional. A flag to set the component performance storage
:param width: Optional. The width of the component in the page, default (100, '%')
:param height: Optional. The height of the component in the page, default (330, "px")
:param options: Optional. Specific Python options available for this component
:param html_code: Optional. An identifier for this component (on both Python and Javascript side)

property plotly: Plotly

Built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.

Category:: Analytics, Dataviz

Usage:

Related Pages:

https://plotly.com/javascript/

Returns:: A Python Plotly object

property roughviz: CompRoughViz

Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

Category:: Web application

Related Pages:

https://github.com/jwilber/roughViz

skillbars(records=None, y_column: Optional[str] = None, x_axis: Optional[str] = None, title: Optional[str] = None, width: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (None, 'px'), html_code: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = False) → SkillBar

Python interface for the HTML Skill bars, simple bars chart done in pure Javascript and CSS.

Category:: Web Application, Analytics

Usage:

records = [
  {"label": 'python', 'value': 12},
  {"label": 'Java', 'value': 5},
  {"label": 'Javascript', 'value': 80}]
page.ui.charts.skillbars(records, y_column='value', x_axis='label').css({"width": '100px'})

Related Pages:

https://www.w3schools.com/howto/howto_css_skill_bar.asp

Parameters:

records – Optional. The Python list of dictionaries
y_column – Optional. The columns corresponding to keys in the dictionaries in the record
x_axis – Optional. The column corresponding to a key in the dictionaries in the record
title – Optional. The chart title
width – Optional. A tuple with the integer for the component width and its unit
height – Optional. A tuple with the integer for the component height and its unit
html_code – Optional. An identifier for this component (on both Python and Javascript side)
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

sparkline(chart_type: str, data, title: Optional[str] = None, options: Optional[dict] = None, width: Union[tuple, int, str] = (None, '%'), height: Union[tuple, int, str] = (None, 'px'), profile: Optional[Union[bool, dict]] = False) → Sparklines

Display a sparkline component.

Category:: Web Application, Analytics

Usage:

page.ui.charts.sparkline("box", [1, 2, 3, 4, 5, 4, 3, 2, 1])
page.ui.charts.sparkline("bar", [1, 2, 3, 4, 5, 4, 3, 2, 10])

Related Pages:

https://omnipotent.net/jquery.sparkline/#s-about

Parameters:

chart_type – The type of chart (bullet, line, bar, tristate, discrete, pie, box)
data – A String corresponding to a JavaScript object
options – Optional. Specific Python options available for this component
width – Optional. A tuple with the integer for the component width and its unit
height – Optional. A tuple with the integer for the component height and its unit
title – Optional. A panel title. This will be attached to the title property
profile – Optional. A flag to set the component performance storage

Returns:

A python Sparkline object

property sparklines: Sparkline

Display a sparkline component.

Category:: Web Application, Analytics

Usage:

page.ui.charts.sparklinea.box([1, 2, 3, 4, 5, 4, 3, 2, 1])
page.ui.charts.sparklines.bar([1, 2, 3, 4, 5, 4, 3, 2, 10])

Related Pages:

https://plotly.com/javascript/

property svg: SVG

SVG defines vector-based graphics in XML format.

Usage:

Related Pages:

https://www.w3schools.com/graphics/svg_intro.asp

property vega: VegaEmbedded

Vega – A Visualization Grammar.

Category:: Analytics, Dataviz

Usage:

Related Pages:

https://vega.github.io/vega/

Returns:: A Python Vega object

property vis: Vis

A dynamic, browser based visualization library.

Category:: Analytics, Dataviz

Usage:

Related Pages:

https://visjs.org/