Nvd3 Interface

class epyk.interfaces.graphs.CompChartsNvd3.Nvd3(ui)
area(record=None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (330, 'px'), html_code: Optional[str] = None) → ChartArea

Display an area chart from NVD3.

Tags:

Categories:

Usage:

Related Pages:

Parameters:

  • 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. 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

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

Display a bars chart from NVD3.

Tags:

Categories:

Usage:

c = page.ui.charts.nvd3.bar(y_columns=["Value"], x_axis="Year", height=(500, "px"))
page.ui.button("Click").click([
text = page.ui.input("Italy")
slider = page.ui.sliders.range(minimum=1990, maximum=2020)
page.js.fetch(data_urls.DEMO_COUNTRY).csvtoRecords().filterCol("Country Name", text.dom.content).cast(["Year", "Value"]).
  filterCol("Year", slider.dom.min_select, ">").filterCol("Year", slider.dom.max_select, "<").
  get([
    c.build(pk.events.data)
    #"console.log(row)"
  ])
])

Related Pages:

Parameters:

  • 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. 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

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

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)

candlestick(record, closes, highs, lows, opens, x_axis, profile=None, options=None, width=(100, '%'), height=(330, 'px'), html_code=None)
Tags:

Categories:

Usage:

data = page.py.requests.csv(data_urls.PLOTLY_APPLE_PRICES)
sc = page.ui.charts.nvd3.candlestick(data, closes=["AAPL.Close"], highs=["AAPL.High"], lows=["AAPL.Low"],
    opens=["AAPL.Open"], x_axis='Date')

# Example using pandas_datareader
import pandas_datareader.data as pdr

btc = pdr.get_data_yahoo("BTC-USD", datetime.strptime(start, '%Y-%m-%d'), datetime.strptime(end, '%Y-%m-%d'))
btc.reset_index(inplace=True)
btc["Date"] = btc["Date"].dt.strftime("%Y-%m-%d")

c1 = page.ui.charts.nvd3.candlestick(
  btc.to_dict("records"), closes=["Adj Close"], highs=["High"], lows=["Low"], opens=["Open"], x_axis="Date")
c1.shared.y_format_number(factor=1000)
c1.shared.y_label("$")

Related Pages:

Parameters:

  • record – List of dict. Optional. The Python list of dictionaries.

  • closes –

  • highs –

  • lows –

  • opens –

  • x_axis –

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

  • width – Tuple. Optional. A tuple with the integer for the component width and its unit.

  • height – Tuple. Optional. A tuple with the integer for the component height and its unit.

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

  • html_code – String. Optional. An identifier for this component (on both Python and Javascript side).

donut(record=None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (330, 'px'), html_code: Optional[str] = None) → ChartPie

Display a donut chart from NVD3.

Tags:

Categories:

Usage:

c = page.ui.charts.nvd3.donut(y_columns=["Value"], x_axis="Year", height=(500, "px"))
donut_s = page.ui.charts.nvd3.donut(data, y_columns=[1], x_axis='g')
donut_s.dom.padAngle(.08).cornerRadius(5)

Related Pages:

Parameters:

  • 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. 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

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

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)

forceDirected(profile=None, options=None, width=(400, 'px'), height=(330, 'px'), html_code=None)
Tags:

Categories:

Usage:

force = page.ui.charts.nvd3.forceDirected()
force.add_trace({
    "nodes": [
      {"name": "Myriel", "group":1},
      {"name": "Napoleon", "group":1},
      {"name": "Mlle.Baptistine", "group": 5}],
    "links": [
      {"source": 1, "target": 2, "value": 1}
    ]
})

Related Pages:

Parameters:

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

  • width – Tuple. Optional. A tuple with the integer for the component width and its unit.

  • height – Tuple. Optional. A tuple with the integer for the component height and its unit.

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

  • html_code – String. Optional. An identifier for this component (on both Python and Javascript side).

