Data Plot

Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart. You can enhance the way your data plot looks using colors, gradients and hover effects.

Customize Data Plots#

In FusionCharts.NET, you can customize the data plots in the following ways with the help of different instance methods of the ValueFormatting object (which accepts a string argument) of Series object under the Data object, which is in turn under the visualizationObj object:

Data plots can be formatted using value formatting:

  • Series Name & Condition

To format the value of the data plot for a particular series, set the name of the series and the condtion you want to apply to the data plot.

Syntax:

visualizationObj.Data.Series.ValueFormatting("SERIESNAME", "CONDITION");
Were you able to implement this?
  • Condition

To format the value of all the data plots in a chart, set the condtion you want to apply to the data plot.

Syntax:

visualizationObj.Data.Series.ValueFormatting("CONDITION");
Were you able to implement this?

Now, let's apply value formatting to all the data plots of the chart.

Set Transparency of Plot#

Set the transparency of the data plot between 0 (transparent) and 100 (opaque) using the Alpha properties. Refer to the code given below:

visualizationObj.Data.Series.ValueFormatting("value > 20000 and value < 40000").Alpha(50);
Were you able to implement this?

In the above code, transparency of the data plots with values from 20000 and 40000 has been set to 50.

The chart will look as shown below:

Users010K20K30K40K50K60K70KProgramming LanguageJavaPythonJavascriptC++C#PHPPerlMost popular programming language2017 - 2018

Color Individual Data Plots#

Set the color of the individual data plots as hex code using the Color property. Refer to the code given below:

visualizationObj.Data.Series.ValueFormatting("value < 20000 and value > 40000").Color(#333664);
Were you able to implement this?

In the above code, the color of the data plots with values below 20000 and above 40000 has been set to #333664.

The chart will look as shown below:

Users010K20K30K40K50K60K70KProgramming LanguageJavaPythonJavascriptC++C#PHPPerlMost popular programming language2017 - 2018

Dashed data Plot Border#

THe Dashed property is used when you want the border of the data plot to be appeared as dashed. This is particularly useful when you want to highlight a data. Refer to the code given below:

visualizationObj.Data.Series.ValueFormatting("value > 10000 and value < 30000").Dashed(true);
Were you able to implement this?

In the above code, border of the data plots with values from above 10000 and below 30000 has been set to dashed.

The chart will look as shown below:

Show/Hide Individual value#

To hide the individual plot value, set the value of the ShowValue property to false. Refer to the code given below:

visualizationObj.Data.Series.ValueFormatting("value > 30000 and value < 40000").ShowValue(false);
Were you able to implement this?

In the above code, the data plots with values from 30000 to 40000 has been hidden.

The chart will look as shown below:

To link a data plot values to an external resource, set the value of the Link properties to the link of the resource. Refer to the code given below:

visualizationObj.Data.Series.ValueFormatting("value > 20000 and value < 30000").Link("https://www.fusioncharts.com/");
Were you able to implement this?

In the above code, link to an external resource has been added to the data plot with value between 20000 to 30000.

The chart will look as shown below:

Set the Display Value#

To display a different value instead of the numeric value of the data plot, set the value of DisplayValue property to the text you want to display. Refer to the code given below:

visualizationObj.Data.Series.ValueFormatting("value > 20000 and value < 30000").DisplayValue("27000 Users");
Were you able to implement this?

In the above code, display value of the data plot with values from 20000 to 30000 has been set to 27000 Users.

The chart will look as shown below:

Set the Tooltext#

Set the tooltip text for the data plot as string to the ToolText properties. Refer to the code given below:

visualizationObj.Data.Series.ValueFormatting("value > 20000 and value < 30000").ToolText("Programming Language");
Were you able to implement this?

In the above code, tooltext of the data plot with values from 20000 to 30000 has been updated.

The chart will look as shown below:

Data Value Position#

If you've opted to show data values on the chart, ValuePosition property lets you adjust the vertical alignment of data values with respect to dataplots. By default, this attribute is set to AUTO mode in which the alignment of each data value is determined automatically based on the position of each plot point. In ABOVE mode, data values are displayed above the plot points unless a plot point is too close to the upper edge of the canvas while in BELOW mode, data values are displayed below the plot points unless a plot point is too close to the lower edge of the canvas.

Refer to the code given below:

visualizationObj.Values.Position = ValueFormat.ValuePosition.AUTO;
Were you able to implement this?

Conditional Data Plot Formatting#

Using FusionCharts.NET, you can also apply conditional formatting to the data plots of the chart and also apply the above customizations at the same time.

Following is the list of operations which can be applied to the data plot of the chart.

Operation Data Type Query Signature
Null string, Number, Date/Time <field> is null
Not Null string, Number, Date/Time <field> is not null
Equal string, Number, Date/Time <field> = <value>
Not Equal string, Number, Date/Time <field> != <value>
Begins With string <field> begins with <value>
Contains string <field> contains <value>
Ends With string <field> ends with <value>
Greater Number, Date/Time <field> > <value>
Greater or Equal Number, Date/Time <field> >= <value>
Less Number, Date/Time <field> < <value>
Less or Equal Number, Date/Time <field> <= <value>
Between Number, Date/Time <field> is between <value1> to <value2>

Logical Operator#

FusionCharts.NET supports logical operators which filters the data based on some condition. The supported logical operators are:

  • AND &
  • OR operators

AND operator is used when you want to combine multiple conditions like Between, Equals or Greater whereas OR operator is used when you want to combine multiple conditions like Between, Equals or Greater. The output filtered will be based on one of the conditions.

Refer to the code below:

visualizationObj.Data.Series.ValueFormatting(value >= 20000 and value < 40000").ShowValue(true);
Were you able to implement this?

In the above code two condtional formatting >= & < has been used and one logical operator and has been used. This filters the data of the chart and renders a chart with filtered data plot.