FusionCharts For FileMaker Documentation

Divisional Lines

Divisional Lines are the horizontal and vertical lines that run across the chart dividing the canvas in small segments. In this section we will discuss about the parameters to change the properties of Divisional Lines.

We will go through the parameters that control the properties of Horizontal Divisional Lines first.

numDivLines parameter determines the number of horizontal divisional lines to be displayed on the chart. FusionCharts Pro for FileMaker automatically tries to adjust divisional lines based on data provided. Take a look:

?v=3&chart=[chartType=Line2D;chartWidth=350;chartHeight=280] 
      &chartParams=[bgColor=FFFFFF;caption=Weekly Sales;numberPrefix=$;showAlternateHGridColor=0]

      &labels=Week 1;Week 2;Week 3;Week 4 

    &data=40800;31400;26700;55400

By default, we get 4 horizontal divisional lines.

In the code below, we have specified the number of Divisional Lines as 6. Let's see how it works.

?v=3&chart=[chartType=Line2D;chartWidth=350;chartHeight=280] 
      &chartParams=[bgColor=FFFFFF;caption=Weekly Sales;numberPrefix=$;

      numDivLines=6;showAlternateHGridColor=0]

      &labels=Week 1;Week 2;Week 3;Week 4 

    &data=40800;31400;26700;55400

We will be using divLineColor parameter here. This parameter specifies the color of the Divisional Lines. It accepts hexadecimal color code. Here is an example of FCQS with Blue divisional lines.

?v=3&chart=[chartType=Line2D;chartWidth=350;chartHeight=280] &chartParams=[bgColor=FFFFFF;caption=Weekly Sales;numberPrefix=$;

      numDivLines=6;divLineColor=0000FF;showAlternateHGridColor=0]

      &labels=Week 1;Week 2;Week 3;Week 4 

    &data=40800;31400;26700;55400

The thickness of the Divisional Lines is determined by divLineThickness parameter. It accepts numeric value and set it as the thickness of the Divisional Lines in pixels.

?v=3&chart=[chartType=Line2D;chartWidth=350;chartHeight=280] &chartParams=[bgColor=FFFFFF;caption=Weekly Sales;numberPrefix=$;

      numDivLines=6;divLineColor=0000FF;divLineThickness=4;showAlternateHGridColor=0]

      &labels=Week 1;Week 2;Week 3;Week 4 

    &data=40800;31400;26700;55400

To show or hide the values of the Divisional Lines we will use the parameter showDivLineValue. It is set as 1, i.e. 'show' by default.

?v=3&chart=[chartType=Line2D;chartWidth=350;chartHeight=280] 
      &chartParams=[bgColor=FFFFFF;caption=Weekly Sales;numberPrefix=$;

      showDivLineValues=0;numDivLines=6;showAlternateHGridColor=0]

      &labels=Week 1;Week 2;Week 3;Week 4 

    &data=40800;31400;26700;55400

Please note that the values across the Y-Axis are not displayed here. To revert the change, please set showDivLineValue=1 or just remove this parameter from the chartParams attribute.

showAlternateHGridColor parameter fills alternate horizontal segments on the grid with colors thus creates a band effect on the canvas. The following example explains it.

?v=3&chart=[chartType=Line2D;chartWidth=350;chartHeight=280] 
      &chartParams=[bgColor=FFFFFF;caption=Weekly Sales;numberPrefix=$;

      showDivLineValues=0;numDivLines=6;showAlternateHGridColor=1]

      &labels=Week 1;Week 2;Week 3;Week 4 

    &data=40800;31400;26700;55400

To make it as before either set showAlternateHGridColor=0 or remove this parameter.

alternateHGridColor defines the color to be used to fill the alternate grids. This parameter takes hexadecimal color code as its value. Let's take an example.

?v=3&chart=[chartType=Line2D;chartWidth=350;chartHeight=280] 

      &chartParams=[bgColor=FFFFFF;caption=Weekly Sales;numberPrefix=$;

      showDivLineValues=0;numDivLines=6;showAlternateHGridColor=1;alternateHGridColor=9999CC]

      &labels=Week 1;Week 2;Week 3;Week 4 

    &data=40800;31400;26700;55400

Let's see how simply we change the the alternate grid colors :

Now we will go through the parameters that influence the properties of Vertical Divisional Lines.

numVDivLines specifies the number of Vertical Divisional Lines to be displayed. It accepts numeric value. Unlike Horizontal Divisional Lines, FusionCharts for FileMaker does not show any Vertical Divisional Lines by default. We have to specify it always. Let's take a simple example.

?v=3&chart=[chartType=Line2D;chartWidth=350;chartHeight=280] 

      &chartParams=[bgColor=FFFFFF;caption=Weekly Sales;numberPrefix=$;

      numVDivLines=3;showAlternateHGridColor=0]

      &labels=Week 1;Week 2;Week 3;Week 4 

    &data=40800;31400;26700;55400

