Chart Type
  • help

    Chart Type

    This allows you to select one of the available chart layouts. Each layout type will have one or more variations. This can be changed from the select box that appears once the primary layout has been chosen.

    help for the pie chart

    help for the pack chart

    help for the sunburst chart

    help for the force chart

    help for the area chart

    help for the bar chart

    help for the chord chart

  • help

    Pack Charts

    Pack charts lay out data in clusters. There are two types of Pack charts.

    1. Standard Pack layout - each level of the data is clustered together.
    2. Pack layout - these charts flatten the data. Each data set group is represented by a different color.

    The Pack layout takes only ordinal data sets that are nested in nature.

Chart Size
  • help

    Chart Height

    Sets the height of the chart. This number incorporates any padding that is added to the chart.

    This number is a measurement in pixels.

    The height of the Force chart. The center position of the chart will fall exactly halfway of this setting. Note: The data size and the force setting on the chart wil define the extent of the height of this chart.

    The height of the Area chart. The Y-axis is determined by this value minus the padding.

    The height of the Bar chart. The Y-axis is determined by this value minus the padding.

    The height of the Chord chart. The radius of the chart is determined by the height minus the padding

  • help

    Chart Width

    Sets the height of the chart. This number incorporates any padding that is added to the chart.

    This number is a measurement in pixels.

    The width of the Force chart. The center position of the chart will fall exactly halfway of this setting. Note: The data size and the force setting on the chart wil define the extent of the width of this chart.

    The width of the Area chart. The X-axis is determined by this value minus the padding.

    The width of the Bar chart. The X-axis is determined by this value minus the padding.

    The width of the Chord chart. The radius of the chart is determined by the width minus the padding

  • help

    Chart Outer Radius

    For circular charts such as the pie and sunburst layouts, this is the radius of the outer ring of the chart.

    This number is a measurement in pixels.

    The Pie chart outer radius is the full extent of the chart. The labels exist outside of this measurement.

    The Pack chart outer radius is the full extent of the chart. For the regular "nested" chart this represents the radius of the outermost circle on the chart. For the Flat (or bubble) chart. This value represents the bounding space that the data fits into.

    This is the setting for the chart size and the data on it. Due to the nature of this chart, the padding setting is inert and will not affect this setting.

    The Sunburst chart outer radius is the full extent of the chart.

    The outer radius has no affect on the Force chart.

    The outer radius has no affect on the Area chart.

    The outer radius has no affect on the Bar chart.

    The outer radius has no affect on the Chord chart.

  • help

    Chart Inner Radius help

    For charts that have an inner radius, this is the size in pixels of that radius.

    The pie chart can be turned into a donut chart by setting this attribute.

    The Pie chart inner radius measures the gap in the middle of the chart. 0 is a perfect pie chart, Any positive number makes this chart a donut.

    The Pack chart does not use the inner radius property.

    The Sunburst chart inner radius does not do anything. The area in the middle of the chart is determined by the structure of the data.

    The inner radius has no affect on the Force chart.

    The inner radius has no affect on the Area chart.

    The inner radius has no affect on the Bar chart.

    The inner radius on the Chord chart adjusts the spaces between the arc groups. The recommended values are between 0 and 10. 100 is the maximum value.

  • help

    Chart Padding

    This is the padding space between the edges of the chart. This attribute helps create free space around the edges of the chart.

    For the Pie chart the padding will push the radius smaller if the outer-radius plus padding is larger than either the width or height setting.

    This has no affect on the Pack chart. To set the spacing between the data points, use the data spacing attribute in the chart theme tab.

    The Sunburst chart padding has no effect (Although this may be implemented in a future release.).

    The padding has no affect on the Force chart. The extent of the chart in relation to the width and height are determined by the data set and the force between each of the chart nodes.

    The Area chart padding will determine the space between the chart and the outer edge.

    The Bar chart padding will determine the space between the chart and the outer edge.

    The Chord chart padding will determine the space between the chart and the outer edge.

