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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None) → 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: Union[tuple, int, str] = (100, '%'), height: 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:

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: Union[tuple, int, str] = (100, '%'), height: 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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None) → ChartExts

Display a bar chart from ChartJs.

Tags:

Categories:

Usage:

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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None) → 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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None) → 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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None) → ChartHBar

Display a horizontal bar chart from ChartJs.

Tags:

Categories:

Usage:

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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, horizontal: bool = False, kind: str = 'bar', html_code: Optional[str] = None) → 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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None) → ChartLine

Display a line chart from ChartJs.

Tags:

Categories:

Usage:

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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None) → 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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), html_code: Optional[str] = None) → 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: Union[tuple, int, str] = (100, '%'), height: 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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None) → 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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None) → 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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None) → 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)

scatter(record: Optional[list] = None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, 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) → 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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None)

Display a step chart from ChartJs.

Tags:

Categories:

Usage:

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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None) → ChartLine

Display a line chart from ChartJs.

Tags:

Categories:

Usage:

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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None) → 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: Union[tuple, int, str] = (100, '%'), height: Union[tuple, int, str] = (330, 'px'), options: Optional[dict] = None, html_code: Optional[str] = None) → 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)