JavaScript
$(function () {
var goal = 2200;
var toTimestamp = function(Y,m,d) {
return (new Date(Y,m,d)).getTime();;
};
var percFormatter = function(val, axis) {
return (val / goal * 100).toFixed() + '%';
// you need to devide be the goal
}
var moneyFormatter = function (val, axis) {
return val + "$";
};
var options = {
grid: {
show: true,
hoverable: true,
borderWidth: 0,
tickColor: "rgba(255, 255, 255, 0)",
},
xaxis: {
mode: 'time',
timezone: 'browser',
timeformat: "%d/%m",
},
yaxes: [
{
min: 0,
tickFormatter: moneyFormatter
},
]
};
var series = {
money: {
color: '#57A4F4',
data: [
[toTimestamp(2012,8,1), 10],
[toTimestamp(2012,8,2), 240],
[toTimestamp(2012,8,3), 502],
[toTimestamp(2012,8,4), 904],
[toTimestamp(2012,8,5), 400],
[toTimestamp(2012,8,8), 20]
],
lines: {
show: true
},
points: {
show: true
},
label: 'Money'
},
bars: {
color: '#000000',
data: [
[toTimestamp(2012,7,30), 100],
[toTimestamp(2012,8,2), 20],
[toTimestamp(2012,8,3), 50],
],
bars: {
show: true,
lineWidth: 20
},
label: 'Bar'
},
goal: {
color: 'red',
data: [
[toTimestamp(2012,7,28), 200 ],
[toTimestamp(2012,8,1), 300 ],
[toTimestamp(2012,8,12), 100 ]
],
label: 'Goal',
shadowSize: 0,
...