MVCFlexChart

Financial Chart

This sample demonstrates how to export a MVC 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 MVC 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 MVCFlexChartController : Controller
    {
        public ActionResult FinancialChart()
        {
            List<FinanceData> financeDatas = new List<FinanceData>() { };
 
            DateTime startTime = new DateTime(2013, 1, 1);
            var rand = new Random();
            double high, low, open, close;
            for (int i = 0; i < 90; i++)
            {
                DateTime dt = startTime.AddDays(i);
 
                if (i > 0)
                    open = financeDatas[i - 1].Close;
                else
                    open = 1000;
 
                high = open + rand.NextDouble() * 50;
                low = open - rand.NextDouble() * 50;
 
                close = low + rand.NextDouble() * (high - low);
                financeDatas.Add(new FinanceData { X = dt, High = high, Low = low, Open = open, Close = close });
            }
 
            ViewBag.DemoSettingsModel = new ClientSettingsModel
            {
                Settings = CreateFinacialChartSettings()
            };
 
            ViewBag.Options = _flexChartModel;
            return View(financeDatas);
        }
 
        private static IDictionary<string, object[]> CreateFinacialChartSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"ChartType", new object[]{"Candlestick", "HighLowOpenClose"}},
            };
 
            return settings;
        }
    }
}

@model List<FinanceData>
@{
    ViewBag.DemoSettings = true;
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
    ImageExportOptions optionsModel = ViewBag.Options;
}
<script type="text/javascript">
    var tooltipContent = function (ht) {
        var item = ht.series.collectionView.items[ht.pointIndex];
        return '@Resources.MVCFlexChart.FinancialChart_Date' + wijmo.Globalize.format(ht.x, 'MMM-dd') + '<br/>' +
                    '@Resources.MVCFlexChart.FinancialChart_High' + item.High.toFixed() + '<br/>' +
                    '@Resources.MVCFlexChart.FinancialChart_Low' + item.Low.toFixed() + '<br/>' +
                    '@Resources.MVCFlexChart.FinancialChart_Open' + item.Open.toFixed() + '<br/>' +
                    '@Resources.MVCFlexChart.FinancialChart_Close' + item.Close.toFixed();
    };
</script>
@(Html.C1().FlexChart().Id(optionsModel.ControlId).ChartType(C1.Web.Mvc.Chart.ChartType.Candlestick).Bind("X", Model).Series(sers =>
    {
        sers.Add().Binding("High,Low,Open,Close");
    }).SymbolSize(4).AxisX(x => x.Format("MMM-dd")).Tooltip(tt => tt.Content("tooltipContent")))
 
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
 
@section Description{
    @Html.Raw(Resources.MVCFlexChart.FinancialChart_Text0)
}