&​nbsp; in a Series name among other things breaks the SVG

• Implement this http://bost.ocks.org/mike/chart/
• Remove the configuration object
• Provide a helper method that parses a configuration object into the more D3esque notation

Allow for a series to be colored by whether the bar is positive or negative

Using the sample apple/orange juiciness data: if you change one value to a value larger than the chart lines (e.g., a y-value of 2.5 to 55), the chart should scale rather than show a line go waaaay up off the top of the chart and then zoooom back down.

Seems like there's no way to invert the axis and plots for sets where incrementing datapoints don't make sense.

When constructing horizontal bars with outlier data, the text for largest items gets cut off. See the following graph:

The README.md tells user to run SimpleHTTPServer in python. This seems like an unnecessary step and might block novice users.

Just download Chartbuilder and open in any browser. Works just fine in Firefox, Safari, Chrome (on Mac).

It needs to work in a browser too

https://twitter.com/ChrisSpurlock/status/362256699656114176

The ChartBuilder version hosted at http://quartz.github.io/Chartbuilder/ at the moment throws two different warnings on load in IE 10 on Windows 7:

HTML1521: Unexpected </body> or end of file. All open elements should be closed before the end of the document. 
Chartbuilder, line 188 character 2

SCRIPT5007: Unable to get property 'axis' of undefined or null reference 
gneisschart.js, line 910 character 8

In the latter, the value of 'd3.select(this.parentElement).data()[0]' is undefined.

What happens is this:

• You press the "Create Image of Chart" button.
• Two links appear bellow it. They say "Download Image of Chart" and "Download SVG of Chart".
• After clicking either of it the links disappear but the word "or" that used to appear between the links remains bellow it.
• After clicking the button again the word will appear and desperate but the links are forever gone.

I'm going to explore this problem and see if I can fix it.

Related a bit to this pull request:
#43

It makes sense to pull the Gneiss chart library out of this application as I (assume) it can stand alone. This will allow de-coupled development to happen and for that library to be used in other places. Also it allows for more detailed documentation on that library to exist in its own place.

Once this repo has been bower-ized, it'll be easy to manage the dependency.

If you start a new repo for Gneiss, I can make a pull request to make everything happen.

If the information inserted in the CSV box is not well formated the program raises a few errors. Beyond those errors the program no longer works properly, like, it doesn't draw everything like it should.

One example of this happening is the following input:

names   apples  oranges NEWCOL
juicyness   5.5 23
color   10.2    10
flavor  6.1 13
travelability   3.8 7

Note that there are four columns in the first line and only three in the other lines. This would cause the following bugs:

The graph will go on to display things like the following:

If by accident a user inserts something wrong in this box it will bug the program. I suggest that the update of the information displayed in the graphic should be done only when the data in the input box is well formated. So suppose you were to type the data directly in the input box, the graph would only update if that data is well formated.

I am going to work on a fix for this.

When dealing with large numbers in tables, users may want to input the whole number in a readable format (example: $500,000). However, the parser uses a csv format (from what I can tell) and the comma is cleaned out. A good alternative might be to use ASCII character codes (as in ,), but the system currently does not recognize them.

For bar grids only obey the given width

I have a commit that paginates the options such that chart creation feels more like a wizard. Screenshots:

Obviously style fixes are needed, but I didn't want to spend too much effort on this without getting comments from people on whether or not this is a good direction to go. What do you think?

Hello, chartbuilder seems to only work on google chrome and not on safari or other browsers for me. Is this something i did wrong or a general issue?
Thank you!

https://twitter.com/Kirkman/status/363123427105705984

time to get BBoxin

Presently Chartbuilder only looks for the word "date" in a column heading as an indication of a time series

This line https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L52
and this line https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L62
should match the set locale, or at least be configurable

On one of the data tables you offer...

Thanks for making this. It is awesome.

Error:

Uncaught TypeError: Cannot call method 'indexOf' of null chartbuilder.js:161

Primarily to that the code isn't duplicated in the first and non-first drawing functions

Take advantage of the application cache to let anyone who's visited a Chartbuilder instance to load it up without an internet connection

Still learning the art of javascript, but it seems like the transform being applied to legend items for displacement applies almost the same transform to all legendGroup items > 0. The result is multiple items over laying in legend area.

From what I've been able to deduce, the problem lies in this section of code in gneiss chart.js. Wish I could do more than report it.

When using the following data set with 0s for y-values:

Week Number Person X Person Y
1 32.25 6
2 40 0
3 40 36
4 40 30
5 42 15
6 40.5 13
7 40 10
8 41 0
9 42.5 0
10 48 25.5
11 43.25 35
12 40.25 22.5
13 40.25 36
14 46.5 37.5
15 46.25 29
16 45 33.5
17 56 30.25
18 49.25 33.5
19 51 0
20 52.25 37.5
21 40 0
22 45.5 37
23 44.25 40
24 42.5 41.75
25 42.75 38.5
26 42.25 37.75
27 44 38
28 43.75 36.25
29 48 35.75
30 42.75 36
31 0 4.75

I get a graph that looks like:

