GraphChartJs Module

class epyk.core.html.graph.GraphChartJs.Chart(page: PageModel, width, height, html_code, options, profile)
activePoints(i: Optional[int] = None) → ChartJsActivePoints

The current active points selected by an event on a chart.

Usage:

activePoints

Related Pages:

Parameters:

i – Optional. The series index. Default it is the series clicked

build(data: Union[str, JsDataModel, float, dict, list, bool] = None, options: Union[str, JsDataModel, float, dict, list, bool] = None, profile: Optional[Union[bool, dict]] = None, component_id: str = None, stop_state: bool = True, dataflows: List[dict] = None)

Update the chart with context and / or data changes.

Parameters:

  • data – Optional. The full datasets object expected by ChartJs

  • options – Optional. Specific Python options available for this component

  • profile – Optional. A flag to set the component performance storage

  • component_id – Optional. Not used

  • stop_state – Remove the top panel for the component state (error, loading…)

  • dataflows – Chain of data transformations

click(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = False, source_event: Optional[str] = None, on_ready: bool = False)

Add a click event on the chart.

Related Pages:

Parameters:

  • js_funcs – Set of Javascript function to trigger on this event

  • profile – Optional. A flag to set the component performance storage

  • source_event – Optional. The JavaScript DOM source for the event (can be a sug item)

  • on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

colors(hex_values: list)

Set the colors of the chart.

hex_values can be a list of string with the colors or a list of tuple to also set the bg colors. If the background colors are not specified they will be deduced from the colors list changing the opacity.

Usage:

from epyk.mocks import randoms

chart = page.ui.charts.chartJs.line(randoms.languages, y_columns=["rating", 'change'], x_axis='name')
chart.colors(["#FFFF00", "#FFA500"])
Parameters:

hex_values – An array of hexadecimal color codes

dataset(i: Optional[int] = None) → DataSetPie

The data property of a ChartJs chart.

Related Pages:

Parameters:

i – Optional. The series index according to the y_columns

property datasets

Get all the datasets defined for a chart.

dblclick(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = False, source_event: Optional[str] = None, on_ready: bool = False)

Add a double click event on the chart.

Related Pages:

Parameters:

  • js_funcs – Set of Javascript function to trigger on this event

  • profile – Optional. A flag to set the component performance storage

  • source_event – Optional. The JavaScript DOM source for the event (can be a sug item)

  • on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

define(options: Optional[Union[str, JsDataModel, float, dict, list, bool]] = None, dataflows: Optional[List[dict]] = None) → str

Override the chart settings on the JavaScript side. This will allow ot set specific styles for some series or also add commons properties.

Usage:

chart.onReady([chart.define({“commons”: {“backgroundColor”: [“pink”], “label”: “Other series”}})])

Parameters:

  • options – JavaScript of Python attributes

  • dataflows – Chain of config transformations:

property dom: ChartJs

Return all the Javascript functions defined for an HTML Component. Those functions will use plain javascript by default.

Returns:

A Javascript Dom object.

getCtx(options: Optional[dict] = None)

Get the ChartJs context. The internal configuration of the chart. The context is a dictionary object with javascript fragments.

Related Pages:

Parameters:

options – Optional. The chart options

hover(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = False, source_event: Optional[str] = None)

Add an on mouse hover event on the chart.

Related Pages:

Parameters:

  • js_funcs – Set of Javascript function to trigger on this event

  • profile – Optional. A flag to set the component performance storage

  • source_event – Optional. The JavaScript DOM source for the event (can be a sug item)

property js: ChartJs

Return all the Javascript functions defined in the framework. THis is an entry point to the full Javascript ecosystem.

Usage:

line = page.ui.charts.chartJs.bar()
page.ui.button("Load").click([line.js.add(6, {"test 2": 34})])
Returns:

A Javascript object.

label(i: int, name: str)

Change the series name.

Parameters:

  • i – The series index according to the y_columns

  • name – The new name to be set

labels(labels: list)

Set the labels of the different series in the chart.

Related Pages:

Parameters:

labels – An array of labels

property options: ChartJsOptions

Property to the series options.

property plugins

Shortcut property to all the external plugins defined in the framework.

Related Pages:

property shared

All the common properties shared between all the charts. This will ensure a compatibility with the plot method.

Usage:

line = page.ui.charts.chartJs.bar()
line.shared.x_label("x axis")
class epyk.core.html.graph.GraphChartJs.ChartBar(page: PageModel, width, height, html_code, options, profile)
add_dataset(data, label: str, kind: Optional[str] = None, colors: Optional[List[str]] = None, opacity: Optional[float] = None, alias: Optional[str] = None, **kwargs) → DataSetScatterLine

