{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# ChartJs\n",
"\n",
"\n",
"Chart from ChartJs [component](00_components.ipynb) in Epyk will be using the property chartJs from the ui.charts property.\n",
"\n",
"the ui entry point will give you access to all the registered components.\n",
"Different flavour of buttons are available in the framework.\n",
"\n",
"**Most of the documentation in the framework is extracted from [ChartJs website](https://www.chartjs.org/). Various links of this website is added to the documentation to ensure you can follow up quickly on more advanced topics and also that you can get the full documentation !**\n",
"\n",
"\n",
"## Available Charts\n",
"\n",
"- [Line Chart](./chartjs/chartjs_line.ipynb)\n",
"- [Time Series Chart](chartjs/chartjs_timeseries.ipynb)\n",
"- [Pie Chart](chartjs/chartjs_pie.ipynb)\n",
"- [Donut Chart](chartjs/chartjs_donut.ipynb)\n",
"- [Area Chart](chartjs/chartjs_area.ipynb)\n",
"- [Step Chart](chartjs/chartjs_step.ipynb)\n",
"- [Bar Chart](chartjs/chartjs_bar.ipynb)\n",
"- [Horizontal Bar Chart](chartjs/chartjs_horizontal_bar.ipynb)\n",
"- [Multi Chart](chartjs/chartjs_multi.ipynb)\n",
"- [Scatter Chart](chartjs/chartjs_scatter.ipynb)\n",
"- [Bubble Chart](chartjs/chartjs_bubble.ipynb)\n",
"- [Polar Chart](chartjs/chartjs_polar.ipynb)\n",
"- [Radar Chart](chartjs/chartjs_radar.ipynb)\n",
"\n",
"## Example of Charts"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 2,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"from epyk.tests import data_urls\n",
"\n",
"rptObj = Report()\n",
"data_rest = rptObj.py.requests.csv(data_urls.PLOTLY_APPLE_PRICES)\n",
"\n",
"ts = rptObj.ui.charts.chartJs.timeseries(data_rest, y_columns=['AAPL.Open'], x_axis=\"Date\")\n",
"\n",
"rptObj.outs.jupyter()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Creating new charts\n",
"\n",
"For any changes or new feature in this library please refer directly to the official docmentation.\n",
"\n",
"For any new bespoke chart it is advice to refer to the [official documentation](https://www.chartjs.org/docs/latest/developers/charts.html) and to get this either included in the official package or to extend the Imports.py module with your bespoke package."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Go back to the Chart Home page\n",
"
\n",
"Do not forget that this is a collaborative framework so do not hesitate to give feedbacks and like the different repository to get more visbility.\n",
"\n",
"Also any help is more than welcome !"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.8.2"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
![](\"./../../static/images/epyklogo_whole_small.png\")
\n",
" \n",
"