PictoChart presents an interesting way to compare values in a data set that are calendar based. The comparison can be shown by using different colors and opacities.

There are a couple of things you can do to help with making PictoChart calendars.

 

  1. The attributes rowCount, columnCount and layout help achieve the layouts of the calendar. You can also use rowHeight and columnWidth attributes to get the desired sizing of the Picto items.
  2. The color of a Picto item can be set using rgba. By setting the alpha to 0, you make transparent items that can be used to introduce gaps in your Picto Chart. In a future release of JET, we will be supporting setting shape to 'none' to make it easier to introduce gaps in the Picto Charts.
  3. We recommend customizing the tooltips to make them more useful.You can do this by using the tooltip attribute or specifying a name for the picto item.

 

Simple Sample

linearCalendar.PNG

<div id='pictochart' data-bind="ojComponent:{
          component: 'ojPictoChart',
          items: pictoChartItems,
          rowHeight: 70,
          columnWidth: 30,
          rowCount: 1,
          tooltip: tooltipFunction
        }" >
</div>





 

Here are some other examples:

 

1. Basic Calendar

pictoCalendar.PNG

How to: For each Picto chart, set columnCount to 7, set layout to 'horizontal' and introduce transparent Picto items so the colored ones will start on the right day of the week.

This example uses four Picto charts, one for each month.

 

2. Horizontal Block Calendar

blockCalendar1.PNG

How to: For each Picto chart, set rowCount to 7,  use rgba to set the color of the Picto items to get the different transparencies and introduce transparent Picto items so the colored ones will start on the right day of the week

This example uses two Picto Charts, one for each city.

 

3. Vertical Block Calendar

blockCalendar2.PNG

How to: set rowCount to 31, set columnCount to 12, use rgba to set the color of the Picto items to get the different transparencies and introduce transparent Picto items to make up for months that do not have 31 days.

This example uses only one Picto Chart.