Add a new Dataset to the chart list of Datasets.

Related Pages:

Parameters:

  • data – The list of points (float)

  • label – The series label (visible in the legend)

  • colors – Optional. The color for this series. Default the global definition

  • opacity – Optional. The opacity level for the content

  • kind – Optional. THe series type. Default to the chart type if not supplied

  • alias – The chart alias name visible in the legend. Default the label

new_dataset(index, data, label, colors=None, opacity=None, kind=None, **kwargs)

Add a new series to the chart datasets.

The dataset structure of a chart is a list of dataset.

Related Pages:

Parameters:

  • index – The index of the dataset in the chart list of datasets

  • data – The list of points (float)

  • label – The series label (visible in the legend)

  • colors – Optional. The color for this series. Default the global definition

  • opacity – Optional. The opacity level for the content

  • kind – Optional. THe series type. Default to the chart type if not supplied

property options: OptionsBar

Property to the bar chart options.

Related Pages:

class epyk.core.html.graph.GraphChartJs.ChartBubble(page: PageModel, width, height, html_code, options, profile)
add_dataset(data, label, colors=None, opacity=None, **kwargs)

Add a new Dataset to the chart list of Datasets.

Related Pages:

Parameters:

  • data – The list of points (float)

  • label – The list of points (float)

  • colors – Optional. The color for this series. Default the global definition

  • opacity – Optional. The opacity level for the content

new_dataset(index, data, label, colors=None, opacity=None, kind=None, **kwargs)

Add a new series to the chart datasets.

The dataset structure of a chart is a list of dataset.

Related Pages:

Parameters:

  • index – The index of the dataset in the chart list of datasets

  • data – The list of points (float)

  • label – The series label (visible in the legend)

  • colors – Optional. The color for this series. Default the global definition

  • opacity – Optional. The opacity level for the content

  • kind – Optional. THe series type. Default to the chart type if not supplied

class epyk.core.html.graph.GraphChartJs.ChartExts(page, width, height, html_code, options, profile)
class epyk.core.html.graph.GraphChartJs.ChartHBar(page: PageModel, width, height, html_code, options, profile)
class epyk.core.html.graph.GraphChartJs.ChartJsActivePoints(chart_id, i, page: PageModel)
property dataset: JsObject

Get the series dataset.

property datasetLabel: JsObject

Get the series name.

Usage:

line = page.ui.charts.chartJs.line()
line.click([line.activePoints().datasetLabel])
property index: JsObject

Get the index of the clicked series in teh datasets.

Usage:

line = page.ui.charts.chartJs.line()
line.click([line.activePoints().index])
Returns:

A javaScript number.

property label: JsObject

Usage:

line = page.ui.charts.chartJs.line()
line.click([line.activePoints().label])
property labels: JsObject

Get the series label name.

Usage:

line = page.ui.charts.chartJs.line()
line.click([line.activePoints().labels])
property model: JsObject

Get the series value.

Usage:

line = page.ui.charts.chartJs.line()
line.click([line.activePoints().model])
property value: JsObject

Get the point value.

Usage:

line = page.ui.charts.chartJs.line()
line.click([line.activePoints().value])
property x: JsObject

Get the name of the selected series.

Usage:

line = page.ui.charts.chartJs.line()
line.click([line.activePoints().x])
property y: JsObject

Get the value of the selected series.

Usage:

line = page.ui.charts.chartJs.line()
line.click([line.activePoints().y])
class epyk.core.html.graph.GraphChartJs.ChartLine(page: PageModel, width, height, html_code, options, profile)
add_dataset(data, label: str = '', colors=None, opacity=None, kind=None, **kwargs)

Add a new Dataset to the chart list of Datasets.

Related Pages:

Parameters:

  • data – The list of points (float)

  • label – Optional. The list of points (float)

  • colors – Optional. The color for this series. Default the global definition

  • opacity – Optional. The opacity level for the content

  • kind – Optional. The chart type

new_dataset(index, data, label, colors=None, opacity=None, kind=None, **kwargs)

Add a new series to the chart datasets.

The dataset structure of a chart is a list of dataset.

For a chart line the default Opacity is None which will set the fill to attribute to False.

Related Pages:

Parameters:

  • index – The index of the dataset in the chart list of datasets

  • data – The list of points (float)

  • label – The series label (visible in the legend)

  • colors – Optional. The color for this series. Default the global definition

  • opacity – Optional. The opacity level for the content

  • kind – Optional. THe series type. Default to the chart type if not supplied

property options: OptionsLine

Property to the specific ChartJs Line chart.

Related Pages:

