web: show points and zero/today lines on chart

This commit is contained in:
Simon Michael 2014-07-18 07:55:23 -07:00
parent 4333cae43f
commit 470835adc2
2 changed files with 89 additions and 55 deletions

View File

@ -105,55 +105,26 @@ registerChartHtml percommoditytxnreports =
<div#register-chart style="width:85%; height:150px; margin-bottom:1em; display:block;">
<script type=text/javascript>
\$(document).ready(function() {
/* render chart with flot, if visible */
var chartdiv = $('#register-chart');
if (chartdiv.is(':visible')) {
\$('#register-chart-label').text('#{charttitle}');
/* https://github.com/flot/flot/blob/master/API.md */
\$.plot(chartdiv,
[
$forall (comm,(_,items)) <- percommoditytxnreports
{
label: '#{comm}',
color: #{colorForCommodity comm},
data: [
$forall i <- reverse items
[#{dayToJsTimestamp $ triDate i}, #{triSimpleBalance i}],
[] ],
},
],
{
series: {
points: {
show: false,
},
lines: {
show: true,
steps: true,
},
bars: {
show: false,
barWidth: 10,
},
},
yaxis: {
/* mode: "time", */
/* timeformat: "%y/%m/%d", */
/* ticks: 6, */
},
xaxis: {
mode: "time",
timeformat: "%Y/%m/%d"
/* ticks: 6, */
},
}
);
}
});
//clickable: true,
//hoverable: true,
//minTickSize: 3,
//var plot = $("#placeholder").plot(data, options).data("plot");
registerChart(
chartdiv,
[
$forall (comm,(_,items)) <- percommoditytxnreports
{
data: [
$forall i <- reverse items
[#{dayToJsTimestamp $ triDate i}, #{triSimpleBalance i}],
/* [] */
],
label: '#{comm}',
color: #{colorForCommodity comm},
},
]
);
};
});
|]
where
charttitle = case maybe "" (fst.snd) $ headMay percommoditytxnreports

View File

@ -28,6 +28,69 @@ $(document).ready(function() {
});
//----------------------------------------------------------------------
// REGISTER CHART
function registerChart($container, series) {
// https://github.com/flot/flot/blob/master/API.md
return $container.plot(
series,
{ /* general chart options */
series: {
points: {
show: true,
},
lines: {
show: true,
steps: true,
},
bars: {
// show: true,
// barWidth: 1000 * 60 * 60, // ms
},
},
yaxis: {
/* mode: "time", */
/* timeformat: "%y/%m/%d", */
/* ticks: 6, */
},
xaxis: {
mode: "time",
timeformat: "%Y/%m/%d"
/* ticks: 6, */
},
grid: {
// clickable: true,
// hoverable: true,
// autoHighlight: true,
markings:
function (axes) {
// console.log(axes);
// var markings = [];
// for (var x = Math.floor(axes.xaxis.min); x < axes.xaxis.max; x += 2)
// markings.push({ xaxis: { from: x, to: x + 1 } });
// midx = Math.floor(axes.xaxis.min + (axes.xaxis.max - axes.xaxis.min) / 2);
var now = Date.now();
var markings = [
{
xaxis: { from: now, to: now },
color: '#888',
lineWidth:1
},
{
yaxis: { from: 0, to: 0 },
color: '#bb0000',
lineWidth:1
},
];
// console.log(markings);
return markings;
}
},
}
).data("plot");
}
//----------------------------------------------------------------------
// ADD FORM
@ -92,7 +155,7 @@ function addformAddPosting() {
// //$(this).find(".typeahead").typeahead();
// console.log('DOMNodeInserted');
// // infinite loop
// console.log($(this).find('.typeahead'));
// console.log($(this).find('.typeahead'));
// //enableTypeahead($(this).find('.typeahead'), accountsSuggester);
// });
// setTimeout(function (){
@ -209,14 +272,14 @@ function sidebarToggle() {
// MISC
function enableTypeahead($el, suggester) {
return $el.typeahead(
{
highlight: true
},
{
source: suggester.ttAdapter()
}
);
return $el.typeahead(
{
highlight: true
},
{
source: suggester.ttAdapter()
}
);
}
/*