@@ -11,7 +11,7 @@ | |||||
<tbody> | <tbody> | ||||
{% for j in jobs %} | {% for j in jobs %} | ||||
<tr> | <tr> | ||||
<td><span class="indicator {{ j.color }}" title="{{ j.status }}">{{ j.queue }}</span></td> | |||||
<td><span class="indicator {{ j.color }}" title="{{ j.status }}">{{ j.queue.split(".").slice(-1)[0] }}</span></td> | |||||
<td style="overflow: auto;"> | <td style="overflow: auto;"> | ||||
<div> | <div> | ||||
{{ frappe.utils.encode_tags(j.job_name) }} | {{ frappe.utils.encode_tags(j.job_name) }} | ||||
@@ -0,0 +1,35 @@ | |||||
# Making Charts using c3.js | |||||
Frappe bundles the c3.js libary to make charts inside the app and provides a wrapper class so that you can start using charts out of the box. To use chart, you need the x and y data, make a wrapper block and then just make the chart object. | |||||
### Time Series Example | |||||
page.chart = new frappe.ui.Chart({ | |||||
// attach the chart here | |||||
wrapper: $('<div>').appendTo(page.body), | |||||
// pass the data, like | |||||
// ['x', '2016-01-01', '2016-01-02'] | |||||
// ['Value', 20, 30] | |||||
data: { | |||||
x: 'x', | |||||
xFormat: '%Y-%m-%d', | |||||
columns: [data[0], data[1]], | |||||
}, | |||||
legend: { | |||||
show: false | |||||
}, | |||||
axis: { | |||||
x: { | |||||
type: 'timeseries', | |||||
}, | |||||
y: { | |||||
min: 0, | |||||
padding: {bottom: 10} | |||||
} | |||||
} | |||||
}); | |||||
### Help | |||||
For more options, see the [c3js.org](http://c3js.org/examples.html) docs |
@@ -341,10 +341,11 @@ frappe.ui.form.Dashboard = Class.extend({ | |||||
} | } | ||||
}, | }, | ||||
// stats | |||||
add_stats: function(html) { | |||||
this.stats_area.html(html).removeClass('hidden'); | |||||
add_indicator: function(label, color) { | |||||
this.show(); | this.show(); | ||||
this.stats_area.removeClass('hidden'); | |||||
return $('<div class="col-sm-3"><span class="indicator '+color+'">' | |||||
+label+'</span></div>').appendTo(this.stats_area); | |||||
}, | }, | ||||
//graphs | //graphs | ||||
@@ -8,7 +8,7 @@ | |||||
<div class="text-muted small heatmap-message hidden"></div> | <div class="text-muted small heatmap-message hidden"></div> | ||||
</div> | </div> | ||||
<div class="form-chart form-dashboard-section hidden"></div> | <div class="form-chart form-dashboard-section hidden"></div> | ||||
<div class="form-stats form-dashboard-section hidden"></div> | |||||
<div class="form-stats form-dashboard-section hidden row"></div> | |||||
<div class="form-links form-dashboard-section hidden"> | <div class="form-links form-dashboard-section hidden"> | ||||
<div class="transactions"></div> | <div class="transactions"></div> | ||||
</div> | </div> |