Atlasboard and Rickshaw - node.js

Question

Am trying to create a dashboard using the atlasboard and rickshaw. Now what happens is that atlasboard by default has a black background and am unable to see the x-axis and y-axis when creating graphs (e.g WIKI markdown analytics).
If you look at the example screenshot below from the official atlasboard page it appears that atlassian devs have managed to show the x-axis as a white color, so am wondering :
how they did it as am unable to achieve this with rickshaw
apparently.
Is there any css that needs to be overridden or is there any kind of
settings to be setup in nodejs?
or even another graph framework should be used other than rickshaw
(and how to do that)?
Can someone please explain?
(source: bitbucket.org)
Update1 following answer:
I have added the following within the widget:
widget = {
//runs when we receive data from the job
onData: function(el, data) {
function drawDashLine(val, max, min) {
var container = $('.content', el),
viewport = {
height: container.height(),
width: container.width()
},
topPosition = (viewport.height - Math.ceil(val/max * viewport.height));
var dashedLineLine = $('<hr />')
.attr('class', 'dashedLine')
.css({
width: el.width() - 40,
top: topPosition + 'px'
});
var lineLabel = $("<span />")
.attr('class', 'lineLabel')
.css({
top: topPosition + 'px'
})
.text(val);
container.append(dashedLineLine, lineLabel);
}
function paintMinMax(series) {
var mergedData = [];
for (var i = series.length - 1; i >= 0; i--) {
mergedData = mergedData.concat(series[i].data);
};
var min = _.min(_.pluck(mergedData, 'y')),
max = _.max(_.pluck(mergedData, 'y')),
mid = Math.round(max / 2);
drawDashLine(min, max, min);
drawDashLine(mid, max, min);
drawDashLine(max, max, min);
}
function paintTimeMark(chartWidth, chartHeight, startDate, endDate, timeMarkData) {
if (!timeMarkData || !timeMarkData.length) {
return;
}
var chartLengthMs = endDate - startDate;
for (var i = 0, l = timeMarkData.length; i < l; i++) {
var timeMark = timeMarkData[i];
// are we in the boundaries?
if ((timeMark.epoch < startDate) || (timeMark.epoch > endDate)){
continue; // out of boundaries
}
var lengthOfTimemark = timeMark.epoch - startDate;
var percentage = (lengthOfTimemark / chartLengthMs);
var leftPosition = Math.round(chartWidth * percentage);
var top = timeMark.top || 0;
var markHeight = chartHeight - top;
var color = timeMark.color || 'orange';
var mark = $('<div>')
.attr('class', 'mark')
.css({
left: leftPosition + 'px',
'margin-top': top + 'px',
'background-color' : color,
'height': markHeight + 'px'
});
var legend = $('<span>')
.attr('class', 'legend')
.css({
left: leftPosition + 'px',
'margin-top': top + 'px',
'height': markHeight + 'px'
})
.hide()
.text(timeMark.name);
$('.content', el).append(mark, legend);
var center = Math.round((legend.width() - (mark.width())) / 2);
// center align legend
(function(legend, center){
setTimeout(function(){
legend.css({
'margin-left': (-(center)) + 'px'
}).fadeIn();
},600);
}(legend, center));
}
}
function paintChart(width, height, series, color) {
for (var i = series.length - 1; i >= 0; i--) {
series[i].data = formatData(series[i].data);
}
var graph = new Rickshaw.Graph({
element: $('.graph', el)[0],
width: width,
height: height,
renderer: 'line',
offset: 'expand',
series: series
});
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph,
timeFixture: new Rickshaw.Fixtures.Time.Local()
});
xAxis.render();
graph.render();
}
function formatData(rawData) {
var sortedData = _.sortBy(rawData, function(num) {
return num.date;
});
return _.map(sortedData, function(e) {
var ret = {
x: e.date,
y: e.sum
};
return ret;
});
}
var init = function() {
if (data.title) {
$('h2', el).text(data.title);
}
if ($('.graph', el).hasClass('rickshaw_graph')) {
$('.graph', el).empty();
}
if (!data.series.length) {
console.error('There is no results to paint the chart');
return;
}
// paint chart
var width = el.width() - 50;
var height = el.closest('li').height() - 80;
paintChart(width, height, data.series, data.color || 'yellow');
// paint min max dash
paintMinMax(data.series);
// paint time marks
paintTimeMark(width, height, data.startDate, data.endDate, data.timeMarks);
}();
}
};
Then within the job I have added :
module.exports = function(config, dependencies, job_callback) {
var text = "Hello World!";
var date1 = (new Date(2014, 4, 2, 1, 30, 0, 0))/1000;
var date2 = (new Date(2014, 5, 3, 2, 30, 0, 0))/1000;
var date3 = (new Date(2014, 6, 4, 3, 30, 0, 0))/1000;
var date4 = (new Date(2014, 7, 6, 4, 30, 0, 0))/1000;
var totalBacklogDefects = [{ x: date1, y : 40},
{ x: date2, y : 30},
{ x: date3, y : 23}, { x: date4, y : 10} ] ;
var blockedDefects = [{ x: date1, y : 32}, { x: date2, y : 22},
{ x: date3, y : 3}, { x: date4, y : 5} ] ;
var fixedDefects = [{ x: date1, y : 2}, { x: date2, y : 12},
{ x: date3 ,y : 20}, { x: date4, y : 25} ] ;
var series = [
{
data: totalBacklogDefects ,
color: 'steelblue',
name: 'Total Backlog'
},
{
data: blockedDefects ,
color: 'red',
name: 'Blocked Defects'
},
{
data: fixedDefects,
color: 'green',
name: 'Fixed'
}
];
var timeMarks = [
{
top: 0,
color: 'red',
name: 'test2',
epoch: date2
},
{
top: 0,
color: 'blue',
name: 'test1',
epoch: date3
}
];
job_callback(null, {title: "Graph Sandbox", series: series, startDate: date1 ,
endDate : date4 , timeMarks: timeMarks});
};
As for my html page I have added the following:
<h2>graphsandbox</h2>
<div class="content">
<div class="graph rickshaw_graph"></div>
</div>
Can you please let me know whether am using the right approach as currently this renders only an empty box?

