Charts for WEB and MOBILE experience

How To Use zElement


zElement is a tool where you can quickly create charts from your own data sets, and publish them on your site.

Your data set can be a .csv files (see next section).

You would upload the files to your zElement account and with only a few steps you'll be able to create your own chart.

Once your chart is created you can publish it. Just Copy and Paste the special small code from your zElement account
into your personal site or blog, and the chart comes to live!

How To Make A Chart


To create a chart you need a data file. You can create a file using Google Sheets, Microsoft Excel or any other similar program.

Use Google Spreadsheets

Make sure your data structure in the spreadsheet file follows our required format.

For each Chart Type our app expects a certain data structure of your data file. To see the requirements, please follow the next steps in the Upload Manager process.

You can download our sample data file to create your own Column, Bar, Line, Pie charts.

To create your Area Timeline chart use this alternative data file.

1Upload
Your first step is to upload your data file using our Upload Manager.
Enter a name for your chart. At this point, we will not save or edit your chart yet. Choose the appropriate chart type from the Chart Type selection dropdown menu.
When you hover over a selection, a side panel opens up to display examples of the expected data structure in your spreadsheet file.
Please make sure you follow this structure.
Once your selection is made the Upload button will be enabled. Click on Upload button.
Browse to your file location on your computer and select it. Again, make sure the file format is supported.

As of now, we only support .csv files. Also make sure the data structure matches with our supported data structure.
You can check this by comparing your data structure with the example in the Chart Type selection one you hover over the items. zElement will attempt to upload your file. If upload succeeds you'll see a success message indicating so.
Otherwise, you'll see an error message. In this case, make corrections described in the previous point and try again.
2Edit and Customize Your Chart
Now you can customize your chart before saving it.
The switch button is enabled now You can click to turn on and expand the Edit Menu. There are various options that allow you to customize your chart.
3View Chart Details
The next step is to view your newly created chart
View Chart button will be enabled. You can click on this button or the link at the top level navigation under Charts > My Charts. You'll be redirected to the page with a list of your charts. To view a chart, click on the link. A new browser tab will open up displaying your chart.
4Embed your Chart

Now, you can insert your chart into your web site. Just copy and paste the code into your HTML.

To get the code, navigate to the Charts page (previous step). In the table, click on the corresponding button under Code column and the code will be revealed.

This code should be used for embeding in your personal web site, social media site, blog, article or any other online published resources.

You can, also, share that code fragment with coworkers and friends. They can use your chart in their own published web pages, as long as the chart stays in your account.

How To Choose What Chart Represents Your Data The Best

Understanding dataviz

Your chart decision makes big a difference in how well your user understands your data.

Make sure your pick the right type of chart to clearly communicate the information you want to share.

Visit this article for a good and short description of the process.