Package: chartkick
Chartkick.pyCreate beautiful JavaScript charts with one line of Python. No more fighting with charting libraries!See it in actionChartkick.py 1.0 was recently released- seehow to upgradeQuick StartRun:pipinstallchartkickThen follow the instructions for your web framework:DjangoFlaskThis sets up Chartkick withChart.js. For other charting libraries, seethese instructions.DjangoAdd toINSTALLED_APPSinsettings.pyINSTALLED_APPS=['chartkick.django',# ...]Load the JavaScript{%loadstatic%}<script src="{%static'chartkick/Chart.bundle.js'%}"></script><script src="{%static'chartkick/chartkick.js'%}"></script>Create a chart in a viewfromchartkick.djangoimportPieChartdefindex(request):chart=PieChart({'Blueberry':44,'Strawberry':23})returnrender(request,'home/index.html',{'chart':chart})And add it to the template{{chart}}FlaskRegister the blueprintfromchartkick.flaskimportchartkick_blueprintapp.register_blueprint(chartkick_blueprint)Load the JavaScript<script src="{{url_for('chartkick.static',filename='Chart.bundle.js')}}"></script><script src="{{url_for('chartkick.static',filename='chartkick.js')}}"></script>Create a chart in a routefromchartkick.flaskimportPieChartdefindex():chart=PieChart({'Blueberry':44,'Strawberry':23})returnrender_template('home/index.html',chart=chart)And add it to the template{{chart}}ChartsLine chartLineChart({'2023-01-01':11,'2023-01-02':6})Pie chartPieChart({'Blueberry':44,'Strawberry':23})Column chartColumnChart({'Sun':32,'Mon':46,'Tue':28})Bar chartBarChart({'Work':32,'Play':1492})Area chartAreaChart({'2021-01-01':11,'2021-01-02':6})Scatter chartScatterChart([[174.0,80.0],[176.5,82.3]],xtitle='Size',ytitle='Population')Geo chart -Google ChartsGeoChart({'United States':44,'Germany':23,'Brazil':22})Timeline -Google ChartsTimeline([['Washington','1789-04-29','1797-03-03'],['Adams','1797-03-03','1801-03-03']])Multiple seriesdata=[{'name':'Workout','data':{'2021-01-01':3,'2021-01-02':4}},{'name':'Call parents','data':{'2021-01-01':5,'2021-01-02':3}}]LineChart(data)DataData can be a dictionary, list, or URL.DictionaryLineChart({'2023-01-01':2,'2023-01-02':3})ListLineChart([['2023-01-01',2],['2023-01-02',3]])URLMake your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.LineChart('/charts/tasks')OptionsWidth and heightLineChart(data,width='800px',height='500px')Min and max valuesLineChart(data,min=1000,max=5000)mindefaults to 0 for charts with non-negative values. UseNoneto let the charting library decide.Min and max for x-axis -Chart.jsLineChart(data,xmin='2021-01-01',xmax='2022-01-01')ColorsLineChart(data,colors=['#b00','#666'])Stacked columns or barsColumnChart(data,stacked=True)Discrete axisLineChart(data,discrete=True)Label (for single series)LineChart(data,label='Value')Axis titlesLineChart(data,xtitle='Time',ytitle='Population')Straight lines between points instead of a curveLineChart(data,curve=False)Hide pointsLineChart(data,points=False)Show or hide legendLineChart(data,legend=False)Specify legend positionLineChart(data,legend='bottom')Donut chartPieChart(data,donut=True)Prefix, useful for currency -Chart.js, HighchartsLineChart(data,prefix='$')Suffix, useful for percentages -Chart.js, HighchartsLineChart(data,suffix='%')Set a thousands separator -Chart.js, HighchartsLineChart(data,thousands=',')Set a decimal separator -Chart.js, HighchartsLineChart(data,decimal=',')Set significant digits -Chart.js, HighchartsLineChart(data,precision=3)Set rounding -Chart.js, HighchartsLineChart(data,round=2)Show insignificant zeros, useful for currency -Chart.js, HighchartsLineChart(data,round=2,zeros=True)Friendly byte sizes -Chart.jsLineChart(data,bytes=True)Specify the message when data is loadingLineChart(data,loading='Loading...')Specify the message when data is emptyLineChart(data,empty='No data')Refresh data from a remote source everynsecondsLineChart(url,refresh=60)You can pass options directly to the charting library with:LineChart(data,library={'backgroundColor':'#eee'})See the documentation forChart.js,Google Charts, andHighchartsfor more info.To customize datasets in Chart.js, use:LineChart(data,dataset={'borderWidth':10})You can pass this option to individual series as well.Multiple SeriesYou can pass a few options with a series:namedatacolordataset-Chart.js onlypoints-Chart.js onlycurve-Chart.js onlyCodeIf you want to use the charting library directly, get the code with:LineChart(data,code=True)The code will be logged to the JavaScript console. JavaScript functions cannot be logged, so it may not be identical.Download ChartsChart.js onlyGive users the ability to download charts. It all happens in the browser - no server-side code needed.LineChart(data,download=True)Safari will open the image in a new window instead of downloading.Set the filenameLineChart(data,download={'filename':'boom'})Set the background colorLineChart(data,download={'background':'#ffffff'})Set titleLineChart(data,title='Awesome chart')Additional Charting LibrariesGoogle ChartsHighchartsGoogle ChartsLoad the JavaScriptDjango{%loadstatic%}<script src="https://www.gstatic.com/charts/loader.js"></script><script src="{%static'chartkick/chartkick.js'%}"></script>Flask<script src="https://www.gstatic.com/charts/loader.js"></script><script src="{{url_for('chartkick.static',filename='chartkick.js')}}"></script>HighchartsDownloadhighcharts.jsand load the JavaScriptDjango{%loadstatic%}<script src="{%static'highcharts.js'%}"></script><script src="{%static'chartkick/chartkick.js'%}"></script>Flask<script src="{{url_for('static',filename='highcharts.js')}}"></script><script src="{{url_for('chartkick.static',filename='chartkick.js')}}"></script>Multiple LibrariesIf more than one charting library is loaded, choose between them with:LineChart(data,adapter='google')# or highcharts or chartjsCreditsA big thanks toMher Movsisyanfor creating theinitial version.Upgrading1.0For Django, changechartkicktochartkick.djangounderINSTALLED_APPSinsettings.pyand removechartkick.js()fromSTATICFILES_DIRS. Then update charts to use classes.fromchartkick.djangoimportLineChartLineChart({'2023-01-01':11,'2023-01-02':6})For Flask, switch to theincluded blueprint(available in 1.0.1). Then update charts to use classes.fromchartkick.flaskimportLineChartLineChart({'2023-01-01':11,'2023-01-02':6})HistoryView thechangelogContributingEveryone is encouraged to help improve this project. Here are a few ways you can help:Report bugsFix bugs andsubmit pull requestsWrite, clarify, or fix documentationSuggest or add new featuresTo get started with development:gitclonehttps://github.com/ankane/chartkick.py.gitcdchartkick.py
pipinstall-rrequirements.txt
pytest