But when I change the 0 values to non-zero:

Row Labels Person X Person Y
1 32.25 6
2 40 1
3 40 36
4 40 30
5 42 15
6 40.5 13
7 40 10
8 41 1
9 42.5 1
10 48 25.5
11 43.25 35
12 40.25 22.5
13 40.25 36
14 46.5 37.5
15 46.25 29
16 45 33.5
17 56 30.25
18 49.25 33.5
19 51 1
20 52.25 37.5
21 40 1
22 45.5 37
23 44.25 40
24 42.5 41.75
25 42.75 38.5
26 42.25 37.75
27 44 38
28 43.75 36.25
29 48 35.75
30 42.75 36
31 1 4.75

The graph looks like it should:

It appears that the 0 values are being interpreted as an x-value and not a y-value. Changing a single 0 value to a non-0 value will move the point from x=0 to the appropriate x-value.

By that I mean if you change on the data point values to 0 (using the suggested data of apple/orange juiciness) the lines don't graph to the x- or y-axis, but are discontinuous.

Given a list of dates we could probably figure this out pretty easily and reliably.

It should guess that a list of XX/01/YYYY is US dates and a list of 01/XX/YYYY or (31/XX/YYYY) is a list of EU dates

The cases we could never truly guess are date range that is wholly in the first 12 days of the month, or a range with monthly periodicity (e.g. Jan 1, Feb 1, Mar 1) in the first 12 days of the month. In these cases it should fall back to the specified locale

First of all, thank you from the bottom of my heart for sharing this tool with the world. I'm not an expert by any means, but I know just enough to help my media company customize and deploy Chartbuilder, which we've already done.

My recommendation: Provide an easy way to clear out the "previously created charts" list. I can see it becoming pretty lengthy, pretty quickly. It occurs to me that a "simple" solution might, in fact, be impossible -- since there's no login, I suppose any button to clear that list would be available to anyone, which means you might have some charts unexpectedly cleared. Anyway, thinking aloud here...

For my own knowledge, if anyone out there is willing to help a noob: Assuming you can't clear the list from the interface, is there a way that I (or someone else in my company with a little more expertise) can remove the charts that have already been stored? We've got a ton of test charts piling up in there.

Again, awesome work, and I can't wait to see what improvements everyone is able to make to the code.

Charting intraday stock price data displays on a default time scale, days with no trading should be compressed in certain circumstances.

It would be great to be able to use this tool within After Effects, with split layers.

In order to do this currently, I have to import the SVG into Illustrator, split the groups into individual layers, and then save as an .AI file. If it was possible to export each graph element as a separate image (either PNG or SVG), then I would be able to add them to AE more easily.

Separate layers would be needed in order to add animations, grow bars, etc..

If i add custom fonts the export function breaks in Chrome 28. The error I get is:

Uncaught TypeError: Array.prototype.slice called on null or undefined d3.v2.min.js:1
n d3.v2.min.js:1
d3.selectAll d3.v2.min.js:2
ChartBuilder.inlineAllStyles chartbuilder.js:235
(anonymous function) chartbuilder.js:720
v.event.dispatch jquery.min.js:2
o.handle.u

The error is also thrown during the loading of the page, but the graph shows up fine.

Fix: You should not insert your @font-face decleration in gneisschart.css but in chartbuilder.css then everything works flawlessly. Made a good point to enter into the readme or into the documentation

Has discussed in #54, it is important to give the user the notion that the inputted data is valid or invalid.

Being valid means that the inputted data must be well formatted, that means that the number of columns in the CSV input must be the same for every row. It also means that there must be at least two columns and two rows, because that is the minimum amount of information required to make a graph. Example:

names   Col
Row 10

As of the push request in #54 the behaviour is the following:

• Update if there is an alteration in the input box and the data in said input box is valid.
• Otherwise, just down update.

There are the following suggestion made in #54:

• If the data is invalid the graph will not display anything. It will only display if the information is valid.
• There is a label somewhere in the interface that says if the currently inputted data is valid and, therefore, if the graph corresponds to that data.

So, how will we do this?

My initial impression of ChartBuilder was that it is a deployable application for news organizations (or whoever) that can be customized so that reporters (or other non-technical folks) can easily create charts with design attributes that are consistent with the organization.

Specifically, this means that the actual code and deployment is aimed at developers or system administrators at a news organizations, while the end user of the deployed application are reports/non-technicals.

If this is the case, I would propose changing around a few things and ensuring that the right audience is addressed.

The README should be focused on:

• Short description of what the deployed application does -- make great charts.
• How to install and deploy. This is actually pretty simple, and with Github pages, you don't even need your own server.
• How to customize the application for your organization and design needs. This should describe all the configuration options and how to fill in the design specs, and possibly take away interface choices.
• How to contribute and any other developer focused information.

On the flip side, there should be some generic inline help in the application itself that describes how to make a chart, aimed speaking to the people actually using the deployed application. Right now, this exists in the README where it is separated from the deployed application and it is not a place an end-user (reporter) would go to.

Let me know if this makes sense, and I can start maybe working on a pull request.