d3.json('data/float.json', function(data) {
data = MG.convert.date(data, 'date');
MG.data_graphic({
title: "Changing Precision 1",
description: "We can change the precision if the axis data type is a float. We can also change both the formatting, or hide the rollover text altogether. Here we set decimals: 3 to get three decimals in the rollover for percentages.",
data: data,
decimals: 3,
width: 600,
height: 200,
right: 40,
xax_count: 4,
target: '#precision1'
});
MG.data_graphic({
title: "Custom Rollover Text",
description: "Here is an example of changing the rollover text. You could in theory actually update any DOM element with the data from that rollover - a title, for instance.",
data: data,
width: 600,
height: 200,
right: 40,
xax_count: 4,
mouseover: function(d, i) {
// custom format the rollover text, show days
var prefix = d3.formatPrefix(d.value);
d3.select('#custom-rollover svg .mg-active-datapoint')
.text('Day ' + (i + 1) + ' ' + prefix.scale(d.value).toFixed(2) + prefix.symbol);
},
target: '#custom-rollover'
});
});
d3.json('data/some_percentage.json', function(data) {
for (var i = 0; i < data.length; i++) {
data[i] = MG.convert.date(data[i], 'date');
}
MG.data_graphic({
title: "Changing Precision 2",
description: "Here we set decimals: 0 for percentages.",
data: data,
decimals: 0,
format: 'percentage',
width: 600,
height: 200,
right: 40,
xax_count: 4,
target: '#precision2'
});
MG.data_graphic({
title: "... Or No Rollover Text",
description: "By setting show_rollover_text: false, you can hide the default rollover text from even appearing. This, coupled with the custom callback, gives a lot of interesting options for controlling rollovers.",
data: data,
decimals: 0,
show_rollover_text: false,
format: 'percentage',
width: 600,
height: 200,
right: 40,
xax_count: 4,
target: '#no-rollover-text'
});
});