Creating charts from CSV data

The chart editor in ArgonStudio enables you to easily draw charts from CSV data. You can either import CSV data directly into the chart editor, or you can, with a single click, copy data over from the grid editor or the HTML parser. Once you have configured the chart to your satisfaction, you can save the chart and data for the future.

Importing CSV into the chart editor

  • To begin with the chart editor, let us load some CSV data into it.
  • Click on the import csv button (1).
  • A file-selection box appears. Navigate to the location of your CSV, select it and click Open.
  • The CSV data is loaded into the text box (2).

Creating a column chart

  • Once the data is loaded into the chart editor, you can proceed with creating a column (or bar) chart.
  • Ensure that the Column tab is selected (1). The other tabs are used for other chart types and will be covered later.
  • Click the dropdown menu icon (2) and select the column to be used as X-column. We have chosen System size (3).
  • Choose the Y-column from the next dropdown (4).
  • Choose orientation (5).
  • Click the Draw button (6).
  • The chart is rendered (7).

Configuring the chart

  • Once the chart has been created, you can configure it using the configurator.
  • Look for the hamburger icon in the chart and click it to open the configurator as shown below (1).
  • Make any desired changes and click Apply Changes to apply the settings (1).
  • Click Close Panel to close the configurator (2).

Saving the chart

  • You can save the chart at any time by click the save button.
  • The chart is saved as a JSON document and contains all the information needed to restore the chart as original.

Restoring a saved chart.

  • Restoring a saved chart is similarly easy.
  • Click the file-load icon and choose the chart to be restored.

Creating a line or scatter chart

  • Creating a line chart is just as easy as creating a column chart.
  • Change to the Line/Scatter tab at the bottom of the screen.
  • Choose the X-column from the dropdown. We have chosen System size (1).
  • Choose one or more Y-columns from the dropdown (2).
  • Click the Draw button (3). The chart will be rendered.
  • Configure the chart by clicking on the configurator button 4.

Editing chart data in the grid editor

  • Sometimes you may find it necessary to correct the data in the chart. Maybe the data was wrong, or the labels need to be updated, etc.
  • While you can directly edit the CSV data in the text editor, you may find it more convenient to use the grid editor.

    Especially if you need to make changes to a whole column, etc.

    In such a case, you can open the data in the grid editor by clicking the edit in grid editor button. This operation transfers the data to the grid editor where you can edit the data.

Updating the chart with fresh data

  • After editing the chart data in the grid editor as described above, we now need to update the chart.
  • Hang on! Do not click the Draw button just yet. Doing so will redraw everything, and you will lost the chart configuration.
  • Click on the dropdown menu icon at the end of the Draw button (1).
  • Click on Update Data in the dropdown menu (2).
  • The chart will be updated to reflect the new data, but the old chart settings will remain.

Exporting the chart as a PNG image

  • Once the chart is ready and configured to your satisfaction, you may also want to export it as a PNG image file.
  • You can easily do that by clicking the export to png button and choosing a location to save the image.

Summary

In this article, we learned how to create charts using ArgonStudio. Specifically, we learned how to:

  • Import CSV data into the chart editor.
  • Create a column chart.
  • Create a line/scatter chart.
  • Configuring the various graphical elements on the chart.
  • Saving the chart as a JSON document which allows it to be reloaded for editing.
  • Exporting the chart as a PNG image file.
  • Restoring the chart from a JSON document.
  • Editing chart data in the grid editor.
  • Updating the data underlying the chart.