ZingChart: CSV Import/Export

There are multiple options for importing and exporting data in ZingChart, but one of our most popular options is using CSV (comma separated values) data from spreadsheet applications such as Excel. This article will walk through both importing and exporting CSV data in ZingChart.

Importing CSV Data

In order to import CSV data to your chart, add a csv object to the graph object. If you are using a single graph, it will look like the following:

{
  csv: {}, // for CSV import configuration
  series: {} // chart series data
}

For multiple charts in a graphset, the configuration will look like the following:

{
  graphset: [
  {
    csv: {},
    series: {}
  },
  // additional charts
  ]
}

Once the csv object is added to the chart, use the following attributes to configure the CSV import. ZingChart will automatically parse the data and add it to your chart.

Attribute	Description
`url`	Required. A string containing the URL to fetch the CSV data from. Example: `"./resources/fruitlabels.csv"`
`dataString`	A string containing the CSV data. Alternative to using `url` to import data
`rowSeparator`	A string containing the row separator when using `dataString` to import CSV data.

A full list of csv attributes can be found on the csv JSON attributes page and you can check out our full CSV import tutorial for more information.

Exporting CSV Data

There are two options for exporting data from your ZingChart: via the context menu and via API methods.

Context Menu

To export CSV data via the context menu, first ensure the option is enabled in the context menu (note: it is enabled by default). To force the DownloadCSV context menu option, add the following to your chart JSON:

{ 
  gui: { 
    behaviors: [ 
      { 
         id: 'DownloadCSV', 
         enabled: 'all'
      }
    ]
  },
  // rest of chart configuration
}

Then, right-click on your chart to bring up the context menu, and click the "DownloadCSV" button to download the chart data as CSV.

API Methods

If you prefer implementing your own export button, you can use our downloadCSV API method. To use this method, do the following:

zingchart.exec('myChart', 'downloadCSV', {
  fn: 'chart-values'
});

The fn parameter sets the filename for the CSV file. Full documentation on this method, as well as a demo, can be found on our API method reference page.

Summary

ZingChart has built in functionality to import CSV data through the csv object and export CSV data via the context menu and our API methods. If you have any questions, feel free to ask in chat or email us at support@zingsoft.com.