gauge(value: float, text: Optional[str] = None, total: float = 100, profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (330, 'px'), html_code: Optional[str] = None) → ChartPie
Tags:

Categories:

Usage:

page.ui.charts.nvd3.gauge(value=8, text="", total=10)

Related Pages:

Parameters:

  • value –

  • text –

  • total –

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

  • 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

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

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)

group_box(profile=None, options=None, width=(100, '%'), height=(330, 'px'), html_code=None)
Tags:

Categories:

Usage:

plot_box = page.ui.charts.nvd3.group_box()
plot_box.add_box(q1=1.05, q3=2.7, mean=3.365, median=1.3, minRegularValue=0.4, maxRegularValue=4.4, minOutlier=0.4, maxOutlier=6)
plot_box.add_box(q1=1.05, q3=2.849999996, mean=3.4949999, median=1.5, minRegularValue=0.3, maxRegularValue=4.9, minOutlier=0.3, maxOutlier=4.9)

Related Pages:

Parameters:

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

  • width – Tuple. Optional. A tuple with the integer for the component width and its unit.

  • height – Tuple. Optional. A tuple with the integer for the component height and its unit.

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

  • html_code – String. Optional. An identifier for this component (on both Python and Javascript side).

hbar(record=None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (330, 'px'), html_code: Optional[str] = None)

Display a bars chart from NVD3.

Tags:

Categories:

Usage:

c = page.ui.charts.nvd3.hbar(y_columns=["Value"], x_axis="Year", height=(500, "px"))
page.ui.button("Click").click([
text = page.ui.input("Italy")
slider = page.ui.sliders.range(minimum=1990, maximum=2020)
page.js.fetch(data_urls.DEMO_COUNTRY).csvtoRecords().filterCol("Country Name", text.dom.content).cast(["Year", "Value"]).
  filterCol("Year", slider.dom.min_select, ">").filterCol("Year", slider.dom.max_select, "<").
  get([
    c.build(pk.events.data)
    #"console.log(row)"
  ])
])

Related Pages:

Parameters:

  • 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. 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

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

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)

histo(record=None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (330, 'px'), html_code: Optional[str] = None) → ChartHistoBar

Display a histo chart from NVD3.

Tags:

Categories:

Usage:

from epyk.mocks import randoms

data = randoms.getSeries(5, 40)
page.ui.charts.nvd3.histo(data, y_columns=[1, 2], x_axis='x')

Related Pages:

Parameters:

  • 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. 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

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

Display a line chart from NVD3.

Tags:

Categories:

Usage:

c = page.ui.charts.nvd3.line(y_columns=["Value"], x_axis="Year", height=(500, "px"))
page.ui.button("Click").click([
text = page.ui.input("Italy")
slider = page.ui.sliders.range(minimum=1990, maximum=2020)
page.js.fetch(data_urls.DEMO_COUNTRY).csvtoRecords().filterCol("Country Name", text.dom.content).cast(["Year", "Value"]).
  filterCol("Year", slider.dom.min_select, ">").filterCol("Year", slider.dom.max_select, "<").
  get([
    c.build(pk.events.data)
    #"console.log(row)"
  ])
])

Related Pages:

Parameters:

  • 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. 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

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

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)

line_cumulative(record=None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (330, 'px'), html_code: Optional[str] = None) → ChartCumulativeLine

Display a Cumulative line chart from NVD3.

Tags:

Categories:

Usage:

from epyk.mocks import randoms

data = randoms.getSeries(5, 40)
page.ui.charts.nvd3.line_cumulative(data, y_columns=[1, 2, 3, 4], x_axis='x')

Related Pages:

Parameters:

  • 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. 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

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

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)

line_focus(record=None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (330, 'px'), html_code: Optional[str] = None) → ChartFocusLine

Display a line chart with focus from NVD3.

Tags:

Categories:

Usage:

from epyk.mocks import randoms

data = randoms.getSeries(5, 40)
page.ui.charts.nvd3.line_focus(data, y_columns=[1, 2, 3, 4], x_axis='x')

