Dear Andy,
I've now applied the first two patches from you into SVN. I've not yet applied
the others because they would immediately change the behaviour.
However, I've tried them myself and I'm very much impressed by the obvious
increase in quality! This holds for both the on-screen display and also when
printing to PDF. From what I see here, I'm inclined to add your patches
immediately and throw out goffice, because the jqplot graphs are just so much
nicer!
For anyone to check yourself: Get latest SVN, then apply the attached patch,
and open any of the piechart or barchart reports.
By the way, what happens on a double-click? I only see the graph turns blue,
but I gues there was some meaning behind this... :-)
Am Freitag, 11. März 2011 schrieb Andy Clayton:
> Here is a list of at least some of the possible issues I am aware of:
> * The default coloring could probably be better (plus support for when
> specific colors are specified)
Yes, but it's good enough to be better than the gog colors, so it's sufficient
to replace the old one.
> * The legend needs to get out of the way of the graph
Depends on the graph and the data. Maybe it is sufficient if it were movable.
> * On bar graphs as more bars get packed in there seems to be too much
> padding compared to bar width (really small bars with lots of whitespace)
Might be, indeed.
> * On any of the bar graphs over time the x-axis labels are (to me)
> misleading. A bar labeled 01/01/2011, for example, actually represents
> the value up to the next x position, say 01/02/2011. Perhaps labeling it
> with the through date (the inclusive end date) would make more sense,
> rather than the start? Then again, maybe that is just a matter of
> preference. Or maybe I will avoid the issue entirely by simplifying the
> labels to just year, or month and year, for the simple cases.
Yes, but that's a problem with the gog graphs as well. We can throw out gog
and later come up with a fix to the labels.
> Anyways, feel free to give a try and let me know what could be different
> or better.
It looks great! Thank you very much for this contribution!
Regards,
Christian
diff --git a/src/report/report-system/html-barchart.scm b/src/report/report-system/html-barchart.scm
index 5f3ecfa..2de6d30 100644
--- a/src/report/report-system/html-barchart.scm
+++ b/src/report/report-system/html-barchart.scm
@@ -21,6 +21,8 @@
;; Boston, MA 02110-1301, USA g...@gnu.org
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+(load-from-path "html-jqplot.scm")
+
(define <html-barchart>
(make-record-type "<html-barchart>"
'(width
@@ -326,11 +328,206 @@
(col-labels (catenate-escaped-strings
(gnc:html-barchart-col-labels barchart)))
(col-colors (catenate-escaped-strings
- (gnc:html-barchart-col-colors barchart))))
+ (gnc:html-barchart-col-colors barchart)))
+ (series-data-start (lambda (series-index)
+ (push "var d")
+ (push series-index)
+ (push " = [];")))
+ (series-data-add (lambda (series-index x y)
+ (push (string-append
+ " d"
+ (number->string series-index)
+ ".push(["
+ (number->string x)
+ ", "
+ (number->string y)
+ "]);\n"))))
+ (series-data-end (lambda (series-index label)
+ (push " series.push({")
+ (push " label: \"")
+ (push label)
+ (push "\"});\n")
+ (push "data.push(d")
+ (push series-index)
+ (push ");\n")))
+ (js-include (lambda (file)
+ (push "<script language=\"javascript\" type=\"text/javascript\" src=\"")
+ (push (gnc:find-file file (gnc:config-var-value-get gnc:*doc-path*)))
+ (push "\"></script>\n")))
+ (css-include (lambda (file)
+ (push "<link rel=\"stylesheet\" type=\"text/css\" href=\"")
+ (push (gnc:find-file file (gnc:config-var-value-get gnc:*doc-path*)))
+ (push "\" />\n"))))
(if (and (list? data)
(not (null? data))
(gnc:not-all-zeros data))
- (begin
+ (begin
+ (push (gnc:html-js-include "gnucash/jqplot/jquery-1.4.2.min.js"))
+ (push (gnc:html-js-include "gnucash/jqplot/jquery.jqplot.js"))
+ (push (gnc:html-js-include "gnucash/jqplot/jqplot.barRenderer.js"))
+ (push (gnc:html-js-include "gnucash/jqplot/jqplot.categoryAxisRenderer.js"))
+ (push (gnc:html-js-include "gnucash/jqplot/jqplot.canvasTextRenderer.js"))
+ (push (gnc:html-js-include "gnucash/jqplot/jqplot.canvasAxisTickRenderer.js"))
+ (push (gnc:html-css-include "gnucash/jqplot/jquery.jqplot.css"))
+
+ (push "<div id=\"placeholder\" style=\"width:")
+ (push (gnc:html-barchart-width barchart))
+ (push "px;height:")
+ (push (gnc:html-barchart-height barchart))
+ (push "px;\"></div>")
+ (push "<script id=\"source\">\n$(function () {")
+
+ (push "var data = [];")
+ (push "var series = [];")
+
+ (if (and data (list? data))
+ (let ((rows (length data))
+ (cols 0))
+ (let loop ((col 0) (rowcnt 1))
+ (series-data-start col)
+ (if (list? (car data))
+ (begin
+ (set! cols (length (car data)))))
+ (for-each
+ (lambda (row)
+ (series-data-add col rowcnt
+ (ensure-numeric (list-ref-safe row col)))
+ (set! rowcnt (+ rowcnt 1)))
+ data)
+ (series-data-end col (list-ref-safe (gnc:html-barchart-col-labels barchart) col))
+ (if (< col (- cols 1))
+ (loop (+ 1 col) 1)))))
+
+
+ (push "var options = {
+ shadowAlpha: 0.07,
+ stackSeries: false,
+ legend: { show: true, },
+ seriesDefaults: {
+ renderer: $.jqplot.BarRenderer,
+ rendererOptions: {
+ shadowAlpha: 0.04,
+ shadowDepth: 3,
+ },
+ fillToZero: true,
+ },
+ series: series,
+ axesDefaults: {
+ },
+ grid: {
+ hoverable: true,
+ markings: function(axes) {
+ var markings = [];
+ for (var x = Math.floor(axes.xaxis.min); x < axes.xaxis.max; x += 2)
+ markings.push({ xaxis: { from: x - 0.5, to: x + 0.5 } })
+ return markings;
+ }
+ },
+ axes: {
+ xaxis: {
+ renderer: $.jqplot.CategoryAxisRenderer,
+ tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+ tickOptions: {
+ angle: -30,
+ fontSize: '10pt',
+ },
+ },
+ yaxis: {
+ autoscale: true,
+ },
+ },
+ xaxis: {
+ tickLength: 0
+ }
+ };")
+
+ (push "options.stackSeries = ")
+ (push (if (gnc:html-barchart-stacked? barchart)
+ "true;\n"
+ "false;\n"))
+
+ (if title
+ (begin
+ (push " options.title = \"")
+ (push title) (push "\";\n")))
+
+ (if subtitle
+ (begin
+ (push " options.title += \" (")
+ (push subtitle) (push ")\";\n")))
+
+ (if (and (string? x-label) (> (string-length x-label) 0))
+ (begin
+ (push " options.axes.xaxis.label = \"")
+ (push x-label)
+ (push "\";\n")))
+ (if (and (string? y-label) (> (string-length y-label) 0))
+ (begin
+ (push " options.axes.yaxis.label = \"")
+ (push y-label)
+ (push "\";\n")))
+ (if (and (string? row-labels) (> (string-length row-labels) 0))
+ (begin
+ (push " options.axes.xaxis.ticks = [")
+ (for-each (lambda (val)
+ (push "\"")
+ (push val)
+ (push "\","))
+ (gnc:html-barchart-row-labels barchart))
+ (push "];\n")))
+
+
+ (push "$.jqplot.config.enablePlugins = true;")
+ (push "var plot = $.jqplot('placeholder', data, options);
+
+ function showTooltip(x, y, contents) {
+ $('<div id=\"tooltip\">' + contents + '</div>').css( {
+ position: 'absolute',
+ display: 'none',
+ top: y + 5,
+ left: x + 5,
+ border: '1px solid #fdd',
+ padding: '2px',
+ 'background-color': '#fee',
+ opacity: 0.80
+ }).appendTo(\"body\").fadeIn(200);
+ }
+
+ var previousPoint = null;
+
+ function graphHighlightHandler(evt, seriesIndex, pointIndex, data) {
+ var item = [seriesIndex, pointIndex];
+ if (seriesIndex != undefined && pointIndex != undefined) {
+ if (previousPoint != item) {
+ previousPoint = item;
+
+ $(\"#tooltip\").remove();
+ var x = data[0].toFixed(2),
+ y = data[1].toFixed(2);
+
+ if (options.axes.xaxis.ticks[pointIndex] !== undefined)
+ x = options.axes.xaxis.ticks[pointIndex];
+
+ var offsetX = 0;//(plot.getAxes().xaxis.scale * item.series.bars.barWidth);
+ showTooltip(evt.pageX + offsetX, evt.pageY,
+ options.series[seriesIndex].label + \" of \" + x + \"<br><b>$\" + y + \"</b>\");
+ // <small>(+100.00)</small>
+ }
+ } else {
+ $(\"#tooltip\").remove();
+ previousPoint = null;
+ }
+ }
+
+ $(\"#placeholder\").bind(\"jqplotDataHighlight\", graphHighlightHandler);
+ $(\"#placeholder\").bind(\"jqplotDataUnhighlight\", graphHighlightHandler);
+
+ ")
+
+ (push "});</script>")
+
+ (gnc:msg (string-join (reverse (map (lambda (e) (if (number? e) (number->string e) e)) retval)) ""))
+
(push "<object classid=\"")(push GNC-CHART-BAR)(push "\" width=")
(push (gnc:html-barchart-width barchart))
(push " height=")
diff --git a/src/report/report-system/html-piechart.scm b/src/report/report-system/html-piechart.scm
index f77cf47..2ab237c 100644
--- a/src/report/report-system/html-piechart.scm
+++ b/src/report/report-system/html-piechart.scm
@@ -197,6 +197,52 @@
(if (and (list? data)
(not (null? data)))
(begin
+ (push (gnc:html-js-include "gnucash/jqplot/jquery-1.4.2.min.js"))
+ (push (gnc:html-js-include "gnucash/jqplot/jquery.jqplot.js"))
+ (push (gnc:html-js-include "gnucash/jqplot/jqplot.pieRenderer.js"))
+ (push (gnc:html-css-include "gnucash/jqplot/jquery.jqplot.css"))
+
+ (push "<div id=\"placeholder\" style=\"width:")
+ (push (gnc:html-piechart-width piechart))
+ (push "px;height:")
+ (push (gnc:html-piechart-height piechart))
+ (push "px;\"></div>")
+ (push "<script id=\"source\">\n$(function () {")
+
+ (push "var data = [];")
+
+ (if (and data (list? data))
+ (begin
+ (for-each
+ (lambda (datum label)
+ (push " data.push(['")
+ (push label)
+ (push "',")
+ (push datum)
+ (push "]);\n"))
+ data (gnc:html-piechart-labels piechart))))
+
+ (push "var options = {
+ seriesDefaults: {
+ renderer: $.jqplot.PieRenderer,
+ },
+ legend: { show: true, },
+ };")
+
+ (if title
+ (begin
+ (push " options.title = \"")
+ (push title) (push "\";\n")))
+ (if subtitle
+ (begin
+ (push " options.title += \" (")
+ (push subtitle) (push ")\";\n")))
+
+ (push "$.jqplot.config.enablePlugins = true;")
+ (push "var plot = $.jqplot('placeholder', [data], options);")
+ (push "});</script>")
+
+
(push "<object classid=\"")(push GNC-CHART-PIE)(push "\" width=")
(push (gnc:html-piechart-width piechart))
(push " height=")
diff --git a/src/report/report-system/html-scatter.scm b/src/report/report-system/html-scatter.scm
index d288a36..ec681af 100644
--- a/src/report/report-system/html-scatter.scm
+++ b/src/report/report-system/html-scatter.scm
@@ -24,6 +24,8 @@
;; Boston, MA 02110-1301, USA g...@gnu.org
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+(load-from-path "html-jqplot.scm")
+
(define <html-scatter>
(make-record-type "<html-scatter>"
'(width
@@ -167,7 +169,76 @@
(markercolor (string-append "#" (gnc:html-scatter-markercolor scatter))))
(if (and (list? data)
(not (null? data)))
- (begin
+ (begin
+ (push (gnc:html-js-include "gnucash/jqplot/jquery-1.4.2.min.js"))
+ (push (gnc:html-js-include "gnucash/jqplot/jquery.jqplot.js"))
+ (push (gnc:html-css-include "gnucash/jqplot/jquery.jqplot.css"))
+
+ (push "<div id=\"placeholder\" style=\"width:")
+ (push (gnc:html-scatter-width scatter))
+ (push "px;height:")
+ (push (gnc:html-scatter-height scatter))
+ (push "px;\"></div>")
+ (push "<script id=\"source\">\n$(function () {")
+
+ (push "var data = [];")
+ (push "var series = [];")
+
+ (if (and data (list? data))
+ (let ((x-data (map-in-order car data))
+ (y-data (map-in-order cadr data)))
+ (for-each (lambda (x y)
+ (push " data.push([")
+ (push (ensure-numeric x))
+ (push ", ")
+ (push (ensure-numeric y))
+ (push "]);"))
+ x-data y-data)
+ ))
+
+
+ (push "var options = {
+ legend: { show: false, },
+ series: series,
+ axesDefaults: {
+ },
+ axes: {
+ xaxis: {
+ },
+ yaxis: {
+ autoscale: true,
+ },
+ },
+ };")
+
+ (if title
+ (begin
+ (push " options.title = \"")
+ (push title) (push "\";\n")))
+
+ (if subtitle
+ (begin
+ (push " options.title += \" (")
+ (push subtitle) (push ")\";\n")))
+
+ (if (and (string? x-label) (> (string-length x-label) 0))
+ (begin
+ (push " options.axes.xaxis.label = \"")
+ (push x-label)
+ (push "\";\n")))
+ (if (and (string? y-label) (> (string-length y-label) 0))
+ (begin
+ (push " options.axes.yaxis.label = \"")
+ (push y-label)
+ (push "\";\n")))
+
+
+ (push "$.jqplot.config.enablePlugins = true;")
+ (push "var plot = $.jqplot('placeholder', [data], options);")
+
+ (push "});</script>")
+
+
(push "<object classid=\"")(push GNC-CHART-SCATTER)(push "\" width=")
(push (gnc:html-scatter-width scatter))
(push " height=")
_______________________________________________
gnucash-devel mailing list
gnucash-devel@gnucash.org
https://lists.gnucash.org/mailman/listinfo/gnucash-devel
