Skip to content

Commit

Permalink
categorical x axis
Browse files Browse the repository at this point in the history
  • Loading branch information
@yanofsky
yanofsky committed May 22, 2013
1 parent 3a46154 commit a952c8f
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 56 deletions.
9 changes: 9 additions & 0 deletions .htaccess
View file
@@ -0,0 +1,9 @@
<filesMatch ".(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</FilesMatch>
18 changes: 12 additions & 6 deletions chartbuilder.js
View file
Expand Up @@ -63,13 +63,16 @@ ChartBuilder = {
parseFunc = this.dateAll
//this.config.dateseries = true;
}
else if (i == 0) {
parseFunc = this.doNothing
}
else {
//this.config.dateseries = false;
parseFunc = this.floatAll
}

d.push({
"name": a[i].shift(),
"name": a[i].shift().split("..").join("\n"),
"data":parseFunc(a[i]),
});

Expand Down Expand Up @@ -158,6 +161,9 @@ ChartBuilder = {
};
return a
},
doNothing: function(a) {
return a
},
inlineAllStyles: function() {

d3.selectAll("#interactiveContent svg .axis line")
Expand Down Expand Up @@ -290,7 +296,7 @@ ChartBuilder = {
xAxis: xAxisObj,
yAxis: yAxisObj,
series: q.series,
dateRef: q.dateRef,
xAxisRef: q.xAxisRef,
sourceline: q.sourceline,
creditline: q.creditline
}
Expand Down Expand Up @@ -365,15 +371,15 @@ $(document).ready(function() {
var newData = ChartBuilder.getNewData()

if(newData.datetime) {
chart.q.series.unshift(chart.q.dateRef)
chart.q.series.unshift(chart.q.xAxisRef)
newData = ChartBuilder.mergeData(newData)
chart.q.dateRef = [newData.data.shift()]
chart.q.xAxis.type = "date";
}
else {
newData = ChartBuilder.mergeData(newData)
chart.q.xAxis.type = "linear";
chart.q.xAxis.type = "ordinal";
}
chart.q.xAxisRef = [newData.data.shift()]



Expand Down Expand Up @@ -487,4 +493,4 @@ $(document).ready(function() {
//
// }
//
//};
//};
4 changes: 3 additions & 1 deletion css/specific.css
View file
Expand Up @@ -24,7 +24,8 @@ input, select {
}

body {
overflow: hidden;
overflow-y: scroll;
overflow-x: hidden;
}

h2 {
Expand Down Expand Up @@ -152,6 +153,7 @@ h2:not(:first-child) {
width: 600px;
font-family: Monaco, sans-serif;
font-size: 10px;
overflow-x: scroll;
}

#interactiveContent .hide {
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Expand Up @@ -76,7 +76,7 @@ <h2>Chart Options</h2>


<label for="credit">Credit</label><input id="creditLine" type="text" name="credit" value="Quartz | qz.com">
<label for="source">Source</label><input id="sourceLine" type="text" name="source" value="">
<label for="source">Source</label><input id="sourceLine" type="text" name="source" value="Data: ">
<label for="x_axis_tick_num">Number of X Axis Ticks</label><select name="x_axis_tick_num" id="x_axis_tick_num" size="1">
<option>2</option>
<option>3</option>
Expand Down
103 changes: 55 additions & 48 deletions quartzchart.js
View file
Expand Up @@ -49,31 +49,31 @@ var chartConfig = {
],
series: [
{
name: "Enter something new",
data: [49.78, 49.32, 49.56, 50.01, 49.76, 49.54, 49.54, 49.82, 50.23, 50.11, 49.62, 49.86, 50.16, 50.14, 49.49, 50.04, 48.97, 49.2, 48.59, 47.79, 47.11],
name: "names",
data: ["juicyness","color","flavor","travelability"],
source: "Some Org",
type: "line",
axis: 0,
color: null
},
{
name: "Fake data",
data: [49.31, 48.91, 49.53, 50.18, 50.67, 50.62, 50.53, 50.33, 50.19, 49.85, 49.63, 49.15, 49.36, 48.81, 49.2, 47.27, 47.23, 49.31, 48.91, 49.53, 50.18],
name: "apples",
data: [5.5,10.2,6.1,3.8],
source: "Some Org",
type: "column",
axis: 0,
color: null
},
{
name: "This data seems real",
data: [49.31, 48.91, 49.53, 50.18, 50.67, 50.62, 50.53, 50.33, 50.19, 49.85, 49.63, 49.15, 49.36, 48.81, 49.2, 47.27, 47.23, 50.62, 50.53, 50.33, 50.19],
name: "oranges",
data: [23,10,13,7],
source: "Some Org",
type: "column",
axis: 0,
color: null
}
],
dateRef: [
xAxisRef: [
{
data: []
}
Expand Down Expand Up @@ -254,27 +254,27 @@ var QuartzCharts = {

//calculate extremes of axis
if(q.xAxis.type == "date") {
dateExtent = d3.extent(q.dateRef[0].data);
dateExtent = d3.extent(q.xAxisRef[0].data);
q.xAxis.scale = d3.time.scale()
//.domain(QuartzCharts.multiextent(q.series,function(d){return d.data}))
.domain(dateExtent)

//calculate smallest gap between two dates
for (var i = q.dateRef[0].data.length - 2; i >= 0; i--){
shortestPeriod = Math.min(shortestPeriod, Math.abs(q.dateRef[0].data[i] - q.dateRef[0].data[i+1]))
for (var i = q.xAxisRef[0].data.length - 2; i >= 0; i--){
shortestPeriod = Math.min(shortestPeriod, Math.abs(q.xAxisRef[0].data[i] - q.xAxisRef[0].data[i+1]))
}

q.maxLength = Math.abs(Math.floor((dateExtent[0] - dateExtent[1]) / shortestPeriod))
}
else {

//calculate longest series
//calculate longest series and store series names
var maxLength = 0;
for (var i = q.series.length - 1; i >= 0; i--){
maxLength = Math.max(maxLength, q.series[i].data.length)
};
q.xAxis.scale = d3.scale.linear()
.domain([0,maxLength-1])
q.xAxis.scale = d3.scale.ordinal()
.domain(q.xAxisRef[0].data)

q.maxLength = maxLength;
}
Expand All @@ -285,14 +285,14 @@ var QuartzCharts = {

//calculate extremes of axis
if(q.xAxis.type == "date") {
dateExtent = d3.extent(q.dateRef[0].data);
dateExtent = d3.extent(q.xAxisRef[0].data);
q.xAxis.scale = d3.time.scale()
//.domain(QuartzCharts.multiextent(q.series,function(d){return d.data}))
.domain(dateExtent)

//calculate smallest gap between two dates
for (var i = q.dateRef[0].data.length - 2; i >= 0; i--){
shortestPeriod = Math.min(shortestPeriod, Math.abs(q.dateRef[0].data[i] - q.dateRef[0].data[i+1]))
for (var i = q.xAxisRef[0].data.length - 2; i >= 0; i--){
shortestPeriod = Math.min(shortestPeriod, Math.abs(q.xAxisRef[0].data[i] - q.xAxisRef[0].data[i+1]))
}

q.maxLength = Math.abs(Math.floor((dateExtent[0] - dateExtent[1]) / shortestPeriod))
Expand All @@ -304,20 +304,32 @@ var QuartzCharts = {
for (var i = q.series.length - 1; i >= 0; i--){
maxLength = Math.max(maxLength, q.series[i].data.length)
};
q.xAxis.scale.domain([0,maxLength-1])
q.xAxis.scale.domain(q.xAxisRef[0].data)

q.maxLength = maxLength;
}
}

var rangeArray = []
//set the range of the x axis
if (q.xAxis.hasColumns) {
q.xAxis.scale.range([q.padding.left + this.q.columnGroupWidth/2,q.width - q.padding.right - (10* (Math.round(this.q.yAxis[0].domain[1]*3/4*100) + "").length )])
rangeArray = [
q.padding.left + this.q.columnGroupWidth/2,
q.width - q.padding.right - this.q.columnGroupWidth
]
//q.xAxis.scale.range([q.padding.left + this.q.columnGroupWidth/2,q.width - q.padding.right - (10* (Math.round(this.q.yAxis[0].domain[1]*3/4*100) + "").length )])
}
else {
q.xAxis.scale.range([q.padding.left,q.width - q.padding.right])
rangeArray = [q.padding.left,q.width - q.padding.right]
//q.xAxis.scale.range([q.padding.left,q.width - q.padding.right])
};

if(q.xAxis.type == "date") {
q.xAxis.scale.range(rangeArray);
}
else {
q.xAxis.scale.rangePoints(rangeArray);
}

this.q = q;

},
Expand All @@ -327,23 +339,23 @@ var QuartzCharts = {
for (var i = q.yAxis.length - 1; i >= 0; i--){
q.yAxis[i].line = d3.svg.line();
q.yAxis[i].line.y(function(d,j){return q.yAxis[yAxisIndex].scale(d)})
if(q.xAxis.type == "date") {
q.yAxis[i].line.x(function(d,j){return q.xAxis.scale(QuartzCharts.dateRef[0].data[j])})
}
else {
q.yAxis[i].line.x(function(d,j){return q.xAxis.scale(j)})
}
// if(q.xAxis.type == "date") {
q.yAxis[i].line.x(function(d,j){return q.xAxis.scale(q.xAxisRef[0].data[j])})
// }
// else {
// q.yAxis[i].line.x(function(d,j){return q.xAxis.scale(j)})
// }
};
}
else {
for (var i = q.yAxis.length - 1; i >= 0; i--){
q.yAxis[i].line.y(function(d,j){return q.yAxis[yAxisIndex].scale(d)})
if(q.xAxis.type == "date") {
q.yAxis[i].line.x(function(d,j){return q.xAxis.scale(QuartzCharts.q.dateRef[0].data[j])})
}
else {
q.yAxis[i].line.x(function(d,j){return q.xAxis.scale(j)})
}
//if(q.xAxis.type == "date") {
q.yAxis[i].line.x(function(d,j){return q.xAxis.scale(q.xAxisRef[0].data[j])})
// }
// else {
// q.yAxis[i].line.x(function(d,j){return q.xAxis.scale(j)})
// }
};
}
this.q = q
Expand Down Expand Up @@ -538,7 +550,7 @@ var QuartzCharts = {
q.xAxis.axis.ticks(d3.time.years,1)
break;
}
}
}

q.chart.append("g")
.attr("class",'axis')
Expand All @@ -550,7 +562,7 @@ var QuartzCharts = {
}
else {
q.xAxis.axis.scale(q.xAxis.scale)
.tickFormat(q.xAxis.formatter ? this.dateParsers[q.xAxis.formatter] : function(d) {return d})
.tickFormat(q.xAxis.formatter ? this.dateParsers[q.xAxis.formatter] : function(d) {return d + "hello"})
.ticks(q.xAxis.ticks)

if(q.xAxis.type == "date") {
Expand Down Expand Up @@ -669,10 +681,10 @@ var QuartzCharts = {
.append("rect")
.attr("width",columnWidth)
.attr("height", function(d,i) {yAxisIndex = 0; return Math.abs(q.yAxis[yAxisIndex].scale(d)-q.yAxis[yAxisIndex].scale(QuartzCharts.helper.columnXandHeight(d,q.yAxis[yAxisIndex])))})
.attr("x",q.xAxis.type =="date" ?
function(d,i) {return q.xAxis.scale(QuartzCharts.q.dateRef[0].data[i]) - columnWidth/2}:
function(d,i) {return q.xAxis.scale(i) - columnWidth/2}
)
.attr("x", function(d,i) {
console.log(q.xAxis.scale.domain())
return q.xAxis.scale(q.xAxisRef[0].data[i]) - columnWidth/2
})
.attr("y",function(d,i) {yAxisIndex = 0; return (q.yAxis[yAxisIndex].scale(d)-q.yAxis[yAxisIndex].scale(QuartzCharts.helper.columnXandHeight(d,q.yAxis[yAxisIndex]))) >= 0 ? q.yAxis[yAxisIndex].scale(QuartzCharts.helper.columnXandHeight(d,q.yAxis[yAxisIndex])) : q.yAxis[yAxisIndex].scale(d)})


Expand Down Expand Up @@ -704,9 +716,7 @@ var QuartzCharts = {
.attr("r",4)
.attr("transform",function(d,i){
yAxisIndex = 0;
return "translate("+(q.xAxis.type=="date" ?
q.xAxis.scale(QuartzCharts.q.dateRef[0].data[i]):
q.xAxis.scale(i)) + "," + q.yAxis[yAxisIndex].scale(d) + ")"
return "translate("+ q.xAxis.scale(QuartzCharts.q.xAxisRef[0].data[i]) + ")"
})
}
else {
Expand Down Expand Up @@ -741,18 +751,15 @@ var QuartzCharts = {
.append("rect")
.attr("width",columnWidth)
.attr("height", function(d,i) {yAxisIndex = 0; return Math.abs(q.yAxis[yAxisIndex].scale(d)-q.yAxis[yAxisIndex].scale(QuartzCharts.helper.columnXandHeight(d,q.yAxis[yAxisIndex])))})
.attr("x",q.xAxis.type =="date" ?
function(d,i) {return q.xAxis.scale(QuartzCharts.q.dateRef[0].data[i]) - columnWidth/2}:
function(d,i) {return q.xAxis.scale(i) - columnWidth/2}
)
.attr("x",function(d,i) {return q.xAxis.scale(QuartzCharts.q.xAxisRef[0].data[i]) - columnWidth/2})
.attr("y",function(d,i) {yAxisIndex = 0; return (q.yAxis[yAxisIndex].scale(d)-q.yAxis[yAxisIndex].scale(QuartzCharts.helper.columnXandHeight(d,q.yAxis[yAxisIndex]))) >= 0 ? q.yAxis[yAxisIndex].scale(QuartzCharts.helper.columnXandHeight(d,q.yAxis[yAxisIndex])) : q.yAxis[yAxisIndex].scale(d)})

columnRects.transition()
.duration(500)
.attr("width",columnWidth)
.attr("height", function(d,i) {yAxisIndex = 0; return Math.abs(q.yAxis[yAxisIndex].scale(d)-q.yAxis[yAxisIndex].scale(QuartzCharts.helper.columnXandHeight(d,q.yAxis[yAxisIndex])))})
.attr("x",q.xAxis.type =="date" ?
function(d,i) {return q.xAxis.scale(QuartzCharts.q.dateRef[0].data[i]) - columnWidth/2}:
function(d,i) {return q.xAxis.scale(QuartzCharts.q.xAxisRef[0].data[i]) - columnWidth/2}:
function(d,i) {return q.xAxis.scale(i) - columnWidth/2}
)
.attr("y",function(d,i) {yAxisIndex = 0; return (q.yAxis[yAxisIndex].scale(d)-q.yAxis[yAxisIndex].scale(QuartzCharts.helper.columnXandHeight(d,q.yAxis[yAxisIndex]))) >= 0 ? q.yAxis[yAxisIndex].scale(QuartzCharts.helper.columnXandHeight(d,q.yAxis[yAxisIndex])) : q.yAxis[yAxisIndex].scale(d)})
Expand Down Expand Up @@ -805,7 +812,7 @@ var QuartzCharts = {
.attr("transform",function(d,i){
yAxisIndex = 0;
return "translate("+(q.xAxis.type=="date" ?
q.xAxis.scale(QuartzCharts.q.dateRef[0].data[i]):
q.xAxis.scale(QuartzCharts.q.xAxisRef[0].data[i]):
q.xAxis.scale(i)) + "," + q.yAxis[yAxisIndex].scale(d) + ")"
})

Expand All @@ -814,7 +821,7 @@ var QuartzCharts = {
.attr("transform",function(d,i){
yAxisIndex = 0;
return "translate("+(q.xAxis.type=="date" ?
q.xAxis.scale(QuartzCharts.q.dateRef[0].data[i]):
q.xAxis.scale(QuartzCharts.q.xAxisRef[0].data[i]):
q.xAxis.scale(i)) + "," + q.yAxis[yAxisIndex].scale(d) + ")"
})

Expand Down

0 comments on commit a952c8f

Please sign in to comment.