{"id":13500844,"url":"https://github.com/agiliq/django-graphos","last_synced_at":"2025-10-26T12:03:05.227Z","repository":{"id":2980152,"uuid":"3995902","full_name":"agiliq/django-graphos","owner":"agiliq","description":"Django charting made *really* easy.","archived":false,"fork":false,"pushed_at":"2021-06-22T08:28:17.000Z","size":1343,"stargazers_count":439,"open_issues_count":44,"forks_count":98,"subscribers_count":50,"default_branch":"master","last_synced_at":"2025-04-03T15:09:30.812Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://agiliq.com/demo/graphos","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agiliq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-04-11T17:00:29.000Z","updated_at":"2025-02-12T06:55:49.000Z","dependencies_parsed_at":"2022-08-06T13:00:40.813Z","dependency_job_id":null,"html_url":"https://github.com/agiliq/django-graphos","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agiliq%2Fdjango-graphos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agiliq%2Fdjango-graphos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agiliq%2Fdjango-graphos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agiliq%2Fdjango-graphos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agiliq","download_url":"https://codeload.github.com/agiliq/django-graphos/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586244,"owners_count":21128996,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T22:01:16.209Z","updated_at":"2025-10-26T12:03:00.184Z","avatar_url":"https://github.com/agiliq.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Graphos\n----------------\n\n[![Build Status](https://travis-ci.org/agiliq/django-graphos.png)](https://travis-ci.org/agiliq/django-graphos)\n\nGraphos is a Django app to normalize data to create beautiful charts. It provides a JS agnostic way to work with charts and allows seamless and quick switching between different chart providers.\n\n* Demo: [http://agiliq.com/demo/graphos/](http://agiliq.com/demo/graphos/).\n* Docs: [http://agiliq.com/docs/django-graphos/](http://agiliq.com/docs/django-graphos/).\n\n### Supported Backends:\n\n* Python Nested lists\n* Django ORM\n* CSV Files\n* MongoDB\n\n### Charting API Supported\n\n* [Flot](http://flotcharts.org)\n* [Google Charts API](https://developers.google.com/chart/)\n* [YUI Charts](http://yuilibrary.com/yui/docs/charts/)\n* [Morris.js](http://morrisjs.github.io/morris.js/)\n* [Highcharts](http://www.highcharts.com/)\n* [Matplotlib](http://matplotlib.org/api/pyplot_api.html)\n\n### Chart types supported\n\n#### Flot\n\n* Line chart\n* Bar Chart\n* Column chart\n* Pie chart\n* Point Chart\n\n#### Google Charts\n\n* Line chart\n* Bar chart\n* Column chart\n* Pie chart\n* Area chart\n* Candlestick chart\n* Treemap chart\n* Gauge chart\n\n#### YUI\n\n* Line chart\n* Bar chart\n* Column chart\n* Pie chart\n* Area chart\n* Spline chart\n* Areaspline chart\n\n#### Morris.js\n\n* Line chart\n* Bar chart\n* Donut chart\n* Area chart\n\n#### Highcharts\n\n(You will need to buy a license if you use highcharts for commerical use)\n\n* Line Chart\n* Bar Chart\n* Column Chart\n* Pie Chart\n* Area Chart\n\n#### C3.js\n\n* Line chart\n* Column chart (You need to rotate the axis of bar chart to render column chart)\n* Bar chart\n* Donut chart\n* Pie chart\n* Spline chart\n\n#### Matplotlib\n\n* LineChart\n* BarChart\n\nWith Graphos, switching from google's LineChart to yui LineChart can be done within minutes. So would be the case in switching from yui AreaChart to morris AreaChart.\n\n### Running demo project locally\n\n* Clone the project\n\n\tgit clone https://github.com/agiliq/django-graphos.git\n\n* Cd to demo directory\n\n\tcd django-graphos/demo_project/\n\n* Create local settings.\n\n\tcp demo_project/settings/local.py-dist demo_project/settings/local.py\n\n* Install requirements\n\n\tpip install -r requirements.txt\n\n* Run migrate\n\n\tpython manage.py migrate\n\n* Run server\n\n\tpython manage.py runserver\n\nThe installed demo app shows the various suported chart types.\n\nIn case you want to use mongo data while charting, you must have mongodb properly setup and **pymongo** installed. Make sure mongo server is running.\n\n\tmongod --dbpath ~/data/db\n\nMongo setup is optional and is not needed to get running with demo project.\n\n\n### Overview of Plot generation\n\nGenerating a plot requires two things. A DataSource object and a Chart object.\n\nIn your view, you do something like this:\n\n\tfrom graphos.sources.simple import SimpleDataSource\n\tfrom graphos.renderers.gchart import LineChart\n\n    data =  [\n            ['Year', 'Sales', 'Expenses'],\n            [2004, 1000, 400],\n            [2005, 1170, 460],\n            [2006, 660, 1120],\n            [2007, 1030, 540]\n        ]\n    # DataSource object\n    data_source = SimpleDataSource(data=data)\n    # Chart object\n    chart = LineChart(data_source)\n    context = {'chart': chart}\n    return render(request, 'yourtemplate.html', context)\n\nAnd then in the template:\n\n    {{ chart.as_html }}\n\nIn this example we are planning to use Google chart, as is evident from the import statement in the view, we import gchart.LineChart. So we must also include the google chart javascript in our template.\n\n    \u003cscript type=\"text/javascript\" src=\"https://www.google.com/jsapi\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n        google.load(\"visualization\", \"1\", {packages:[\"corechart\"]});\n    \u003c/script\u003e\n\nSo the template would look like\n\n    \u003cscript type=\"text/javascript\" src=\"https://www.google.com/jsapi\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n        google.load(\"visualization\", \"1\", {packages:[\"corechart\"]});\n    \u003c/script\u003e\n\n    {{ chart.as_html }}\n\nIf we want to use yui LineChart instead of google LineChart, our view would have:\n\n\tfrom graphos.renderers.yui import LineChart\n    chart = LineChart(data_source)\n\nAnd our template would inclue yui javascript and it would look like:\n\n\t\u003cscript src=\"http://yui.yahooapis.com/3.10.0/build/yui/yui-min.js\"\u003e\u003c/script\u003e\n    {{ chart.as_html }}\n\nSee, how easy it was to switch from gchart to yui. You did not have to write or change a single line of javascript to switch from gchart to yui. All that was taken care of by as_html() of the chart object.\n\n### DataSources\n\n#### SimpleDataSource\n\nThis should be used if you want to generate a chart from Python list.\n\n    from graphos.sources.simple import SimpleDataSource\n    data = SimpleDataSource(data=data)\n\nData could be:\n\n    data = [\n           ['Year', 'Sales', 'Expenses', 'Items Sold', 'Net Profit'],\n           ['2004', 1000, 400, 100, 600],\n           ['2005', 1170, 460, 120, 710],\n           ['2006', 660, 1120, 50, -460],\n           ['2007', 1030, 540, 100, 490],\n           ]\n\nor it could be\n\n    data = [\n           ['Year', 'Sales', 'Expenses'],\n           ['2004', 1000, 400],\n           ['2005', 1170, 460],\n           ['2006', 660, 1120],\n           ['2007', 1030, 540],\n           ]\n\nor it could be\n\n    data = [\n           ['Year', 'Sales', 'Expenses'],\n           ['2004', 1000, 400],\n           ['2005', 1170, 460],\n           ]\n\nYou got the idea.\n\ndata has to be a list of lists. First row of data tells the headers. First element of each list elementis the x axis.\n\nThis data essentially tells that in year 2004, sales was 1000 units and expense was 400 units. And in year 2005, sales was 1170 units and expense was 460 units.\n\n#### ModelDataSource\n\nThis should be used if you want to generate a chart from a Django queryset.\n\n\tfrom graphos.sources.model import ModelDataSource\n\tqueryset = Account.objects.all()\n\tdata_source = ModelDataSource(queryset,\n\t\t\t\t\t\t\t\t  fields=['year', 'sales'])\n\nThis assumes that there is a Django model called Account which has fields `year` and `sales`. And you plan to plot year on x axis and sales on y axis.\n\nOr you could say\n\n\tdata_source = ModelDataSource(queryset,\n\t\t\t\t\t\t\t\t  fields=['year', 'sales', 'expenses'])\n\nThis would plot the yearly sale and yearly expense\n\n#### CSVDataSource\n\nThis should be used if you want to generate a chart from a CSV file.\n\n    from graphos.sources.csv_file import CSVDataSource\n    csv_file = open(\"hello.csv\")\n    data_source = CSVDataSource(csv_file)\n\n#### MongoDataSource\n\nTODO\n\n### Charts\n\nWe have following charts\n\n* Gchart\n\n    * gchart.LineChart\n    * gchart.BarChart\n    * gchart.ColumnChart\n    * gchart.PieChart\n    * gchart.AreaChart\n    * gchart.TreeMapChart\n    * gchart.CandlestickChart\n    * gchart.GaugeChart\n\n* Yui\n\n    * yui.LineChart\n    * yui.BarChart\n    * yui.ColumnChart\n    * yui.PieChart\n    * yui.AreaChart\n    * yui.SplineChart\n    * yui.AreaSplineChart\n\n* Flot\n\n    * flot.LineChart\n    * flot.BarChart\n    * flot.ColumnChart\n    * flot.PieChart\n    * flot.PointChart\n\n* Morris\n\n    * morris.LineChart\n    * morris.BarChart\n    * morris.AreaChart\n    * morris.DonutChart\n\n* Highcharts\n\n    * highcharts.LineChart\n    * highcharts.BarChart\n    * highcharts.ColumnChart\n    * highcharts.PieChart\n    * highcharts.AreaChart\n\nMost of the chart providers support LineChart, BarChart, ColumnChart and PieChart, and it is very easy to switch from specific chart type of one provider to other. eg: It is super quick to switch from gchart LineChart to flot LineChart.\n\n### More Examples\n\n#### Using SimpleDataSource with gchart LineChart\n\n##### View\n\n    data =  [\n            ['Year', 'Sales', 'Expenses'],\n            [2004, 1000, 400],\n            [2005, 1170, 460],\n            [2006, 660, 1120],\n            [2007, 1030, 540]\n        ]\n    from graphos.sources.simple import SimpleDataSource\n    from graphos.renderers.gchart import LineChart\n    chart = LineChart(SimpleDataSource(data=data))\n\n##### Template\n\n    \u003cscript type=\"text/javascript\" src=\"https://www.google.com/jsapi\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n        google.load(\"visualization\", \"1\", {packages:[\"corechart\"]});\n    \u003c/script\u003e\n\n    {{ chart.as_html }}\n\n#### Using SimpleDataSource with yui LineChart\n\n##### View\n\n    data =  [\n            ['Year', 'Sales', 'Expenses'],\n            [2004, 1000, 400],\n            [2005, 1170, 460],\n            [2006, 660, 1120],\n            [2007, 1030, 540]\n        ]\n    from graphos.sources.simple import SimpleDataSource\n    from graphos.renderers.yui import LineChart\n    chart = LineChart(SimpleDataSource(data=data))\n\n##### Template\n\n\t\u003cscript src=\"http://yui.yahooapis.com/3.10.0/build/yui/yui-min.js\"\u003e\u003c/script\u003e\n    {{ chart.as_html }}\n\n#### Using SimpleDataSource with yui BarChart\n\n##### View\n\n    data =  [\n            ['Year', 'Sales', 'Expenses'],\n            [2004, 1000, 400],\n            [2005, 1170, 460],\n            [2006, 660, 1120],\n            [2007, 1030, 540]\n        ]\n    from graphos.sources.simple import SimpleDataSource\n    from graphos.renderers.yui import BarChart\n    chart = BarChart(SimpleDataSource(data=data))\n\n##### Template\n\n\t\u003cscript src=\"http://yui.yahooapis.com/3.10.0/build/yui/yui-min.js\"\u003e\u003c/script\u003e\n    {{ chart.as_html }}\n\n#### Using SimpleDataSource with gchart BarChart\n\n##### View\n\n    data =  [\n            ['Year', 'Sales', 'Expenses'],\n            [2004, 1000, 400],\n            [2005, 1170, 460],\n            [2006, 660, 1120],\n            [2007, 1030, 540]\n        ]\n    from graphos.sources.simple import SimpleDataSource\n    from graphos.renderers.gchart import BarChart\n    chart = BarChart(SimpleDataSource(data=data))\n\n##### Template\n\n    \u003cscript type=\"text/javascript\" src=\"https://www.google.com/jsapi\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n        google.load(\"visualization\", \"1\", {packages:[\"corechart\"]});\n    \u003c/script\u003e\n    {{ chart.as_html }}\n\n### Options\n\nYour rendered chart is contained in a div.\n\n#### Setting id of chart containing div\n\nYou might want to do additional jquery or javascript operations with your chart containing div. In such case you might want to set an id on the div. You can do this while instantiating the chart element.\n\n    chart = gchart.LineChart(html_id='gchart_div')\n\n#### Setting width and height of chart containing div\n\nYou can control the width and height of chart containing div while instantiating the chart element.\n\n    chart = gchart.LineChart(simple_data_source, height=100, width=100)\n\n#### Chart specific options\n\nDifferent chart providers give different options to customise the chart.\n\nGoogle chart api allows setting title for the rendered chart, see [Gchart documentation](https://developers.google.com/chart/interactive/docs/quick_start), using `title` attribute. You can accomplish this by adding a keyword argument called `options` while instantiating the chart element.\n\n    chart = gchart.LineChart(simple_data_source, height=100, width=100, options={'title': 'Sales growth'})\n\nGoogle pie chart allows making the chart as 3 dimensional. You can accomplish this by using keyword argument `options`.\n\n    pie_chart = gchart.PieChart(simple_data_source, options={'is3D': True})\n\nMorris.js allows options like lineWidth, smooth etc. You can find more [here](http://morrisjs.github.io/morris.js/lines.html#lines). You can accomplish this by using `options`.\n\n\tchart = morris.LineChart(simple_data_source, options={'lineWidth': 50, 'smooth': False})\n\n### Installation\n\npip install django-graphos\n\n### Compatibility\n\nGraphos is compatible with Python 2.7 and Python 3.3+\n\n[available on pypi](https://pypi.python.org/pypi/django-graphos/)\n\n\n### Handling non serializable fields\n\nYou need to override get_data() of existing DataSource and convert datetime field into something which could be serialized.\n\nAssuming you are using a Python list as data, then you need to do:\n\n    from graphos.sources.simple import SimpleDataSource\n    class MySimpleDataSource(SimpleDataSource):\n\t\tdef get_data(self):\n\t\t\tdata = super(MySimpleDataSource, self).get_data()\n\t\t\theader = data[0]\n\t\t\tdata_without_header = data[1:]\n\t\t\tfor row in data_without_header:\n\t\t\t\t# Assuming first column contains datetime\n\t\t\t\trow[0] = row[0].year\n\t\t\tdata_without_header.insert(0, header)\n\t\t\treturn data_without_header\n\nAnd data has\n\n    d1 = datetime(2015, 7, 8, 1, 1)\n    d2 = datetime(2016, 7, 8, 3, 1)\n\n    data1 = [\n             ['Year', 'Sales', 'Expenses', 'Items Sold', 'Net Profit'],\n             [d1, 1000, 400, 100, 600],\n             [d2, 1170, 460, 120, 310],\n     ]\n\n    chart = flot.LineChart(MySimpleDataSource(data=data1))\n\nIf you are planning to use queryset with ModelDataSource, then you would create following class\n\n    from graphos.sources.model import ModelDataSource\n    class MyModelDataSource(ModelDataSource):\n        def get_data(self):\n            data = super(MyModelDataSource, self).get_data()\n            header = data[0]\n            data_without_header = data[1:]\n            for row in data_without_header:\n                # Assuming second column contains datetime\n                row[1] = row[1].year\n\t\t\tdata_without_header.insert(0, header)\n\t\t\treturn data_without_header\n\nAnd you would use this class like:\n\n    queryset = Account.objects.all()\n    chart = flot.LineChart(MyModelDataSource(queryset=queryset, fields=['sales', 'datetime_field','expenses']))\n\n### Creating new DataSource\n\nA DataSource is a class which has these three methods.\n\n    get_data\n    get_header\n    get_first_column\n\n`get_header` is used by a `Renderer` to create the labels.\n`get_first_column` is used to set the x axis labels\n`get_data` is used to get the data for display. It should always return a nested list. Eg:\n\n    [\n        ['Year', 'Sales', 'Expenses'],\n        [2004, 1000, 400],\n        [2005, 1170, 460],\n        [2006, 660, 1120],\n        [2007, 1030, 540]\n    ]\n\nIf you create a class extending `SimpleDataSource`, and implement `get_data`. You get\n`get_header` and `get_first_column` for free.\n\n### Creating new Renderer\n\nA renderer is a class which takes a  `DataSource` and can convert it to the html to display.\n\nThe only required method on a `Renderer` is `as_html`. This will convert the data to a format which can display the chart.\n\nGenerally you will convert the data to json and pass it to the template which you return.\n\n\n### License\n\nBSD\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagiliq%2Fdjango-graphos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagiliq%2Fdjango-graphos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagiliq%2Fdjango-graphos/lists"}