Jump to content

 

Photo

Gauge creation


  • Please log in to reply
2 replies to this topic

#1 kdalts

kdalts

    Newbie

  • Members
  • Pip
  • 6 posts

Posted 15 April 2012 - 10:32 PM

Hi Guys

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'); 


#2 sharmila

sharmila

    Advanced Member

  • Administrators
  • PipPipPip
  • 695 posts
  • Gender:Female

Posted 16 April 2012 - 04:46 AM

Hi kdalts,

We will create an example application for you soon.

Regards,
Sharmila

#3 shoaib

shoaib

    Advanced Member

  • Members
  • PipPipPip
  • 924 posts
  • Gender:Male
  • Location:Bangalore

Posted 30 April 2012 - 07:05 AM

Hi Kdalts,

We have created a sample application on this and added it into ExampleArea here.

Regards,
Shoaib




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users