Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.

We use CSS files to enable us to format the application by changing look, font size, color, weight and style. You can browse and add a Custom Cascading style sheet file (one that was created and saved to either the BI platform or the Local system earlier) in the Custom CSS property of the Properties view of the Analysis Application. These styles will get applied to the components as per the styles defined in the CSS Style file.

For additional learning please refer to the Video Guide going through the steps to add CSS Styles here:

 

Let us work in Local mode to create an application demonstrating the method by which users can modify their own applications using CSS.

We start off by creating a new Analysis Application using a Blank template, and adding a ChartsPLUS 3.0 chart to the Layout Editor.

Under the Additional Properties go to CONFIG>>Graphing>>Graphs. (Note: If this is a freshly created application and you don’t see any automatically generated Graphs you can click on Utilities>>Generate and click on Generate New Graphs, like so):

chartsplus-graph-properties-generate-graphs

 

Select graph Column 0. Under GENERAL properties set the Id to graph1. Set the Value Field>>Field Type to By Name and Field Name to Sales.

chartsplus-line-css-graph-properties-1

 

Under APPEARANCE set the Fill Alpha to 75%. Under Fill Colors set the Line Thickness to 3. These options serve to highlight the columns border while de-emphasizing the interior fill.

chartsplus-line-css-graph-properties-2

 

To display our second graph on a different Value Axis go to CONFIG>>Axes>>Value Axes. Add a secondary axis to the application by right clicking on the ‘+’ sign beside ValueAxis Items and clicking on Add New ValueAxis.

chartsplus-axis-properties-value-axis-1

 

Select the newly added Value Axis. Under GENERAL set the Id to Secondary Axis and set the Position to Right.

chartsplus-line-css-secondary-axis

 

Go back to Config>>Graphing>>Graphs and select graph Column 1. Under GENERAL properties set the Id to graph2. Set the Graph Type to Line and the Value Axis to Secondary Axis. Set the Value Field>>Field Type to By Name and Field Name to Quantity.

chartsplus-line-css-graph-properties-3

 

Under APPEARANCE set the Fill Alpha to 0%. Under Fill Colors set the Line Thickness to 5.

chartsplus-line-css-graph-properties-4

 

Our chart initially appears as shown below (Note: The Sales graph corresponds to the Axis on the Left while the Quantity graph corresponds to the newly created Axis on the Right):

chartsplus-line-css-chart-intermediate

 

ADDING THE CSS FILE


The CSS file we will be using today has been created and saved to the desktop of our Local system. It is saved as DEMO.css and contains the following CSS:

.ChartsPLUS2-graph-graph1 .ChartsPLUS2-graph-stroke {

  stroke-dasharray: 5, 2, 20;

}

.ChartsPLUS2-graph-graph2 .ChartsPLUS2-graph-stroke {

  stroke-dasharray: 10, 5, 10;

}

Notes: a. “ChartsPLUS2” represents the name of the CSS Class.

            b. “graph1” and “graph2” correspond to the Graph IDs for the graphs in CONFIG>>Graphing>>Graphs.

            c. The Stroke property can be customized according to your requirements.

Go to the Properties View of the Application and under Display>>Custom CSS click on the Browse… button. Select DEMO.css from the desktop and add it to the application.

chartsplus-line-css-upload-css

 

Finally, we set the CSS Class of our Chart to the class defined in the DEMO.css file. To do this go to the Additional Properties of the chart. Under GENERAL>>General>>CSS toggle ON the Add Class Names property and set the Class Name Prefix to CHARTSPLUS2.

chartsplus-line-css-set-css

 

Execute the application locally. We notice the Application has been modified according to the properties set in the custom CSS file.

chartsplus-line-css-chart-final

 

For additional information on ChartsPLUS and to download a free trial click here.