NVD3Chart

class nvd3.NVD3Chart.NVD3Chart(**kwargs)

NVD3Chart Base class.

__init__(**kwargs)

This is the base class for all the charts. The following keywords are accepted:

Keyword:

display_container - default: True

Keyword:

jquery_on_ready - default: False

Keyword:

charttooltip_dateformat - default: '%d %b %Y'

Keyword:

name - default: the class name model - set the model (e.g. pieChart, ` LineWithFocusChart, MultiBarChart).

Keyword:

color_category - default - None

Keyword:

color_list - default - None used by pieChart (e.g. ['red', 'blue', 'orange'])

Keyword:

margin_bottom - default - 20

Keyword:

margin_left - default - 60

Keyword:

margin_right - default - 60

Keyword:

margin_top - default - 30

Keyword:

height - default - ''

Keyword:

width - default - ''

Keyword:

stacked - default - False

Keyword:

focus_enable - default - False

Keyword:

resize - define - False

Keyword:

show_legend - default - True

Keyword:

show_labels - default - True

Keyword:

tag_script_js - default - True

Keyword:

use_interactive_guideline - default - False

Keyword:

chart_attr - default - None

Keyword:

extras - default - None

Extra chart modifiers. Use this to modify different attributes of the chart.

Keyword:

x_axis_date - default - False Signal that x axis is a date axis

Keyword:

date_format - default - %x see https://github.com/mbostock/d3/wiki/Time-Formatting

Keyword:

x_axis_format - default - ''.

Keyword:

y_axis_format - default - ''.

Keyword:

style - default - '' Style modifiers for the DIV container.

Keyword:

color_category - default - category10

Acceptable values are nvd3 categories such as category10, category20, category20c.

CHART_FILENAME = None
add_chart_extras(extras)

Use this method to add extra d3 properties to your chart. For example, you want to change the text color of the graph:

chart = pieChart(name='pieChart', color_category='category20c', height=400, width=400)

xdata = ["Orange", "Banana", "Pear", "Kiwi", "Apple", "Strawberry", "Pineapple"]
ydata = [3, 4, 0, 1, 5, 7, 3]

extra_serie = {"tooltip": {"y_start": "", "y_end": " cal"}}
chart.add_serie(y=ydata, x=xdata, extra=extra_serie)

The above code will create graph with a black text, the following will change it:

text_white="d3.selectAll('#pieChart text').style('fill', 'white');"
chart.add_chart_extras(text_white)

The above extras will be appended to the java script generated.

Alternatively, you can use the following initialization:

chart = pieChart(name='pieChart',
                 color_category='category20c',
                 height=400, width=400,
                 extras=text_white)
add_serie(y, x, name=None, extra=None, **kwargs)

add serie - Series are list of data that will be plotted y {1, 2, 3, 4, 5} / x {1, 2, 3, 4, 5}

Attributes:

  • name - set Serie name
  • x - x-axis data
  • y - y-axis data

kwargs:

  • shape - for scatterChart, you can set different shapes
    (circle, triangle etc...)
  • size - for scatterChart, you can set size of different shapes
  • type - for multiChart, type should be bar
  • bar - to display bars in Chart
  • color_list - define list of colors which will be
    used by pieChart
  • color - set axis color
  • disabled -

extra:

  • tooltip - set tooltip flag
  • date_format - set date_format for tooltip if x-axis is in date format
assets_directory = u'./bower_components/'
directory holding the assets (bower_components)
buildcontainer()

generate HTML div

buildcontent()

Build HTML content only, no header or body tags. To be useful this will usually require the attribute juqery_on_ready to be set which will wrap the js in $(function(){<regular_js>};)

buildhtml()

Build the HTML page Create the htmlheader with css / js Create html page Add Js code for nvd3

buildhtmlheader()

generate HTML header content

buildjschart()

generate javascript code for the chart

container = None

Place holder for the graph (the HTML div) Written by buildcontainer

containerheader = None

Header for javascript code

count = 0

chart count

create_x_axis(name, label=None, format=None, date=False, custom_format=False)

Create X-axis

create_y_axis(name, label=None, format=None, custom_format=False)

Create Y-axis

date_flag = None

x-axis contain date format or not

htmlcontent = None

written by buildhtml

jschart = None

Javascript code as string

model = None

The chart model,

set_containerheader(containerheader)

Set containerheader

set_custom_tooltip_flag(custom_tooltip_flag)

Set custom_tooltip_flag & date_flag

set_date_flag(date_flag=False)

Set date flag

set_graph_height(height)

Set Graph height

set_graph_width(width)

Set Graph width

template_environment = <jinja2.environment.Environment object>
template_page_nvd3 = None

an Instance of Jinja2 template