Wijmo5FlexChart

Financial Chart

This sample demonstrates how to export a wijmo5 Financial FlexChart to image file.

Features

Sample
Source
Documentation

Settings

Export

Export Format : Height :

Width :

Export Name :

Description

This sample demonstrates how to export a wijmo5 Financial FlexChart to image file.

FinancialChartController.cs
FinancialChart.cshtml

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApiExplorer.Models;
 
namespace WebApiExplorer.Controllers
{
    public partial class Wijmo5FlexChartController : Controller
    {
        private readonly ClientSettingsModel _financialChartSettingsModel = new ClientSettingsModel
        {
            Settings = new Dictionary<string, object[]>
            {
                {"ChartType", new object[]{"Candlestick", "HighLowOpenClose"}}
            }
        };
 
        public ActionResult FinancialChart()
        {
            ViewBag.DemoSettingsModel = _financialChartSettingsModel;
            ViewBag.Options = _flexChartModel;
            return View();
        }
    }
}

@using WebApiExplorer.Models
@{
    ClientSettingsModel settings = ViewBag.DemoSettingsModel;
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
 
<div id="@(optionsModel.ControlId)" ></div>
 
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
 
<script>
    var chart = new wijmo.chart.FlexChart('#@(optionsModel.ControlId)');
 
    chart.initialize({
        chartType: "Candlestick",
        itemsSource: [],
        bindingX: 'x',
        symbolSize: 6,
        series: [
            { binding: 'hi,lo,open,close' }
        ]
    });
 
    var start = new Date(99, 0, 1);
    for (var i = 0; i < 90; i++) {
        var q = {};
 
        q.x = new Date(99, 0, i);
 
        if (i > 0)
            q.open = chart.itemsSource[i - 1].close;
        else
            q.open = 1000;
 
        q.hi = q.open + Math.random() * 50;
        q.lo = q.open - Math.random() * 50;
 
        q.close = q.lo + Math.random() * (q.hi - q.lo);
 
        chart.itemsSource.push(q);
    }
</script>
 
@section Description{
    @Html.Raw(Resources.Wijmo5FlexChart.FinancialChart_Text0)
}