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 chartist: Chartist

You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included.

Usage:

chart = page.ui.charts.chartist.line()

Related Pages:

https://gionkunz.github.io/chartist-js/?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library

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: Optional[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: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[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: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[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'})

s3 = page.ui.charts.skillbars(records, y_column='value', x_axis='label')
s3.options.height = "10px"

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: Optional[Union[tuple, int, str]] = (None, '%'), height: Optional[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])
chart = page.ui.charts.sparkline("line", [1, 2, 3, 4, 5, 4, 3, 2, 10])
chart.click([
  page.js.console.log(chart.dom.val),
  page.js.console.log(chart.dom.content),
  page.js.console.log(chart.dom.offset)
])

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/