Related Pages:

Parameters:

  • 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. 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

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

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)

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

Display a multi types chart from NVD3.

Tags:

Categories:

Usage:

from epyk.mocks import randoms

data = randoms.getSeries(5, 40)
page.ui.charts.nvd3.multi(data, y_columns=[1, 2], x_axis='x')

Related Pages:

Parameters:

  • 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. 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

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

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)

ohlc(record, closes, highs, lows, opens, x_axis, profile=None, options=None, width=(100, '%'), height=(330, 'px'), html_code=None)
Tags:

Categories:

Usage:

from epyk.mocks import urls as data_urls

data_rest = page.py.requests.csv(data_urls.PLOTLY_APPLE_PRICES)
chart = page.ui.charts.nvd3.ohlc(data_rest, closes=["AAPL.Close"], highs=["AAPL.High"], lows=["AAPL.Low"], opens=["AAPL.Open"], x_axis='Date')

Related Pages:

Parameters:

  • record – List of dict. Optional. The Python list of dictionaries.

  • closes –

  • highs –

  • lows –

  • opens –

  • x_axis –

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

  • width – Tuple. Optional. A tuple with the integer for the component width and its unit.

  • height – Tuple. Optional. A tuple with the integer for the component height and its unit.

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

  • html_code – String. Optional. An identifier for this component (on both Python and Javascript side).

parallel_coordinates(record, dimensions=None, profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (330, 'px'), html_code: Optional[str] = None) → ChartParallelCoord
Tags:

Categories:

Usage:

Related Pages:

Parameters:

  • record – Optional. The Python list of dictionaries

  • dimensions – Optional.

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

  • 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

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

Display a pie chart from NVD3.

Tags:

Categories:

Usage:

dataPoints = [
  {'x': "Series A", 'y': 10, 'y1': 10},
  {'x': "Series B", 'y': 35, 'y1': 20},
]

dataPoints2 = [
  {'label': "mango", 'x': "Series A", 'y': 30, 'y1': 0},
  {'label': "grape", 'x': "Series B", 'y': 28, 'y1': 0}
]

chart = page.ui.charts.nvd3.pie(dataPoints, y_columns=["y"], x_axis='x')
page.ui.button("Load").click([c.build(nvd3.xy(dataPoints2, ["y"], "x"))])

Related Pages:

Parameters:

  • 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. 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

  • 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=None, y=None, x=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[Union[bool, dict]] = None, html_code: Optional[str] = None, **kwargs)
Tags:

Categories:

Usage:

Related Pages:

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)

scatter(record=None, y_columns: Optional[list] = None, x_axis: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (330, 'px'), html_code: Optional[str] = None) → ChartScatter

Display a scatter chart from NVD3.

Tags:

Categories:

Usage:

from epyk.mocks import randoms

data = randoms.getSeries(5, 40)
scatter = page.ui.charts.nvd3.scatter(data, y_columns=[1, 2, 3, 4], x_axis='x')
scatter.dom.showYAxis(False).showXAxis(False)

Related Pages:

Parameters:

  • 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. 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

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

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)

sunburst(record, name: str, profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (330, 'px'), html_code: Optional[str] = None) → ChartSunbrust
Tags:

Categories:

Usage:

records = [
  {'name': 'scripts',
   'children': [
      {"name": "javascript", "size": 10},
      {"name": "python", "size": 5},
      {"name": "ruby", "size": 5},
      {"name": "r", "size": 5}]},
   {"name": "code",
    "children": [
      {"name": "C#", "size": 10},
      {"name": "Java", "size": 5},
    ]
    }
]

page.ui.charts.nvd3.sunburst(records, name='languages')

Related Pages:

Parameters:

  • record – Optional. The Python list of dictionaries

  • name – Optional.

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

  • 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

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

Display a Timseries chart from NVD3.

Tags:

Categories:

Usage:

Related Pages:

Parameters:

  • 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. 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

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

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)