Working with Gradients from Javascript

In this topic, we are going to explain how to work with Gradients from Javascript in Visifire. There are two types of Gradient brush available in Silverlight which can be applied to any Chart element in Visifire.

LinearGradientBrush
RadialGradientBrush

LinearGradientBrush

First we will create a LinearGradientBrush from Javascript and set it to Color property of any Chart element.

Below is the Javascript code for creating LinearGradientBrush and setting it to Chart's Background property:

var vChart = new Visifire('SL.Visifire.Charts.xap',500,300);

vChart.setDataUri("Sample1.xml");

/* This event will be fired before loading the chart into

Silverlight user-control. */

vChart.preLoad = function(args)

{

/* First Chart Reference. If there are multiple charts in a

XAML file, array of chart references will be available as

an event argument, e.g. args[0], args[1], args[2] etc. */

var chart = args[0];

var ds = chart.Series[0];

// String as brush.

var brush1 = '<LinearGradientBrush xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"' + 'EndPoint="0.5,1" StartPoint="0.5,0">'

+ '<GradientStop Color="#FF000000"/>'

+ '<GradientStop Color="#FFFFFFFF" Offset="1"/>'

+ '</LinearGradientBrush>';

// Set Color of a DataSeries

ds.SetPropertyFromJs("Color", brush1);

};

vChart.render("VisifireChart0");

</script>

Similarly you can create LinearGradientBrush and set it to any Color or Background property of any chart element.

RadialGradientBrush

Now we will create a RadialGradientBrush from Javascript and set it to Color property of any Chart element.

Below is the Javascript code for creating RadialGradientBrush and setting it to Chart's Background property: