ChartJs Interface

class epyk.interfaces.graphs.CompChartsChartJs.ChartJs(ui)

area(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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, **kwargs) → ChartLine

Display a area chart from ChartJs.

Tags:
Categories:

Usage:

Related Pages:

https://www.chartjs.org/samples/latest/charts/area/line-stacked.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

bar(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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) → ChartBar

Display a bar chart from ChartJs.

Tags:
Categories:

Usage:

from epyk.mocks import randoms

data = randoms.getSeries(5, 30)
page.ui.charts.chartJs.bar(data, y_columns=[1, 2, 3], x_axis='x')

Related Pages:

https://www.chartjs.org/samples/latest/scriptable/bar.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

bubble(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, r_values: Optional[list] = None, 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) → ChartBubble

Display a bubble chart from ChartJs.

Tags:
Categories:

Usage:

Related Pages:

https://www.chartjs.org/samples/latest/scriptable/bubble.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
r_values – Optional. Set the r for the points on the chart
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

custom(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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, **kwargs) → ChartExts

Display a bespoke chart from ChartJs.

It is important to get a NodeJs with the extra packages installed to use this interface. This will not download the external required resources and it will rely on the setup of the Node server.

Tags:
Categories:

Usage:

c = page.ui.charts.chartJs.custom(randoms.languages, y_columns=["rating", 'change'], x_axis='name',
          options={"type": 'sankey', 'npm': 'chartjs-chart-sankey',
                   'npm_path': '../NodeJs/node_modules'})

Related Pages:

https://www.chartjs.org/samples/latest/scriptable/bar.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

donut(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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, **kwargs) → ChartPie

Display a donut chart from ChartJs.

Tags:
Categories:

Usage:

page = pk.Page()
df = pd.DataFrame({'Sales': [5000, 1222, 2000], 'Other': [500, 122, 200]}, index=['TV', 'Smartphones', 'DVD'])
chart1 = page.ui.charts.chartJs.donut(df.to_dict("records"), y_columns=['Sales'], x_axis="Other")
chart1.click([
  page.js.console.log(chart1.dom.active()),
  chart1.build([{"Sales": 10, "Other": "A"}, {"Sales": 15, "Other": "B"}])
])

Related Pages:

https://www.chartjs.org/samples/latest/charts/doughnut.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

fabric(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, **kwargs) → Fabric

Tags:
Categories:

Usage:

:param profile: Optional. A flag to set the component performance storage
:param width: Optional. A tuple with the integer for the component width and its unit
:param height: Optional. A tuple with the integer for the component height and its unit
: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)

hbar(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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, **kwargs) → ChartHBar

Display a horizontal bar chart from ChartJs.

Tags:
Categories:

Usage:

from epyk.mocks import randoms

data = randoms.getSeries(5, 30)
chart = page.ui.charts.chartJs.hbar(data[:5], y_columns=list(range(4)), x_axis='x')
chart.click([page.js.console.log(chart.js.value)])

Related Pages:

https://www.chartjs.org/samples/latest/scriptable/bar.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

hierarchical(record: Optional[list] = None, labels: Optional[list] = None, 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, horizontal: bool = False, kind: str = 'bar', html_code: Optional[str] = None, **kwargs) → ChartHyr

Chart.js module for adding a new categorical scale which mimics a hierarchical tree.

Related Pages:

https://github.com/sgratzl/chartjs-plugin-hierarchical https://github.com/sgratzl/chartjs-plugin-hierarchical/blob/main/samples/deep_hierarchy.html

Parameters:

record –
labels –
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
horizontal – Optional.
kind – Optional.
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

line(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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, **kwargs) → ChartLine

Display a line chart from ChartJs.

Tags:
Categories:

Usage:

from epyk.mocks import randoms

data = randoms.getSeries(5, 30)
chart = page.ui.charts.chartJs.line(data, y_columns=[3, 4], x_axis='x')

Related Pages:

https://www.chartjs.org/ https://www.chartjs.org/samples/latest/scales/logarithmic/line.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

matrix(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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, **kwargs) → ChartMatrix

Display a matrix chart from ChartJs.

Tags:
Categories:

Usage:

Related Pages:

https://github.com/kurkle/chartjs-chart-matrix https://chartjs-chart-matrix.pages.dev/

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

multi(kind: str, record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, options: Optional[dict] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (330, 'px'), html_code: Optional[str] = None, **kwargs) → ChartBar

Display a multi chart from ChartJs.

Tags:
Categories:

Usage:

Related Pages:

https://www.chartjs.org/samples/latest/charts/combo-bar-line.html

Parameters:

kind – The chart type
record – Optional. The Python list of dictionaries
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

pie(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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) → ChartPie

Display a pie chart from ChartJs.

Tags:
Categories:

Usage:

