felipehuggler.com

Estava procurando uma maneira de implementar os gráficos no novo HomeBroker da Xp Investimentos. E um  projeto que me chamou bastante a atenção foi o http://visifire.com

Muito simples a implementação e agora estou estudando como manipular os dados e eventos.

Meu primeiro exemplo, tentei simular uma cotação em tempo real. Goooo!

Depois de baixar os arquivos no site - Utilize na mesma pasta oa arquivos (SL.Visifire.Charts.xap e Visifire.js)

No site http://visifire.com/silverlight_wpf_charts_gauges_designer.php, você escolhe o template e ele gera o script html.

Coloque o script <SCRIPT type=text/javascript src="Visifire.js"></SCRIPT>

    <div id="VisifireChart0" >
       
        <script type="text/javascript" >

            var chart;

            function update() {
                var series = chart.Series[0];

                for (var i = 0; i < series.DataPoints.length; i++) {
                    series.DataPoints[i].AxisXLabel = Math.round(Math.random() * 10);
                    series.DataPoints[i].YValue = Math.round(Math.random() * 10);
                }

                setTimeout(arguments.callee, 1000);
            }

            // Create Visifire object
            var vChart = new Visifire('SL.Visifire.Charts.xap', "MyChart", 500, 300);
           
            // Chart Data XML
             var chartXml = '<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" Theme="Theme3" AnimationEnabled="True" Bevel="True" View3D="False">'
                       + '     <vc:Chart.Titles>'
                       + '         <vc:Title Text="Athens 2004 Olympics" FontSize="14"/>'
                       + '     </vc:Chart.Titles>'
                       + '     <vc:Chart.Series>'
                       + '         <vc:DataSeries RenderAs="Column" LabelEnabled="True">'
                       + '             <vc:DataSeries.DataPoints>'
                       + '                 <vc:DataPoint AxisXLabel="USA" YValue="35"/>'
                       + '                 <vc:DataPoint AxisXLabel="China" YValue="32"/>'
                       + '                 <vc:DataPoint AxisXLabel="Russia" YValue="27"/>'
                       + '                 <vc:DataPoint AxisXLabel="Australia" YValue="17"/>'
                       + '                 <vc:DataPoint AxisXLabel="Japan" YValue="16"/>'
                       + '             </vc:DataSeries.DataPoints>'
                       + '         </vc:DataSeries>'
                       + '     </vc:Chart.Series>'
                       + ' </vc:Chart>';
           
                    // Set Chart Data file Uri
            vChart.setDataXml(chartXml);

            vChart.loaded = function (args) {
                chart = args[0];
                update();
            };
           
            // Render chart
            vChart.render("VisifireChart0");

        </script>
       
    </div>

http://www.felipehuggler.com/felipehuggler/testes/grafico/