forked from ukosuagwu/python-nvd3
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlinePlusBarChart.py
More file actions
131 lines (107 loc) · 5.75 KB
/
Copy pathlinePlusBarChart.py
File metadata and controls
131 lines (107 loc) · 5.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
#!/usr/bin/python
# -*- coding: utf-8 -*-
"""
Python-nvd3 is a Python wrapper for NVD3 graph library.
NVD3 is an attempt to build re-usable charts and chart components
for d3.js without taking away the power that d3.js gives you.
Project location : https://github.com/areski/python-nvd3
"""
from .NVD3Chart import NVD3Chart, TemplateMixin
class linePlusBarChart(TemplateMixin, NVD3Chart):
"""
A linePlusBarChart Chart is a type of chart which displays information
as a series of data points connected by straight line segments
and with some series with rectangular bars with lengths proportional
to the values that they represent.
Python example::
from nvd3 import linePlusBarChart
chart = linePlusBarChart(name="linePlusBarChart",
width=500, height=400, x_axis_format="%d %b %Y",
x_is_date=True, focus_enable=True,
yaxis2_format="function(d) { return d3.format(',0.3f')(d) }")
xdata = [1338501600000, 1345501600000, 1353501600000]
ydata = [6, 5, 1]
y2data = [0.002, 0.003, 0.004]
extra_serie = {"tooltip": {"y_start": "There are ", "y_end": " calls"},
"date_format": "%d %b %Y %H:%S" }
chart.add_serie(name="Serie 1", y=ydata, x=xdata, extra=extra_serie,
bar=True)
extra_serie = {"tooltip": {"y_start": "There are ", "y_end": " min"}}
chart.add_serie(name="Serie 2", y=y2data, x=xdata, extra=extra_serie)
chart.buildcontent()
Note that in case you have two data serie with extreme different numbers,
that you would like to format in different ways,
you can pass a keyword *yaxis1_format* or *yaxis2_format* when
creating the graph.
In the example above the graph created presents the values of the second
data series with three digits right of the decimal point.
Javascript generated:
.. raw:: html
<div id="linePlusBarChart"><svg style="height:450px; width:100%"></svg></div>
<script>
data_linePlusBarChart=[{"bar": "true", "values": [{"y": 6, "x": 1338501600000}, {"y": 5, "x": 1345501600000}, {"y": 1, "x": 1353501600000}], "key": "Serie 1", "yAxis": "1"}, {"values": [{"y": 0.002, "x": 1338501600000}, {"y": 0.003, "x": 1345501600000}, {"y": 0.004, "x": 1353501600000}], "key": "Serie 2", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.linePlusBarChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_linePlusBarChart;
chart.y2Axis
.tickFormat(function(d) { return d3.format(',0.3f')(d) });
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%d %b %Y')(new Date(parseInt(d))) });
chart.y1Axis
.tickFormat(function(d) { return d3.format(',f')(d) });
chart.tooltipContent(function(key, y, e, graph) {
var x = d3.time.format("%d %b %Y %H:%S")(new Date(parseInt(graph.point.x)));
var y = String(graph.point.y);
if(key.indexOf('Serie 1') > -1 ){
var y = 'There are ' + String(graph.point.y) + ' calls';
}
if(key.indexOf('Serie 2') > -1 ){
var y = 'There are ' + String(graph.point.y) + ' min';
}
tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x;
return tooltip_str;
});
chart.showLegend(true);
d3.select('#linePlusBarChart svg')
.datum(datum)
.transition().duration(500)
.attr('width', 500)
.attr('height', 400)
.call(chart);
});
</script>
"""
CHART_FILENAME = "./lineplusbarchart.html"
template_chart_nvd3 = NVD3Chart.template_environment.get_template(CHART_FILENAME)
def __init__(self, **kwargs):
super(linePlusBarChart, self).__init__(**kwargs)
self.model = 'linePlusBarChart'
height = kwargs.get('height', 450)
width = kwargs.get('width', None)
self.yaxis1_format = kwargs.get('yaxis1_format',
"function(d) { return d3.format(',f')(d) }")
self.yaxis2_format = kwargs.get('yaxis2_format',
"function(d) { return d3.format(',f')(d) }")
if kwargs.get('x_is_date', False):
self.set_date_flag(True)
self.create_x_axis('xAxis',
format=kwargs.get('x_axis_format',
'%d %b %Y %H %S'),
date=True)
self.create_x_axis('x2Axis', format=kwargs.get('x_axis_format',
'%d %b %Y %H %S'),
date=True)
self.set_custom_tooltip_flag(True)
else:
self.create_x_axis('xAxis', format=kwargs.get('x_axis_format',
'.2f'))
self.create_x_axis('x2Axis', format=kwargs.get('x_axis_format',
'.2f'))
self.create_y_axis('y1Axis', format=self.yaxis1_format,
custom_format=True)
self.create_y_axis('y2Axis', format=self.yaxis2_format,
custom_format=True)
self.set_graph_height(height)
if width:
self.set_graph_width(width)