Stock Events
17 Feb 202224 minutes to read
Stock Events visualizes stockevents in stockchart. ‘SplineSeries’ is used to represent selected data value. You can customize the specific data value using stockEvents event.
<ejs-stockchart id="stockchartspline" load="chartLoad" seriesType="series" indicatorType="indicator" trendlineType="trendline" title="AAPL Stock Price">
<e-stockchart-series-collection>
<e-stockchart-series type='Spline' xName='x' yName="high" name='google' fill="blue" close="high"> </e-stockchart-series>
</e-stockchart-series-collection>
<e-stockchart-crosshairsettings enable="true"></e-stockchart-crosshairsettings>
<e-stockchart-stockevents>
<e-stockchart-stockevent date="new DateTime(2012,03, 01)" text="Q2" description="2012 Quarter2 starts" type="Flag" background="#6c6d6d">
<e-border color="#6c6d6d"></e-border>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2012, 03, 20)" text="Open" description="Markets opened" background="#f48a21">
<e-border color="#f48a21"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2012, 06, 01)" text="Q3" description="2013 Quarter3 starts" type="Flag" background="#6c6d6d">
<e-border color="#6c6d6d"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2012, 09, 01)" text="Q4" description="2013 Quarter4 starts" type="Flag" background="#6c6d6d">
<e-border color="#6c6d6d"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2012, 07, 30)" text="G" description="Google stocks bought" background="#f48a21">
<e-border color="#f48a21"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2012, 10, 01)" text="Y" description="Yahoo stocks sold" type="Square" background="#841391">
<e-border color="#841391"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2012, 12, 01)" text="Y2" description="Year 2013" type="Pin" background="#6322e0" showOnSeries="false">
<e-border color="#6322e0"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2013, 03, 01)" text="Q2" description="2013 Quarter2 starts" type="Flag" background="#6c6d6d">
<e-border color="#6c6d6d"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2013, 03, 20)" text="Q2" description="Surge in Stocks" type="ArrowUp" background="#3ab0f9">
<e-border color="#3ab0f9"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2013, 06, 01)" text="Q3" description="2013 Quarter3 starts" type="Flag" background="#6c6d6d">
<e-border color="#6c6d6d"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2013, 09, 01)" text="Q4" description="2013 Quarter4 starts" type="Flag" background="#6c6d6d">
<e-border color="#6c6d6d"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2013, 12, 0)" text="Y3" description="Year 2014" type="Pin" background="#6322e0" showOnSeries="false">
<e-border color="#6322e0"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2014, 03, 01)" text="Q2" description="2014 Quarter2 starts" type="ArrowDown" background="#3ab0f9">
<e-border color="#3ab0f9"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2014, 06, 01)" text="Q3" description="2014 Quarter3 starts" background="#f48a21">
<e-border color="#f48a21"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2014, 09, 01)" text="Q4" description="2014 Quarter4 starts" type="Flag" background="#6c6d6d">
<e-border color="#6c6d6d"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2014, 12, 0)" text="Y4" description="Year 2015" type="Pin" background="#6322e0" showOnSeries="false">
<e-border color="#6322e0"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2014, 02, 02)" text="End" description="Markets Closed" type="ArrowDown" background="#3ab0f9">
<e-border color="#3ab0f9"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2015-01-07)" text="A" description="This is event description" background="#f48a21">
<e-border color="#f48a21"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2015-01-07)" text="A" description="This is event description" background="#f48a21">
<e-border color="#f48a21"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2015, 01, 02)" text="Q1" description="Add longer text" background="#dd3c9f" type="Text">
<e-border color="#dd3c9f"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2015, 02, 12)" text="Close" description="Markets closed" background="#f48a21">
<e-border color="#f48a21"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
</e-stockchart-stockevents>
</ejs-stockchart>
<script src="~/financial-data.js"></script>
<script>
var data = chartData;
function chartLoad(args) {
args.stockChart.series[0].dataSource = data;
}
</script>using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace EJ2CoreSampleBrowser.Controllers.StockChart
{
public partial class StockChartController : Controller
{
public IActionResult Default()
{
return View();
}
}
}Stock Events for individual series
By default, stock events will be showed for all series. Now, you can set the stock events for particular series using SeriesIndexes property.
<ejs-stockchart id="stockchartspline" load="chartLoad" seriesType="series" indicatorType="indicator" trendlineType="trendline" title="AAPL Stock Price">
<e-stockchart-series-collection>
<e-stockchart-series type='Spline' xName='x' yName="high"> </e-stockchart-series>
<e-stockchart-series type='Spline' xName='x' yName="low"> </e-stockchart-series>
<e-stockchart-series type='Spline' xName='x' yName="open"> </e-stockchart-series>
</e-stockchart-series-collection>
<e-stockchart-crosshairsettings enable="true"></e-stockchart-crosshairsettings>
<e-stockchart-stockevents>
<e-stockchart-stockevent date="new DateTime(2012,03, 01)" text="Q2" description="2012 Quarter2 starts" type="Flag" background="#6c6d6d" seriesIndexes=[0]>
<e-border color="#6c6d6d"></e-border>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2012, 03, 20)" text="Open" description="Markets opened" background="#f48a21" seriesIndexes=[1]>
<e-border color="#f48a21"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2012, 06, 01)" text="Q3" description="2013 Quarter3 starts" type="Flag" background="#6c6d6d" seriesIndexes=[2]>
<e-border color="#6c6d6d"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2012, 09, 01)" text="Q4" description="2013 Quarter4 starts" type="Flag" background="#6c6d6d">
<e-border color="#6c6d6d"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2012, 07, 30)" text="G" description="Google stocks bought" background="#f48a21" seriesIndexes=[0]>
<e-border color="#f48a21"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2012, 10, 01)" text="Y" description="Yahoo stocks sold" type="Square" background="#841391">
<e-border color="#841391"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2012, 12, 01)" text="Y2" description="Year 2013" type="Pin" background="#6322e0" showOnSeries="false" seriesIndexes=[1]>
<e-border color="#6322e0"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2013, 03, 01)" text="Q2" description="2013 Quarter2 starts" type="Flag" background="#6c6d6d" seriesIndexes=[2]>
<e-border color="#6c6d6d"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2013, 03, 20)" text="Q2" description="Surge in Stocks" type="ArrowUp" background="#3ab0f9" seriesIndexes=[0]>
<e-border color="#3ab0f9"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2013, 06, 01)" text="Q3" description="2013 Quarter3 starts" type="Flag" background="#6c6d6d" seriesIndexes=[1]>
<e-border color="#6c6d6d"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2013, 09, 01)" text="Q4" description="2013 Quarter4 starts" type="Flag" background="#6c6d6d" seriesIndexes=[2]>
<e-border color="#6c6d6d"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2013, 12, 0)" text="Y3" description="Year 2014" type="Pin" background="#6322e0" showOnSeries="false">
<e-border color="#6322e0"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2014, 03, 01)" text="Q2" description="2014 Quarter2 starts" type="ArrowDown" background="#3ab0f9">
<e-border color="#3ab0f9"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2014, 06, 01)" text="Q3" description="2014 Quarter3 starts" background="#f48a21" seriesIndexes=[0]>
<e-border color="#f48a21"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2014, 09, 01)" text="Q4" description="2014 Quarter4 starts" type="Flag" background="#6c6d6d" seriesIndexes=[1]>
<e-border color="#6c6d6d"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2014, 12, 0)" text="Y4" description="Year 2015" type="Pin" background="#6322e0" showOnSeries="false">
<e-border color="#6322e0"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2014, 02, 02)" text="End" description="Markets Closed" type="ArrowDown" background="#3ab0f9" seriesIndexes=[2]>
<e-border color="#3ab0f9"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2015-01-07)" text="A" description="This is event description" background="#f48a21">
<e-border color="#f48a21"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2015-01-07)" text="A" description="This is event description" background="#f48a21" seriesIndexes=[0]>
<e-border color="#f48a21"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2015, 01, 02)" text="Q1" description="Add longer text" background="#dd3c9f" type="Text" seriesIndexes=[1]>
<e-border color="#dd3c9f"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
<e-stockchart-stockevent date="new DateTime(2015, 02, 12)" text="Close" description="Markets closed" background="#f48a21" seriesIndexes=[2]>
<e-border color="#f48a21"></e-border>
<e-textstyle color="white"></e-textstyle>
</e-stockchart-stockevent>
</e-stockchart-stockevents>
</ejs-stockchart>
<script src="~/financial-data.js"></script>
<script>
var data = chartData;
function chartLoad(args) {
args.stockChart.series[0].dataSource = data;
}
</script>using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace EJ2CoreSampleBrowser.Controllers.StockChart
{
public partial class StockChartController : Controller
{
public IActionResult Default()
{
return View();
}
}
}