ZingChart Logo
Main Menu

JSON Configuration

{
  "globals": {},
  "gui": {
    "behaviors": [{}],
    "context-menu": {
      "button": {},
      "custom-items": [{}],
      "gear": {},
      "item": {}
    }
  },
  "graphset": [{
    "3d-aspect": {},
    "arrows": [{
      "from": {},
      "to": {}
    }],
    "crosshair-x": {
      "marker": {},
      "plot-label": {},
      "scale-label": {}
    },
    "crosshair-y": {
      "scale-label": {}
    },
    "csv": {},
    "images": [{}],
    "labels": [{
      "callout-tip": {}
    }],
    "legend": {
      "footer": {},
      "header": {},
      "icon": {},
      "item": {},
      "item-off": {},
      "marker": {},
      "page-off": {},
      "page-on": {},
      "page-status": {},
      "scroll": {
        "bar": {},
        "handle": {}
      },
      "tooltip": {}
    },
    "media-rules": [{}],
    "no-data": {},
    "options": {
      "context-menu": {
        "button": {},
        "items": {}
      },
      "indicator": {
        "npv": {},
        "title": {},
        "value": {}
      },
      "style": {
        "hover-state": {},
        "tooltip": {}
      },
      "words": []
    },
    "plot": {
      "animation": {},
      "background-marker": {},
      "background-state": {},
      "error": {
        "hover-state": {}
      },
      "errors": [],
      "goal": {},
      "guide-label": {},
      "highlight-marker": {},
      "highlight-state": {},
      "hover-marker": {},
      "hover-state": {},
      "legend-item": {},
      "legend-marker": {},
      "marker": {},
      "preview": {},
      "rules": [{}],
      "selected-marker": {},
      "selected-state": {},
      "tooltip": {},
      "trend-down": {},
      "trend-equal": {},
      "trend-up": {},
      "value-box": {
        "connector": {},
        "joined": {},
        "shared": {}
      }
    },
    "plotarea": {},
    "preview": {
      "active": {},
      "handle": {},
      "handle-bottom": {},
      "handle-left": {},
      "handle-right": {},
      "handle-top": {},
      "mask": {}
    },
    "scale": {},
    "scale-k": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "tick": {},
      "tooltip": {}
    },
    "scale-r": {
      "center": {},
      "guide": {},
      "item": {},
      "markers": [{
        "label": {}
      }],
      "minor-guide": {},
      "minor-tick": {},
      "ring": {
        "items": [{}]
      },
      "tick": {}
    },
    "scale-v": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "ref-line": {},
      "tick": {},
      "tooltip": {}
    },
    "scale-x": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "label": {},
      "markers": [{
        "label": {}
      }],
      "minor-guide": {},
      "minor-tick": {},
      "ref-line": {},
      "rules": [{}],
      "tick": {},
      "tooltip": {},
      "transform": {
        "guide": {},
        "item": {}
      }
    },
    "scale-y": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "label": {},
      "markers": [{
        "label": {}
      }],
      "minor-guide": {},
      "minor-tick": {},
      "ref-line": {},
      "rules": [{}],
      "tick": {},
      "tooltip": {},
      "transform": {}
    },
    "scroll-x": {
      "bar": {},
      "handle": {}
    },
    "scroll-y": {
      "bar": {},
      "handle": {}
    },
    "series": [{
      "animation": {},
      "background-marker": {},
      "background-state": {},
      "error": {},
      "errors": [],
      "goal": {},
      "guide-label": {},
      "highlight-marker": {},
      "highlight-state": {},
      "hover-marker": {},
      "hover-state": {},
      "legend-item": {},
      "legend-marker": {},
      "marker": {},
      "preview": {},
      "rules": {},
      "selected-marker": {},
      "selected-state": {},
      "tooltip": {},
      "trend-down": {},
      "trend-equal": {},
      "trend-up": {},
      "value-box": {},
      "values": []
    }],
    "shapes": [{
      "label": {}
    }],
    "source": {},
    "subtitle": {},
    "title": {},
    "tooltip": {},
    "widgets": [],
    "zoom": {
      "label": {}
    }
  }],
  "history": {
    "item": {},
    "item-off": {}
  },
  "refresh": {
    "curtain": {}
  }
}

 Back to Docs  Back to JSON Attributes Tree

Allows you to either import data from an external CSV file (and a few other similar file types) or import data using a data string within the JSON code.
Attribute Type Info
columns Array

In case of fixed width column format of the CSV data, specifies the dimensions for each column. Some csv files are formatted based on the idea of "fixed sized columns", not by the standard comma or semicolon "separator". So, the columns array holds the number of characters for each column so that the parser will be able to split each line in the correct way

[...]

data-string
dataString
String

Sets the CSV data directly embedded in the JSON, as a string. However new-line characters are not allowed in the definition of an attribute in json syntax, and therefore the row separator character will likely need also be overridden with the "row-separator" attribute if "data-string" is used in place of "url".

"Apple,25,34\r\nPear,-16,10\r\nLemon,22,-5\r\nOrange,41,21" | ...

horizontal-labels
horizontalLabels
Boolean

Specifies if the CSV data contains descriptive headers for each column as the first or second row (depending on title presence).

true | false | 1 | 0

mirrored Boolean

Specifies if the CSV data should be processed in a mirrored way (per line instead of per column). Note the different format used for the data-string.

true | false | 1 | 0

row-separator
rowSeparator
String

Sets the separator between the data rows when using a data-string instead of an external .CSV file. The default value is "\r\n".

"_" | "&" | "\r\n" | ...

separate-scales
separateScales
Boolean

Specifies whether or not each column in the csv data should have its own scale on the chart.

true | false | 1 | 0

separator String

Sets the separator between the data cells, default is ",". Any single character can be used as a separator.

"*" | "/" | "," | ...

smart-scales
smartScales
Boolean

Smart-Scales will analyze the CSV data to determine if each column of data is of a different enough type of data to deserve a separate scale. If it is, smart-scales will assign the unique data columns to separate scales.

true | false | 1 | 0

title Boolean

Specifies if the CSV data contains a descriptive title on the first line. If this attribute it not included, then the library looks at the data to decide if the first line is intended to be a title or not. If it thinks it is, The first line will become the title of the graph. If there is a title line in the CSV and "title":"true" is set, the first line will be the graph title, but if "title":"false" is specified, that first line will become a scale-label.

true | false | 1 | 0

url String

Sets the url for the CSV data source.

"http://www.domain.com/link.php" | "%FILEPATH%/fruit.csv" | "/resources/datacsv.txt" | ...

vertical-labels
verticalLabels
Boolean

Specifies if the CSV data contains descriptive headers for each row.

true | false | 1 | 0

Chart View Code View
Edit This Chart Share This Chart Start a FREE Trial
JS JSON