@(Html.C1().FinancialChart().Id("tpChart").Bind(Model.SharesData)
.BindingX("date").AxisY(ay => ay.AxisLine(false).Position(C1.Web.Mvc.Chart.Position.Right))
.Header(Model.Header).SymbolSize(4).Tooltip(t => t.Content("tpChart_tooltipContent"))
.Series(sers =>
{
sers.Add().Name("Close").Binding("close");
})
)
Chart Type:
@(Html.C1().ComboBox().Id("tpCombo").DisplayMemberPath("text").SelectedValuePath("value")
.IsEditable(false).OnClientSelectedIndexChanged("tpCombo_SelectedIndexChanged"))
$(document).ready(function () {
//Chart Types
tpChart = wijmo.Control.getControl("#tpChart");
tpCombo = wijmo.Control.getControl("#tpCombo");
tpCombo.itemsSource = chartTypesList;
});
//Chart Types
var bindingYs = { 0: 'close', 2: 'close', 5: 'high,low,open,close', 6: 'high,low,open,close', 7: 'high,low,open,close', 8: 'high,low,open,close', 9: 'high,low,open,close', 10: 'high,low,open,close', 11: 'close,volume', 12: 'high,low,open,close,volume', 13: 'high,low,open,close,volume', 14: 'high,low,open,close,volume' }
, chartTypesList = [{ "value": "2", "text": "Line" }
, { "value": "0", "text": "Column" }
, { "value": "5", "text": "Candlestick" }
, { "value": "6", "text": "HighLowOpenClose" }
, { "value": "7", "text": "HeikinAshi" }
, { "value": "8", "text": "LineBreak" }
, { "value": "9", "text": "Renko" }
, { "value": "10", "text": "Kagi" }
, { "value": "11", "text": "ColumnVolume" }
, { "value": "12", "text": "EquiVolume" }
, { "value": "13", "text": "CandleVolume" }
, { "value": "14", "text": "ArmsCandleVolume" }]
, tpChart = null
, tpCombo = null;
function tpChart_tooltipContent(ht) {
var dateStr = 'Date: ' + wijmo.Globalize.format(ht.item.date,'MM/dd/yyyy') + '
',
hlocStr = 'Open: ' + wijmo.Globalize.format(ht.item.open, 'n2') + '
' +
'High: ' + wijmo.Globalize.format(ht.item.high, 'n2') + '
' +
'Low: ' + wijmo.Globalize.format(ht.item.low, 'n2') + '
' +
'Close: ' + wijmo.Globalize.format(ht.item.close, 'n2') + '
',
closeStr = 'Close: ' + wijmo.Globalize.format(ht.item.close, 'n2'),
volStr = 'Volume: ' + wijmo.Globalize.format(ht.item.volume, 'n0'),
toolTipStr;
switch (tpCombo.selectedItem.text) {
case 'Line':
case 'Column':
toolTipStr = dateStr + closeStr;
break;
case 'ColumnVolume':
toolTipStr = dateStr + closeStr + '
' + volStr;
break;
case 'EquiVolume':
case 'CandleVolume':
case 'ArmsCandleVolume':
toolTipStr = dateStr + hlocStr + volStr;
break;
default:
toolTipStr = dateStr + hlocStr;
break;
}
return toolTipStr;
};
//var menu = new wijmo.input.Menu('#tpMenu');
function tpCombo_SelectedIndexChanged(sender) {
var arg = wijmo.changeType(sender.selectedValue, wijmo.DataType.Number);
// check if the conversion was successful
if (wijmo.isNumber(arg) && tpChart && tpChart.series)
{
// update the value
tpChart.chartType = arg;
tpChart.series[0].binding = bindingYs[arg];
switch (sender.selectedItem.text) {
case 'LineBreak':
tpChart.options = {
lineBreak: {
newLineBreaks: 3
}
};
break;
case 'Renko':
tpChart.options = {
renko: {
boxSize: 2,
rangeMode: 'Fixed',
fields: 'Close'
}
};
break;
case 'Kagi':
tpChart.options = {
kagi: {
reversalAmount: 1,
rangeMode: 'Fixed',
fields: 'Close'
}
};
break;
default:
break;
}
}
};
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FinancialChart101.Models;
namespace FinancialChart101.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new FinancialChartModel());
}
}
}