Answer 1

The chart widget that you see in the screenshot belongs to an internal package, but I can share it with you :)
Rickshaw is available globally anyway, so you can create your own chart widgets check Rickshaw's examples.
widget = {
onData: function(el, data) {
function drawDashLine(val, max, min) {
var container = $('.content', el),
viewport = {
height: container.height(),
width: container.width()
},
topPosition = (viewport.height - Math.ceil(val/max * viewport.height));
var dashedLineLine = $('<hr />')
.attr('class', 'dashedLine')
.css({
width: el.width() - 40,
top: topPosition + 'px'
});
var lineLabel = $("<span />")
.attr('class', 'lineLabel')
.css({
top: topPosition + 'px'
})
.text(val);
container.append(dashedLineLine, lineLabel);
}
function paintMinMax(series) {
var mergedData = [];
for (var i = series.length - 1; i >= 0; i--) {
mergedData = mergedData.concat(series[i].data);
};
var min = _.min(_.pluck(mergedData, 'y')),
max = _.max(_.pluck(mergedData, 'y')),
mid = Math.round(max / 2);
drawDashLine(min, max, min);
drawDashLine(mid, max, min);
drawDashLine(max, max, min);
}
function paintTimeMark(chartWidth, chartHeight, startDate, endDate, timeMarkData) {
if (!timeMarkData || !timeMarkData.length) {
return;
}
var chartLengthMs = endDate - startDate;
for (var i = 0, l = timeMarkData.length; i < l; i++) {
var timeMark = timeMarkData[i];
// are we in the boundaries?
if ((timeMark.epoch < startDate) || (timeMark.epoch > endDate)){
continue; // out of boundaries
}
var lengthOfTimemark = timeMark.epoch - startDate;
var percentage = (lengthOfTimemark / chartLengthMs);
var leftPosition = Math.round(chartWidth * percentage);
var top = timeMark.top || 0;
var markHeight = chartHeight - top;
var color = timeMark.color || 'orange';
var mark = $('<div>')
.attr('class', 'mark')
.css({
left: leftPosition + 'px',
'margin-top': top + 'px',
'background-color' : color,
'height': markHeight + 'px'
});
var legend = $('<span>')
.attr('class', 'legend')
.css({
left: leftPosition + 'px',
'margin-top': top + 'px',
'height': markHeight + 'px'
})
.hide()
.text(timeMark.name);
$('.content', el).append(mark, legend);
var center = Math.round((legend.width() - (mark.width())) / 2);
// center align legend
(function(legend, center){
setTimeout(function(){
legend.css({
'margin-left': (-(center)) + 'px'
}).fadeIn();
},600);
}(legend, center));
}
}
function paintChart(width, height, series, color) {
for (var i = series.length - 1; i >= 0; i--) {
series[i].data = formatData(series[i].data);
}
var graph = new Rickshaw.Graph({
element: $('.graph', el)[0],
width: width,
height: height,
renderer: 'line',
offset: 'expand',
series: series
});
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph,
timeFixture: new Rickshaw.Fixtures.Time.Local()
});
xAxis.render();
graph.render();
}
function formatData(rawData) {
var sortedData = _.sortBy(rawData, function(num) {
return num.date;
});
return _.map(sortedData, function(e) {
var ret = {
x: e.date,
y: e.sum
};
return ret;
});
}
var init = function() {
if (data.title) {
$('h2', el).text(data.title);
}
if ($('.graph', el).hasClass('rickshaw_graph')) {
$('.graph', el).empty();
}
if (!data.series.length) {
console.error('There is no results to paint the chart');
return;
}
// paint chart
var width = el.width() - 50;
var height = el.closest('li').height() - 80;
paintChart(width, height, data.series, data.color || 'yellow');
// paint min max dash
paintMinMax(data.series);
// paint time marks
paintTimeMark(width, height, data.startDate, data.endDate, data.timeMarks);
}();
}
};