Chart Colors
  • help

    Color Scheme

    There are a number of pre-set color schemes defined. These color schemes color the data and chart components. A pre-set color scheme can be modified, or you can create your own one from scratch.

    To customise a color scheme, you can add or remove colour blocks, or simply re-define the palette size. The colors that are represented in the scheme are represented by the tiles at the bottom of this panel. To change a tiles colour, click on it and select a colour from the colour picker.

    The color scheme on a Pie chart controls the data segments or wedges of the chart.

    The "Nested" Pack chart uses only the first two colours in the scheme. The first is the background of the data groups, and the second the background of the data points.

    The "Flat" Pack chart uses each colour in the scheme to represent the data of each group. The colours relate to the first level of data.

    The Sunburst chart colour scheme represents each group in the data set. Each child data set that does not have any children of it's own will also inherit the same colur as it's parent.

    The Force chart colour scheme uses only the first 4 values of the palette. These are:

    1. The colour of the "group" nodes.
    2. The colour of the "group" node when collapsed.
    3. The colour of the data nodes.
    4. The colour of the "branches" on the tree.

    The Area chart colour scheme uses only the first 3 values of the palette. These are:

    1. The colour of the are underneath the data points.
    2. The colour of the line that connects the data points on the graph and the border colour of each of the data point circles.
    3. The colour of the circles that lie on each of the data points.

    (In the future this chart will suport multiple categories, and the colour scheme will represent the colour of each data group. At that point the current values of the them may be whiched out to the theme object.)

    The Bar chart colour scheme uses only the first value of the palette. (In the future this chart will suport multiple categories, and the colour scheme will represent the colour of each data group.)

    The color scheme on a Chord chart controls the data segments on the outer arc of the chart. The "chords" or inner arcs that join the edges of the circle will generally pick up the colour of the smallest data group. These "chords" have a reduced opacity from the outer arcs.

  • help

    Palette Size

    There are 5 palette sizes that you can choose from. A pre-set colour scheme has it's own set size. This option lets you restrict or expand the pre-set colour scheme's size.

    The values are: 5, 10, 15, 20 and 30.

  • help

    Add/Remove Colors

    Add or remove colours from the current color scheme. If a another pre-defined colour scheme is chosen, then the amount of colours shown below are equal to that colour scheme's native size. Adding or removing or editing colours from a new pre-set colour scheme will need to be re-done.

    If you edit a colour and then remove it from the current selection, the changed colour will still exist (but not be imported into the chart). If you click the add colour button, it will then show the old colour.

