Chapter 6. Creating a Custom Spacefilling Chart

So far, we have seen how to create custom cartesian and polar charts. The third type of chart offered by Sencha Charts is spacefilling. A spacefilling chart offers a drawing area inside which anything can be drawn. It does not have coordinate systems like cartesian and polar charts. Examples of spacefilling charts are: Gauge, Treemap, Mindmap, and so on.

In this chapter, you will learn how to create custom spacefilling charts by:

• Creating a custom sprite

• Creating a custom series

• Using the custom series with a spacefilling chart

• Working with changing store data

• Scaling up/down different dimensions dynamically

• Deriving custom color coding logic

Creating a periodic table

In this section, you will see how to create a periodic table, shown as follows, where we show the atomic number and symbol for each element.

Note

You can read more about this at http://en.wikipedia.org/wiki/Periodic_table.

The following diagram shows the typical periodic table that we would like to create:

What is this chart all about?

From a charting perspective, our periodic table will have the following requirements:

• It has 18 columns

• For each element, we will show the atomic number and symbol

• Lanthanide and Actinide elements are displayed separately

• Lanthanides will be shown in green

• Actinides shall be shown in blue

• All other elements will be shown in black

With these requirements in place, let's get to the design and implementation of it.

Structuring the design

The following diagram shows the specific classes that we need to implement to create our periodic table and how they are connected with Sencha Charts classes:

The classes highlighted with a gray background are related...

Summary

In this chapter, we discussed how to create a custom spacefilling chart where we created a series to create a periodic table and used that series with Sencha's spacefilling chart. We also discussed how to handle changing store data, styling sprites, and scaling up/down different dimensions. The implementation demonstrated Sencha Charts' important classes, their responsibilities, interactions, and how you can create a custom chart.

Now that we are done with creating different types of custom charts, in the next chapter, we will see how we can style and theme the charts.