We will be using vDivLineColor parameter here. This parameter accepts hexadecimal color code as the color of the Vertical Divisional Lines. Below is an example.

?v=3&chart=[chartType=Line2D;chartWidth=350;chartHeight=280] 

      &chartParams=[bgColor=FFFFFF;caption=Weekly Sales;numberPrefix=$;

      numVDivLines=3;vDivLineColor=0000FF;showAlternateHGridColor=0]

      &labels=Week 1;Week 2;Week 3;Week 4 

    &data=40800;31400;26700;55400

vDivLineThickness parameter sets the thickness of Vertical Divisional Lines. It accepts numeric value and assigns it as the thickness of vertical divisional lines (in pixels.)

?v=3&chart=[chartType=Line2D;chartWidth=350;chartHeight=280] 

      &chartParams=[bgColor=FFFFFF;caption=Weekly Sales;numberPrefix=$;

      numVDivLines=3;vDivLineColor=0000FF;vDivLineThickness=4;showAlternateHGridColor=0]

      &labels=Week 1;Week 2;Week 3;Week 4 

    &data=40800;31400;26700;55400

Parameter used for this purpose is showAlternateVGridColor. Value of this parameter can be either 0 or 1. This parameter is used to fill alternate grids with color. Let's test it with the example below.

?v=3&chart=[chartType=Line2D;chartWidth=350;chartHeight=280] 

      &chartParams=[bgColor=FFFFFF;caption=Weekly Sales;numberPrefix=$;

      numVDivLines=3;showAlternateHGridColor=0;showAlternateVGridColor=1]

      &labels=Week 1;Week 2;Week 3;Week 4 

    &data=40800;31400;26700;55400

Please note that first and third vertical grids are filled with color now. We will now see how to change alternate-grid color.

To change the color of alternate vertical grids, we have to set the value of alternateVGridColor with the desired hexadecimal color code. Here is an example.

?v=3&chart=[chartType=Line2D;chartWidth=350;chartHeight=280] 

      &chartParams=[bgColor=FFFFFF;caption=Weekly Sales;numberPrefix=$;

      numVDivLines=3;showAlternateHGridColor=0;showAlternateVGridColor=1;alternateVGridColor=0000FF]

      &labels=Week 1;Week 2;Week 3;Week 4 

    &data=40800;31400;26700;55400

Divisional Line Decimal Precision is specified through yAxisValueDecimals. This parameter can be used for all types of charts to regulate the decimal precision of Divisional line values.

In the example below we set the FCQS to show divisional lines' values with 1 decimal place.

?v=3&chart=[chartType=Line2D;chartWidth=350;chartHeight=220]

    &chartParams=[caption=Weekly Sales;numberPrefix=$;numberSuffix=M;yAxisValueDecimals=1] 

    &labels=Week 1;Week 2;Week 3;Week 4&data=.40800;.31400;.26700;.55400

showDivLineSecondaryValue allows us to show/hide the values of Secondary Divisional Lines, used in Combination Charts. As Combination Charts deal with Primary and Secondary Y-Axis, the Divisional Lines also have two values. showDivLinesSecondaryValue accepts 0/1 to hide/show the values.

Let's try with a simple example where we hide the values of the divisional lines from secondary axis.

?v=3&chart=[chartType=column3DLineDY;chartWidth=350;chartHeight=280] 
      
      &chartParams=[caption=Sales Comparison;xAxisName=Weeks;PYAxisName=Revenue;SYAxisName=Units Sold; 

      showDivLineSecondaryValue=0;showValues=0]

      &labels=Week 1;Week 2;Week 3;Week 4 
      &data=[seriesName=Current Month;numberPrefix=$]40800;31400;26700;55400 

    &data=[seriesName=Previous Month;numberPrefix=$]38300;28400;15700;48100 
      &data=[SeriesName=Qunatity;parentYaxis=s]400;300;300;500

Now to show the values of Secondary Divisional Lines, we have to set showDivLineSecondaryValue=1 or just remove the parameter. Secondary Divisional Line Values are displayed by default.

?v=3&chart=[chartType=column3DLineDY;chartWidth=350;chartHeight=280] 

&chartParams=[caption=Sales Comparison;xAxisName=Weeks;PYAxisName=Revenue;SYAxisName=Units Sold; 

showDivLineSecondaryValue=1;showValues=0]

&labels=Week 1;Week 2;Week 3;Week 4 

&data=[seriesName=Current Month;numberPrefix=$]40800;31400;26700;55400 

&data=[seriesName=Previous Month;numberPrefix=$]38300;28400;15700;48100 

&data=[SeriesName=Qunatity;parentYaxis=s]400;300;300;500

Please go to Common Parameters > Divline Properties section to get the list of Divline and Grid related parameters.