page = pk.Page()
df = pd.DataFrame({'Sales': [5000, 1222, 2000], 'Other': [500, 122, 200]}, index=['TV', 'Smartphones', 'DVD'])
chart1 = page.ui.charts.chartJs.pie(df.to_dict("records"), y_columns=['Sales'], x_axis="Other")
chart1.click([
  page.js.console.log(chart1.dom.active()),
  chart1.build([{"Sales": 10, "Other": "A"}, {"Sales": 15, "Other": "B"}])
])

Related Pages:

https://www.chartjs.org/samples/latest/charts/pie.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. To set the profiling
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

plot(record: Optional[list] = 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, **kwargs) → Chart

Generic way to define ChartJs charts.

Tags:
Categories:

Usage:

Related Pages:

https://www.chartjs.org/

Parameters:

record – Optional. The list of dictionaries with the input data
y – Optional. The columns corresponding to keys in the dictionaries in the record
x – Optional. The column corresponding to a key in the dictionaries in the record
kind – Optional. The chart type
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

polar(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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, **kwargs) → ChartPolar

Display a bubble chart from ChartJs.

Tags:
Categories:

Usage:

Related Pages:

https://www.chartjs.org/samples/latest/charts/polar-area.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

radar(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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, **kwargs) → ChartRadar

Display a bubble chart from ChartJs.

Tags:
Categories:

Usage:

Related Pages:

https://www.chartjs.org/samples/latest/charts/radar.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

sankey(record: Optional[List[dict]] = None, label: str = '', 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, **kwargs) → ChartSankey

To create a sankey chart, include chartjs-chart-sankey.js after chart.js and then create the chart by setting the type attribute to ‘sankey’

Usage:

data = [
        {"from": 'a', "to": 'b', "flow": 10},
        {"from": 'a', "to": 'c', "flow": 5},]
chart = page.ui.charts.chartJs.sankey(data, label="series")
chart.click(
    chart.build([{"from": 'a', "to": 'b', "flow": 10}]))

Related Pages:

https://npm.io/package/chartjs-chart-sankey

scatter(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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, **kwargs) → ChartScatter

Display a scatter chart from ChartJs.

Tags:
Categories:

Usage:

Related Pages:

https://www.chartjs.org/samples/latest/charts/scatter/basic.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

set_version(v: str)

Change the version of the chartJs package. Use self.page.imports.pkgs.chart_js.version to get the current version.

Usage:

page.ui.charts.chartJs.set_version("2.9.4").line(languages, y_columns=['change'], x_axis="name")

Parameters:: v – The version number

step(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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, **kwargs)

Display a step chart from ChartJs.

Tags:
Categories:

Usage:

from epyk.mocks import randoms

data = randoms.getSeries(5, 30)
chart = page.ui.charts.chartJs.step(data, y_columns=list(range(4)), x_axis='x')
chart.options.showLines = True

Related Pages:

https://www.chartjs.org/samples/latest/scales/linear/step-size.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

timeseries(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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, **kwargs) → ChartLine

Display a line chart from ChartJs.

Tags:
Categories:

Usage:

from epyk.mocks import urls as data_urls

data_rest = page.py.requests.csv(data_urls.PLOTLY_APPLE_PRICES)
ts = page.ui.charts.chartJs.timeseries(data_rest, y_columns=['AAPL.Open'], x_axis="Date")

Related Pages:

https://www.chartjs.org/ https://www.chartjs.org/samples/latest/scales/logarithmic/line.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

treemap(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, groups: Optional[list] = None, 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, **kwargs) → ChartTreeMap

Display a treemap chart from ChartJs.

Tags:
Categories:

Usage:

Related Pages:

https://chartjs-chart-treemap.pages.dev/usage.html

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
groups – Optional. The columns corresponding to a key in the dictionaries in the record
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)

wordcloud(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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, **kwargs) → ChartWordCloud

Chart.js module for charting word or tag clouds. Adding new chart type: wordCloud.

Tags:
Categories:

Usage:

fake = Faker()
rec = [{"Sales": random.randint(1, 100), "Other": fake.name()} for _ in range(40)]
chart1 = page.ui.charts.chartJs.wordcloud(rec, y_columns=['Sales'], x_axis="Other")
page.ui.button("click").click([
  chart1.build([{"Sales": 40, "Other": 30}, {"Sales": 1, "Other": 1}, {"Sales": 15, "Other": 5}])])

Related Pages:

https://github.com/sgratzl/chartjs-chart-wordcloud

Parameters:

record – Optional. The list of dictionaries with the input data
y_columns – 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
profile – Optional. A flag to set the component performance storage
width – Optional. The width of the component in the page, default (100, ‘%’)
height – Optional. The height of the component in the page, default (330, “px”)
options – Optional. Specific Python options available for this component
html_code – Optional. An identifier for this component (on both Python and Javascript side)