class epyk.core.html.graph.GraphChartJs.ChartPie(page: PageModel, width, height, html_code, options, profile)
add_dataset(data, label: str = '', colors: Optional[List[str]] = None, opacity: Optional[float] = None, **kwargs) → DataSetPie
Parameters:

  • data – The list of points (float)

  • label – Optional. The series label (visible in the legend)

  • colors – Optional. The color for this series. Default the global definition

  • opacity – Optional. The opacity factory from 0 to 1

new_dataset(index: int, data, label: str = '', colors: Optional[List[str]] = None, opacity: Optional[float] = None, kind: Optional[str] = None, **kwargs) → DataSetPie
Parameters:

  • index –

  • data – The list of points (float)

  • label – Optional. The series label (visible in the legend)

  • colors – Optional. The color for this series. Default the global definition

  • opacity – Optional. The opacity factory from 0 to 1

  • kind – Optional. THe series type. Default to the chart type if not supplied

property options: OptionsPie

Property to the Pie Chart options.

class epyk.core.html.graph.GraphChartJs.ChartPolar(page: PageModel, width, height, html_code, options, profile)
add_dataset(data, label: str, colors: Optional[List[str]] = None, opacity: Optional[float] = None, kind: Optional[str] = None, **kwargs) → DataSetPolar

Related Pages:

Parameters:

  • data – The list of points (float)

  • label – The series label (visible in the legend)

  • colors – Optional. The color for this series. Default the global definition

  • opacity – Optional. The opacity factory from 0 to 1

  • kind – Optional. The series type. Default to the chart type if not supplied

new_dataset(index: int, data, label: str, colors: Optional[List[str]] = None, kind: Optional[str] = None, **kwargs) → DataSetPolar

Add anew dataset.

Related Pages:

Parameters:

  • index – The index of the dataset in the chart list of datasets

  • data – The list of points (float)

  • label – The series label (visible in the legend)

  • colors – Optional. The color for this series. Default the global definition

  • kind – Optional. The series type. Default to the chart type if not supplied

property options: OptionsPolar

Property to the Polar chart options.

Related Pages:

class epyk.core.html.graph.GraphChartJs.ChartRadar(page: PageModel, width, height, html_code, options, profile)
add_dataset(data, label: str, colors: Optional[List[str]] = None, opacity: Optional[float] = None, **kwargs) → DataSetRadar
Parameters:

  • data – The list of points (float)

  • label – Optional. The series label (visible in the legend)

  • colors – Optional. The color for this series. Default the global definition

  • opacity – Optional. The opacity factory from 0 to 1

new_dataset(index: int, data, label: str, colors: Optional[List[str]] = None, opacity: Optional[float] = None, kind: Optional[str] = None, **kwargs) → DataSetRadar
Parameters:

  • index –

  • data – The list of points (float)

  • label – Optional. The series label (visible in the legend)

  • colors – Optional. The color for this series. Default the global definition

  • opacity – Optional. The opacity factory from 0 to 1

  • kind – Optional. The series type. Default to the chart type if not supplied

property options: OptionsRadar

Property to the Radar Chart options.

class epyk.core.html.graph.GraphChartJs.ChartScatter(page: PageModel, width, height, html_code, options, profile)
add_dataset(data, label: str, colors: Optional[List[str]] = None, **kwargs) → DataSetScatterLine
Parameters:

  • data – The list of points (float)

  • label – Optional. The series label (visible in the legend)

  • colors – Optional. The color for this series. Default the global definition

new_dataset(index: int, data, label: str, colors: Optional[List[str]] = None, kind: Optional[str] = None, **kwargs) → DataSetScatterLine
Parameters:

  • index –

  • data – The list of points (float)

  • label – Optional. The series label (visible in the legend)

  • colors – Optional. The color for this series. Default the global definition

  • kind – Optional. THe series type. Default to the chart type if not supplied

class epyk.core.html.graph.GraphChartJs.Datasets(page)
add(data)

Add a series to an existing dataset.

Parameters:

data – A list of numbers

class epyk.core.html.graph.GraphChartJs.Fabric(page, width, height, html_code, options, profile)
build(data=None, options: Optional[dict] = None, profile=False, component_id=None, dataflows: Optional[List[dict]] = None, **kwargs)
Parameters:

  • data –

  • options – Optional. Specific Python options available for this component

  • profile – Optional. A flag to set the component performance storage

  • component_id – Optional.

  • dataflows – Chain of data transformations

create(data=None, options=None, attrs=None, profile=False)
Parameters:

  • data –

  • options – Optional. Specific Python options available for this component

  • attrs – Optional.

  • profile – Optional. A flag to set the component performance storage

new()