Skip to content

chartjs-chart-financial.js intergrate #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

chartjs-chart-financial.js intergrate #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
819f23d
implement candlestick chart
wkdu41 Jan 2, 2020
e7911ba
update financial types
Jong-uk-Kim Jan 5, 2020
2148a20
change x-value type to moment from DateTime
wkdu41 Jan 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ChartJs.Blazor.sln
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{08E01108-AF6
EndProject
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "samples", "samples", "{5474F748-8E27-4FD6-AD9D-1087578ED4D7}"
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ChartJs.Blazor", "src\ChartJs.Blazor\ChartJs.Blazor.csproj", "{1990A3D7-7B00-469F-BC97-F614393F7A52}"
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ChartJs.Blazor", "src\ChartJs.Blazor\ChartJs.Blazor.csproj", "{1990A3D7-7B00-469F-BC97-F614393F7A52}"
EndProject
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "ClientSide", "ClientSide", "{474E0BD0-B8C0-4A00-9B05-B1B33F3B7C94}"
EndProject
Expand Down
3 changes: 3 additions & 0 deletions ...ClientSide/ChartJs.Blazor.Sample.ClientSide/Pages/FinancialChart/FinancialChartPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@page "/FinancialChart"

<ChartJs.Blazor.Sample.Shared.Components.FinancialCharts.FinancialChartComponent />
179 changes: 92 additions & 87 deletions samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Shared/NavMenu.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,93 +6,98 @@
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="welcome">
<span class="oi oi-home" aria-hidden="true"></span>Welcome
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="SimpleBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Simple BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="HorizontalBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Horizontal BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="StackedBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Stacked BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="TimeBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Time BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="LinearLineChart">
<span class="oi oi-graph" aria-hidden="true"></span>Linear LineChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="LogarithmicLineChart">
<span class="oi oi-graph" aria-hidden="true"></span>Logarithmic LineChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="TimeLineChart">
<span class="oi oi-graph" aria-hidden="true"></span>Time LineChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="DoughnutChart">
<span class="oi oi-graph" aria-hidden="true"></span>DoughChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="PieChart">
<span class="oi oi-pie-chart" aria-hidden="true"></span>PieChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="PolarAreaChart">
<span class="oi oi-graph" aria-hidden="true"></span>PolarAreaChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="BubbleChart">
<span class="oi oi-graph" aria-hidden="true"></span>Bubble Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="ScatterChart">
<span class="oi oi-graph" aria-hidden="true"></span>Scatter Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="RadarChart">
<span class="oi oi-graph" aria-hidden="true"></span>Radar Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="OnClickHandler">
<span class="oi oi-info" aria-hidden="true"></span>OnClickHandler
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="SineLineChart">
<span class="oi oi-info" aria-hidden="true"></span>Sine Line Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="about">
<span class="oi oi-info" aria-hidden="true"></span>About
</NavLink>
</li>
</ul>
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="welcome">
<span class="oi oi-home" aria-hidden="true"></span>Welcome
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="SimpleBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Simple BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="HorizontalBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Horizontal BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="StackedBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Stacked BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="TimeBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Time BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="LinearLineChart">
<span class="oi oi-graph" aria-hidden="true"></span>Linear LineChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="LogarithmicLineChart">
<span class="oi oi-graph" aria-hidden="true"></span>Logarithmic LineChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="TimeLineChart">
<span class="oi oi-graph" aria-hidden="true"></span>Time LineChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="DoughnutChart">
<span class="oi oi-graph" aria-hidden="true"></span>DoughChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="PieChart">
<span class="oi oi-pie-chart" aria-hidden="true"></span>PieChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="PolarAreaChart">
<span class="oi oi-graph" aria-hidden="true"></span>PolarAreaChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="BubbleChart">
<span class="oi oi-graph" aria-hidden="true"></span>Bubble Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="ScatterChart">
<span class="oi oi-graph" aria-hidden="true"></span>Scatter Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="RadarChart">
<span class="oi oi-graph" aria-hidden="true"></span>Radar Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="OnClickHandler">
<span class="oi oi-info" aria-hidden="true"></span>OnClickHandler
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="SineLineChart">
<span class="oi oi-info" aria-hidden="true"></span>Sine Line Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="FinancialChart">
<span class="oi oi-info" aria-hidden="true"></span>Financial chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="about">
<span class="oi oi-info" aria-hidden="true"></span>About
</NavLink>
</li>
</ul>
</div>

@code {
Expand Down
32 changes: 17 additions & 15 deletions samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/wwwroot/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,30 @@
<link href="css/site.css" rel="stylesheet"/>
</head>
<body>
<app>Loading...</app>
<app>Loading...</app>

<script src="_framework/blazor.webassembly.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

<!-- Here I'm referencing the static resources from the library -->
<!-- In case you need another version of any of the included javascript files, you can adjust the script tags to include the version you need, e.g. from a CDN or your wwwroot directory. -->
<!-- Since ChartJs is dependent on moment.js, it is important to first include the reference to moment.js and then to ChartJs -->
<!-- Here I'm referencing the static resources from the library -->
<!-- In case you need another version of any of the included javascript files, you can adjust the script tags to include the version you need, e.g. from a CDN or your wwwroot directory. -->
<!-- Since ChartJs is dependent on moment.js, it is important to first include the reference to moment.js and then to ChartJs -->
<!-- Reference the included moment.js javascript file. -->
<script src="_content/ChartJs.Blazor/moment-with-locales.min.js" type="text/javascript" language="javascript"></script>

<!-- Reference the included moment.js javascript file. -->
<script src="_content/ChartJs.Blazor/moment-with-locales.min.js" type="text/javascript" language="javascript"></script>
<!-- Reference the included ChartJs javascript file. -->
<script src="_content/ChartJs.Blazor/Chart.min.js" type="text/javascript" language="javascript"></script>

<!-- Reference the included ChartJs javascript file. -->
<script src="_content/ChartJs.Blazor/Chart.min.js" type="text/javascript" language="javascript"></script>
<!-- Reference the included ChartJs-financial extension javascript file. -->
<script src="_content/ChartJs.Blazor/chartjs-chart-financial.js" type="text/javascript" language="javascript"></script>

<!-- This is the glue between the C# code and the ChartJs charts -->
<script src="_content/ChartJs.Blazor/ChartJsBlazorInterop.js" type="text/javascript" language="javascript"></script>
<!-- This is the glue between the C# code and the ChartJs charts -->
<script src="_content/ChartJs.Blazor/ChartJsBlazorInterop.js" type="text/javascript" language="javascript"></script>

<!-- Some styling -->
<link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css"/>
<!-- Some styling -->
<link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css" />

<!-- OPTIONAL: some local interop -->
<script src="SampleInterop.js" type="text/javascript" language="JavaScript"></script>
<!-- OPTIONAL: some local interop -->
<script src="SampleInterop.js" type="text/javascript" language="JavaScript"></script>

</body>
</html>
3 changes: 3 additions & 0 deletions ...ServerSide/ChartJs.Blazor.Sample.ServerSide/Pages/FinancialChart/FinancialChartPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@page "/FinancialChart"

<ChartJs.Blazor.Sample.Shared.Components.FinancialCharts.FinancialChartComponent/>
36 changes: 19 additions & 17 deletions samples/ServerSide/ChartJs.Blazor.Sample.ServerSide/Pages/_Host.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,31 @@
<link href="css/site.css" rel="stylesheet"/>
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>

<script src="_framework/blazor.server.js"></script>
<script src="_framework/blazor.server.js"></script>

<!-- Here I'm referencing the static resources from the library -->
<!-- In case you need another version of any of the included javascript files, you can adjust the script tags to include the version you need, e.g. from a CDN or your wwwroot directory. -->
<!-- Since ChartJs is dependent on moment.js, it is important to first include the reference to moment.js and then to ChartJs -->
<!-- Here I'm referencing the static resources from the library -->
<!-- In case you need another version of any of the included javascript files, you can adjust the script tags to include the version you need, e.g. from a CDN or your wwwroot directory. -->
<!-- Since ChartJs is dependent on moment.js, it is important to first include the reference to moment.js and then to ChartJs -->
<!-- Reference the included moment.js javascript file. -->
<script src="_content/ChartJs.Blazor/moment-with-locales.min.js" type="text/javascript" language="javascript"></script>

<!-- Reference the included moment.js javascript file. -->
<script src="_content/ChartJs.Blazor/moment-with-locales.min.js" type="text/javascript" language="javascript"></script>
<!-- Reference the included ChartJs javascript file. -->
<script src="_content/ChartJs.Blazor/Chart.min.js" type="text/javascript" language="javascript"></script>

<!-- Reference the included ChartJs javascript file. -->
<script src="_content/ChartJs.Blazor/Chart.min.js" type="text/javascript" language="javascript"></script>
<!-- Reference the included ChartJs-financial extension javascript file. -->
<script src="_content/ChartJs.Blazor/chartjs-chart-financial.js" type="text/javascript" language="javascript"></script>

<!-- This is the glue between the C# code and the ChartJs charts -->
<script src="_content/ChartJs.Blazor/ChartJsBlazorInterop.js" type="text/javascript" language="javascript"></script>
<!-- This is the glue between the C# code and the ChartJs charts -->
<script src="_content/ChartJs.Blazor/ChartJsBlazorInterop.js" type="text/javascript" language="javascript"></script>

<!-- Some styling -->
<link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css"/>
<!-- Some styling -->
<link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css" />

<!-- OPTIONAL: some local interop -->
<script src="SampleInterop.js" type="text/javascript" language="JavaScript"></script>
<!-- OPTIONAL: some local interop -->
<script src="SampleInterop.js" type="text/javascript" language="JavaScript"></script>
</body>
</html>
Loading