Following this example....Gauge example I am trying to create a gauge but I need to pull the value from a database.?
I tried the follwing based on other charts that I hae successfully created but nothing is rendering as a gauge...
filename = chart3.php (I've not added the extracted data yet until I fihure out how to get the gauge to render)
function generateXml_gauge($title) {
$title = isset($title) ? $title : 'CHART 1: Volume of Completed FSOs';
// Chart Data XML
$gaugeXml = '<vg:Gauge Type="Circular" Width="300" Height="300" DefaultTemplate="CircularGaugeQuarterNWStyle" OuterBackground="Transparent" BorderBrush="Black" ShadowEnabled="True">\''
.'+\''.'<vg:Gauge.Background>\''
.'+\''.'<LinearGradientBrush StartPoint="1.07,0.114" EndPoint="0.084,1.277">\''
.'+\''.'<GradientStop Color="#FFE5E5E5" Offset="0"/>\''
.'+\''.'<GradientStop Color="White" Offset="0.461"/>\''
.'+\''.'<GradientStop Color="#FF707070" Offset="1"/>\''
.'+\''.'</LinearGradientBrush>\''
.'+\''.'</vg:Gauge.Background>\''
.'+\''.'<vg:Gauge.CircularScales>\''
.'+\''.'<vg:CircularScale ScaleThickness="0.2" BorderThickness="0" Radius="1.24" BorderBrush="#103f3f"
ShadowEnabled="False">\''
.'+\''.'<vg:CircularScale.MajorTicks>\''
.'+\''.'<vg:MajorTicks Background="Black" Placement="Outside"/>\''
.'+\''.'</vg:CircularScale.MajorTicks>\''
.'+\''.'<vg:CircularScale.MinorTicks>\''
.'+\''.'<vg:MinorTicks Background="Black" Placement="Outside" TickWidth="0.015"/>\''
.'+\''.'</vg:CircularScale.MinorTicks>\''
.'+\''.'<vg:CircularScale.ScaleLabels>\''
.'+\''.'<vg:ScaleLabels Placement="Outside"/>\''
.'+\''.'</vg:CircularScale.ScaleLabels>\''
.'+\''.'</vg:CircularScale>\''
.'+\''.'</vg:Gauge.CircularScales>\''
.'+\''.'<vg:Gauge.Indicators>\''
.'+\''.'<vg:NeedleIndicator Value="50" CapWidth="0.25" IndicatorWidth="0.09" DistanceFromScale="-0.1"
BorderThickness="1" BorderBrush="Black">\''
.'+\''.'<vg:NeedleIndicator.Background>\''
.'+\''.'<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">\''
.'+\''.'<GradientStop Color="#FF676767" Offset="0.222"/>\''
.'+\''.'<GradientStop Color="White" Offset="0.008"/>\''
.'+\''.'<GradientStop Color="#FF555555" Offset="0.339"/>\''
.'+\''.'<GradientStop Color="#FF181414" Offset="0.957"/>\''
.'+\''.'<GradientStop Color="Black"/>\''
.'+\''.'</LinearGradientBrush>\''
.'+\''.'</vg:NeedleIndicator.Background>\''
.'+\''.'<vg:NeedleIndicator.CapBackground>\''
.'+\''.'<RadialGradientBrush>\''
.'+\''.'<GradientStop Color="White" Offset="0.833"/>\''
.'+\''.'<GradientStop Color="#FF8D8D8D" Offset="0.903"/>\''
.'+\''.'<GradientStop Color="#FF1B1A1A" Offset="0.992"/>\''
.'+\''.'<GradientStop Color="#FFF3F3F3" Offset="0.794"/>\''
.'+\''.'</RadialGradientBrush>\''
.'+\''.'</vg:NeedleIndicator.CapBackground>\''
.'+\''.'</vg:NeedleIndicator>\''
.'+\''.'</vg:Gauge.Indicators>\''
.'+\''.'<vg:Gauge.Ranges>\''
.'+\''.'<vg:Range Canvas.ZIndex="1" StartValue="0" EndValue="100" StartWidth="0.14" EndWidth="0.14"
Placement="Center" BorderThickness="0" BorderBrush="Black" >\''
.'+\''.'<vg:Range.Background>\''
.'+\''.'<LinearGradientBrush EndPoint="0.208,0.858" MappingMode="RelativeToBoundingBox"
StartPoint="0.851,0.217">\''
.'+\''.'<GradientStop Color="#FF4D90E2" Offset="0.53"/>\''
.'+\''.'<GradientStop Color="#FF86CFFB" Offset="0.716"/>\''
.'+\''.'<GradientStop Color="#FFFF9A2C" Offset="0.068"/>\''
.'+\''.'<GradientStop Color="#FFFEC64B" Offset="0.335"/>\''
.'+\''.'<GradientStop Color="#FFFF4D49"/>\''
.'+\''.'<GradientStop Color="#FFCAF30E" Offset="1"/>\''
.'+\''.'</LinearGradientBrush>\''
.'+\''.'</vg:Range.Background>\''
.'+\''.'</vg:Range>\''
.'+\''.'<vg:Range Canvas.ZIndex="1" StartValue="0" EndValue="100.1" StartWidth="0.05" EndWidth="0.05"
Placement="Center" BorderThickness="0" Opacity="1" BorderBrush="Black" Background="White"/>\''
.'+\''.'</vg:Gauge.Ranges>\''
.'+\''.'</vg:Gauge>\'';
return $gaugeXml;
}
function generateScript_gauge($divId, $chartTitle=null, $width=380, $height=300) {
// Location of XAP (e.g. SL.Visifire.Charts.xap/SL.Visifire.Gauges.xap) file path.
$pXapPath = "../visisample/Silverlight Binaries/SL.Visifire.Gauges.xap";
// Generate JavaScript for Chart display
$script = '<script type="text/javascript" >';
$script .= 'var vGauge = new Visifire("'.$pXapPath.'", "VisifireGauge1", '.$width.', '.$height.');';
$script .= 'var gaugeXml = \''. generateXml_gauge($chartTitle).'\';';
$script .= 'vGauge.setDataXml(gaugeXml);';
$script .= 'vGauge.render("'.$divId.'");';
$script .= '</script>';
return $script;
}
And in my index.php file I have the following code - again based on other charts that work...
include('chart3.php'); //create the chart data
echo "<div id=\"VisifireGauge1\"></div>";
echo generateScript_gauge('VisifireGauge1');