Data Options
  • help

    Data Source

    There are 3 different sources of data available.

    1. Dummy
    2. URL
    3. File Upload

    Once you have chosen your data set, click on the Update Chart Preview button to see the new data.

    Dummy data allows you to select from a list of dummy data sets so that you can start working on a chart design straight away. If Dummy data is set, then the program will select the most appropriate data for the current chart. If you wish to change to a different dummy data structure, there are a list of options in the Data Structure field.

    Pointing to a URL resouce to generate a chart from data that may exist on a 3rd party domain.

    You can also choose to uplaod data from a file from your computer. Different charts may only expect certain file types. Generally .json, .csv and .tsv files are supported.

  • help

    Data Dummy Flat

    Here you can choose from 3 different flat data sets. These data sets are ordinal and can only be chosen to be used on charts that support ordinal scales.

    This data must be ordinal on one axis for the Pie chart. It can be either "Nested" or "Flat".

    This data must be ordinal on one axis for the Pack chart. This chart must use "Nested" data.

    The Area chart only takes flat data. This can be "ordinal" or "quantitative".

    The Bar chart only takes flat data. This can be "ordinal" or "quantitative".

    help

    Data Nested

    Here you can choose from 3 different nested data sets. These data sets are ordinal and can only be chosen to be used on charts that support ordinal scales.

    Nested data on the Pie will show each level of data at a time. To explore each data category further - click on the segment and it will drill down into that category.

    This is the only dummy data allowed for the Pack chart.

    This is the only dummy data allowed for the Sunburst chart.

    This is the only dummy data allowed for the Force chart.

    help

    Data Quantitative

    Here you can choose from 3 different Quantitative data sets. These data sets consist of purely numerical value pairs and a primarily used for the Area, Bar and Line charts.

    The Area chart only takes flat data. This can be "ordinal" or "quantitative".

    The Bar chart only takes flat data. This can be "ordinal" or "quantitative".

    help

    Data Matrix

    Here you can choose from 3 different Matrix data sets. These data sets consist of a martix of values that point to each other. They can represent the relationship between many different groups. One example would be how sets of populations compare to each other.

    This is the only dummy data set allowed for the Chord chart.

  • help

    Data Url

    Add a URL to point to a data resource.

    This data set must return data that is ordinal on one axis for the Pie chart. Values can be set in the data structure field.

    This data set must return data that is ordinal on one axis for the Pack chart. Values can be set in the data structure field.

    This data set must return data that is ordinal on one axis for the Sunburst chart. Values can be set in the data structure field.

    The Area chart only takes flat data. This can be "ordinal" or "quantitative".

    The Bar chart only takes flat data. This can be "ordinal" or "quantitative".

    The Chord chart only takes data as a matrix of connected values.

  • help

    Data File

    Upload a file that contains data. Check first that the file has the correct format and data structure for the current chart.

    This data set must return data that is ordinal on one axis for the Pie chart. Values can be set in the data structure field.

    This data set must return data that is ordinal on one axis for the Pack chart. Values can be set in the data structure field.

    The Area chart only takes flat data. This can be "ordinal" or "quantitative".

    The Bar chart only takes flat data. This can be "ordinal" or "quantitative".

    The Chord chart only takes data as a matrix of connected values.

  • help

    Data Structure

    This is where you can set the data structure for the graph. Charts that use a JSON format require the data fields to be defined. The default JSON structure is as such:

    Flat example:

    {
        name : (string),
        value : (number)
    }

    Nested example:

    {
        name : (string),
        children : {
            name : (string),
            value : (number)
        }
    }

    The Pie chart uses the name field as the ordinal axis (or naming field) and the value field as the field values.

  • help

    Data Name

    This defines what atrribute in the data object takes the name of the data set. In the code example it is the value in red.

    Nested example:

    {
        name : (string),
        children : {
            name : (string),
            value : (number)
        }
    }

    The "ordinal" scale of the Pie chart.

  • help

    Data Value

    This defines what atrribute in the data object takes the value of the data set. In the code example it is the value in red.

    Nested example:

    {
        name : (string),
        children : {
            name : (string),
            value : (number)
        }
    }

    The "quntitative" scale of the Pie chart.

  • help

    Data Children

    This defines what atrribute in the data object defines the children in each layer of the data set. In the code example it is the value in red.

    Nested example:

    {
        name : (string),
        children : {
            name : (string),
            value : (number)
        }
    }
  • help

    Data Categories

    This defines the category sets that data can be classified into.

    For the scatterplot chart you the dots on the chart will be coloured according to each of the categories in the data set.

  • help

    Data X

    This defines what atrribute in the data object defines the X value of the data set. In the code example it is the value in red

    These data values are used for the Area, Bar and Scatterplot charts instead of the Name, Value and Children properties.

    JSON example:

    {
        x : (number),
        y : (number)
    }

    CSV example:

    x, y
    1, 5
    2, 8
    3, 3
    4, 12
    5, 7
  • help

    Data X

    This defines what atrribute in the data object defines the Y value of the data set. In the code example it is the value in red

    These data values are used for the Area, Bar and Scatterplot charts instead of the Name, Value and Children properties.

    JSON example:

    {
        x : (number),
        y : (number)
    }

    CSV example:

    x, y
    1, 5
    2, 8
    3, 3
    4, 12
    5, 7
  • help

    Data Scale X

    This defines the scale type on the X axis of the chart. These scales are only useful for the Area, Bar and Scatterplot charts.

  • help

    Data Scale Y

    This defines the scale type on the X axis of the chart. These scales are only useful for the Area, Bar and Scatterplot charts.

  • help

    Data Range X

    This defines the range of the data on the X axis of the chart. The default setting is auto, which will automatically select the full extent of the data.

    These scales are only useful for the Area, Bar and Scatterplot charts.

  • help

    Data Range Y

    This defines the range of the data on the Y axis of the chart. The default setting is auto, which will automatically select the full extent of the data.

    These scales are only useful for the Area, Bar and Line charts.

Chart Theme
  • help

    Theme Background Color

    The background colour of the chart.

  • help

    Theme Header Name

    A Header for the chart can be used.

    The "nested" Pie chart will display the category name in the header position when the user drills down into the data.

  • help

    Theme Header Size

    This defines the size of the header text in pixels.

  • help

    Theme Header Position

    This defines the general position of the header. The exact position can be tweaked using values in the header offset fields.

  • help

    Theme Header Offset Left

    This can be used to adjust the horizontal offset of the chart's header. Positive values will push the header to the right. Negative values will push the header to the left.

  • help

    Theme Header Offset Top

    This can be used to adjust the vertical offset of the chart's header. Positive values will push the header down the page. Negative values will push the header up.

  • help

    Theme Header Color

    This colour picker can be used to set the colour of the charts header.

  • help

    Theme label size

    This is used to set the size of the chart's labels. This value is in pixels.

    The labels in the Pie chart show the "ordinal" scale values of the chart.

    The labels in the Pack chart show the data name values.

    There are no label settings in the Sunburst chart. There may be labels set with <title> tags in a future release.

    There are no label settings in the Force chart.

    The labels on the x-axis and y-axis on the Area chart.

    The labels on the x-axis and y-axis on the Bar chart.

    The labels in the Chord chart are present on the "tick" scale outside the outer arc, and inside the arc segment. The value inside the arc segment is the total value for that data group.

  • help

    Theme Label Position

    This is used to set the position of the labels of each data set in the chart. This value is calculated differently for each chart.

    The Pie chart label position start at 0. This will put the label in the center of the chart. A value of 1 will position the labels exactly in the middle of each pie segment. A value of 2 will place the labels on the outer edge of each segment. To place the labels just on the outerside of each segment a value of around 2.2 is good.

    The Pack chart label position does not set any value. The labels are positioned in the middle of each circle.

    The Area chart label position does not yet have any value. (In futher releases this may provide spacing away or toward the axis.)

    The Bar chart label position does not yet have any value. (In futher releases this may provide spacing away or toward the axis.)

    The Chord chart label position moves the inside label along the arc of the chord. A value of 0 removes the label from the chart.

  • help

    Theme Label Color

    This colour picker is used to set the colour for the labels on the chart.

    This provides the colour for the labels on the x and y axis, but not the colour of the axis itself. This is set in the Chart Data Style field.

    This provides the colour for the labels on the x and y axis, but not the colour of the axis itself. This is set in the Chart Data Style field.

    This provides the colour for the labels inside the arc segments, the labels on the "tick" scale, and the colour of the "ticks" themselves.

  • help

    Theme Border Size

    This used for border settings on the data items in the chart. Each layout expresses this value in different ways. Generally it will set a border around the data item on the chart.

    The Pie chart data border will draw a line around the whole of each segment. The size of this border can be any real number.

    (this feature is yet to be implemented) The Pack chart data border size is the width of the border around each data group in the "Nested" chart. In the "Flat" chart every data point will have it's border set.

    There are no border settings for the Force chart.

    This is the width of the x and y axis on the Area chart.

    This is the width of the x and y axis on the Bar chart.

    This is the width of the borders on the inner chords of the Chord chart. (This will be implemented before first release)

  • help

    Theme Border Color

    This colour picker is used to set the colour of the border on the data item.

    A nice effect on the Pie chart is to put a data border that is the same colour as the chart background.

    The "Nested" Pack chart data border colours are set by the colour palette. This is the colour of the data groups. The "Flat" Pack chart inherits it's border coliur from the background colour of that data item.

    This is the colour of the x and y axis on the Area chart.

    This is the colour of the x and y axis on the Bar chart.

    This is the colour of the borders on the inner chords of the Chord chart.

  • help

    Theme Data Spacing

    This is the spacing between each of the data elements.

    This setting has no affect on the Pie chart.

    The Pack chart data spacing is the spacing between each indivual data item. In the "Flat" chart it creates open space between the bubbles. In the "Nested" chart it is only the data points and not the data groups that pick up this spacing attribte". The spacing attribute will reduce the area of the data items.

    The Sunburst chart data spacing setting has no affect on the chart. This may have some implementation in future releases.

    (yet to be implemented) The Force chart data spacing sets the force at which the data elements repel each other. A high spacing will force them wider apart, whereas a small spacing will mean that the data will all bunch together at the center of the graph.

    There are no spacing options available for the Area chart.

    There are no spacing options available for the Bar chart.

    There is no implementation of this value for the Chord chart.

Chart Events