| title | string | Chart title |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" title="My Title" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| description | string | Description |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" description="My Description" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| source | string | [] |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| showBorderLine | bool | true |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" show-border-line="false" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| borderLineColor | string | #888888 |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" border-line-color="#111888" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| borderLineWidth | int | 1 |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" border-line-width="3" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| backgroundColor | string | #FFFFFF |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| backgroundImage | string | #FFFFFF |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" background-image="../images/chart_background.jpg" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| showLegend | bool | true |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" show-legend="true" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| legendLayout | string | {} |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" legend-layout="legendLayout" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| padding | string | {left: 5, top: 5, right: 5, bottom: 5} |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" padding="padding" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| titlePadding | string | {left: 2, top: 2, right: 2, bottom: 2} |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" title-padding="titlePadding" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| colorScheme | string | scheme01 |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" color-scheme="scheme03" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| greyScale | bool | false |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" grey-scale="true" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| showToolTips | bool | true |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" show-tool-tips="false" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| toolTipShowDelay | int | 500 |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" tool-tip-show-delay="300" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| toolTipHideDelay | int | 4000 |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" tool-tip-hide-delay="300" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| toolTipMoveDuration | int | 300 |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" tool-tip-move-duration="200" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| rtl | bool | false |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" rtl="true" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| enableCrosshairs | bool | false |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" enable-crosshairs="false" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| crosshairsColor | string | #888888 |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" crosshairs-color="#111888" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| crosshairsDashStyle | string | |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" crosshairs-dash-style="true" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| crosshairsLineWidth | int | 1 |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" crosshairs-dash-style="true" crosshairs-line-width="2" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| columnSeriesOverlap | bool | false |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" column-series-overlap="true" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| enabled | bool | true |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" enabled="false" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| enableAnimations | bool | true |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" enable-animations="false" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| animationDuration | int | 500 |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" animation-duration="1500" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| enableAxisTextAnimation | bool | false |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" enable-axis-text-animation="true" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| renderEngine | string | auto |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" render-engine="HTML5" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| xAxis | string | undefined |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| valueAxis | string | undefined |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
| seriesGroups | List<string> | undefined |
|
Sets or gets the <script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
|
||
Events |
||
| toggle | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" on-toggle="eventHandler()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
||
| click | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" on-click="eventHandler()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
||
| mouseOver | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" on-mouse-over="eventHandler()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
||
| mouseOut | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" on-mouse-out="eventHandler()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
||
| refreshBegin | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" on-refresh-begin="eventHandler()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
||
| refreshEnd | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" on-refresh-end="eventHandler()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
||
| rangeSelectionChanging | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" on-range-selection-changing="eventHandler()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
||
| rangeSelectionChanged | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" on-range-selection-changed="eventHandler()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
||
Methods |
||
| refresh | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
var result = instance["refresh"]();
}
</script>
}
|
||
| update | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
var result = instance["update"]();
}
</script>
}
|
||
| destroy | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
var result = instance["destroy"]();
}
</script>
}
|
||
| addColorScheme | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["addColorScheme"](scheme99,['#722694', '#AA4643', '#89A54E', '#71588F', '#4198AF']);
}
</script>
}
|
||
| removeColorScheme | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["removeColorScheme"](scheme01);
}
</script>
}
|
||
| getItemsCount | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["getItemsCount"](0,1,0);
}
</script>
}
|
||
| getItemCoord | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["getItemCoord"](0,1,0);
}
</script>
}
|
||
| getXAxisRect | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["getXAxisRect"](0);
}
</script>
}
|
||
| getXAxisLabels | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["getXAxisLabels"](0);
}
</script>
}
|
||
| getValueAxisRect | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["getValueAxisRect"](0);
}
</script>
}
|
||
| getValueAxisLabels | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["getValueAxisLabels"](0);
}
</script>
}
|
||
| getColorScheme | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["getColorScheme"]('scheme01');
}
</script>
}
|
||
| hideSerie | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["hideSerie"](0,1,0);
}
</script>
}
|
||
| showSerie | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["showSerie"](0,1,0);
}
</script>
}
|
||
| hideToolTip | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["hideToolTip"](100);
}
</script>
}
|
||
| showToolTip | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["showToolTip"](0,0,0,100,100);
}
</script>
}
|
||
| saveAsJPEG | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["saveAsJPEG"]('chartImage.jpeg','http://myServer.com');
}
</script>
}
|
||
| saveAsPNG | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["saveAsPNG"]('chartImage.png','http://myServer.com');
}
</script>
}
|
||
| saveAsPDF | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["saveAsPDF"]('chartImage.pdf','http://myServer.com');
}
</script>
}
|
||
| getXAxisValue | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["getXAxisValue"](10,0);
}
</script>
}
|
||
| getValueAxisValue | Method | |
<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
DateTime minDate = new DateTime(2012, 1, 1);
DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function labelsCustomFormatFn (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function rangeSelectorLabelsCustomFormatFn(value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
};
function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
<jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
<jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
<jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-range-selector>
<jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
</jqx-chart-x-axis>
<jqx-chart-value-axis text="Price per share [USD]">
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
<jqx-chart-series>
<jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["getValueAxisValue"](10,0);
}
</script>
}
|
||