Best Way to Illustrate Creating Charts based on Dynamic Data

Question

I'm developing a application that allows business users to create forms with fields such as text, select boxes, check boxes, radio buttons, numeric, etc with a easy drag-n-drop UI like:

Once the form is created, end-users fill out the form like:

and then based on that data users can search and create charts from it.

Pretty simple concept. My problem is I'm not sure what the best way to illustrate how users would create charts from this data. The charts vary from bar to pie to gauge.

I need to show how the data is constructed to create a chart. As you see here, its just flat but based on the data I could create a chart like: Average Numeric Grouped by Text. The group would be the 'y-axis' but I can't really use that as it wouldn't apply for a pie chart. The 'x-axis' would be have values like count of, average, sum, etc based on the group.

Excel accomplishes this pretty well but the overall data is already in place when you launch the chart dialog like:

I was thinking of UI like this but I'm not sure its the most clear UI:

anyone have any ideas?

Answer 1

I think it would benefit the user to be able to create the chart using a blank canvas, in a WYSIWYG format wherever possible. This way there is something tangible to think about right away, rather than having to select from potentially confusing options ("statistics"?).

On the "canvas" there are two main areas to start: the chart box and the legend. In the chart the user must first select the type of chart, and then can click each data element to modify it. In the legend, the user can add/remove new sets of data.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Once a chart type is selected, the axes areas appear and can offer some customization options.

Answer 2

Ended up going with a WYSIWYG approach like @Luke suggested but slightly different UI. See: