The chart widget allows you to present your information in a neat and professional way; you can choose the chart's layout, and either select its theme from one of the ready-made themes or create your own.

1. Settings- Set up your chart

After dropping your chart widget into place, a new window will open allowing you to set up your chart.

As you can see below, you will be able to choose the layout, fields, function and more.

Table - Select the table you would like to draw the data from.

Chart type - Select the chart layout from one of three options: bar, pie or line.

Chart label - Select the field of data from your table that will act as your X-axis.

Value function - Select the function you would like to use on your Y-axis.

Chart value - Select the field of data from your table that will act as your Y-axis.

Chart category - Select a category for your chart.

Format - If your field of data is a date type you can select its format (by year, month, full date, etc.)

In our next example we will create a line graph with a category. We will use our "cargraph" table and a "line" type layout. 

We would like to create a chart showing the price of a certain model per year. As you can see, we have chosen our X-axis to be per year, the price field to be our Y-axis with a sum function, and our model field to be our category.

2. Filter data

As you may have seen with our other widgets, we allow you to filter the data before presenting it. The same thing applies to the chart widget. Click here to read more about the search and filter tool.

In our example we have filtered the prices so only cars with a price above 20,000 will be included in our chart.

3. Design your chart

You can choose one of the ready-made designs or add your own design in code (json).

If you wish, you can choose one of the designs and customize it with json.

3. Our final result

As shown above, you can use various types of graphs in one page and play around with the different available options. (Our example graph, titled "Price by model per year," is depicted below the top two graphs in the following picture.)