Quartz / Chartbuilder

A front-end charting application that facilitates easy creation of simple beautiful charts
http://quartz.github.io/Chartbuilder
MIT License
2.1k stars 354 forks source link

Few quick formatting questions #140

Closed ghost closed 9 years ago

ghost commented 9 years ago

Hi, Know you're bringing out version two any minute but wanted to just fix up some current formatting.

  1. I wanted to get rid of the little ticks above the x-axis numbers and have vertical dotted lines instead (see terrible mockup below)

screenshot_5

  1. How do I adjust the distance between the top heading and the first horizontal line of the graph?

Thanks.

yanofsky commented 9 years ago

Here's a diff of what you'd need to change to get something like that

diff --git a/css/gneisschart.css b/css/gneisschart.css
index b1bfd37..51a7248 100644
--- a/css/gneisschart.css
+++ b/css/gneisschart.css
@@ -29,6 +29,7 @@ svg .axis g.zero line {

 svg #xAxis line {
        stroke: #e6e6e6;
+       stroke-dasharray: 5,5;
 }

 svg #xAxis{
diff --git a/js/gneisschart.js b/js/gneisschart.js
index afb55d7..4ce0fca 100644
--- a/js/gneisschart.js
+++ b/js/gneisschart.js
@@ -1174,7 +1174,8 @@ function Gneiss(config)
                                .scale(g.xAxis().scale)
                                .orient(g.isBargrid() ? "left" : "bottom")
                                .tickFormat(g.xAxis().formatter ? Gneiss.dateParsers[g.xAxis().formatter] : function(d) {return d;})
-                               .ticks(g.xAxis().ticks);
+                               .ticks(g.xAxis().ticks)
+                               .tickSize(g.height() - g.padding().top - g.padding().bottom - g.xAxisMargin())

                                if(g.xAxis().type == "date") {
                                        if(g.xAxis().ticks === null || !isNaN(g.xAxis().ticks)) {
@@ -1265,11 +1266,11 @@ function Gneiss(config)
                                                throw new Error("xAxis.ticks set to invalid date format");
                                        }
                                }
-
+
                        g.chartElement().append("g")
                                .attr("class",'axis')
                                .attr("id","xAxis")
-                               .attr("transform",g.isBargrid() ? "translate(" + g.padding().left + ",0)" : "translate(0," + (g.height() - g.padding().bottom + g.xAxisMargin()) + ")")
+                               .attr("transform",g.isBargrid() ? "translate(" + g.padding().left + ",0)" : "translate(0," + (g.padding().bottom + g.xAxisMargin()) + ")")
                                .call(g.xAxis().axis);
                }
                else {
@@ -1379,7 +1380,7 @@ function Gneiss(config)
                        }

                        g.chartElement().selectAll("#xAxis")
-                               .attr("transform",g.isBargrid() ? "translate(" + g.padding().left + ",0)" : "translate(0," + (g.height() - g.padding().bottom + g.xAxisMargin()) + ")")
+                               .attr("transform",g.isBargrid() ? "translate(" + g.padding().left + ",0)" : "translate(0," + (g.padding().top) + ")")
                                .call(g.xAxis().axis);
                }