{"id":13848963,"url":"https://github.com/ernestoarbitrio/django-highcharts","last_synced_at":"2025-07-12T14:30:46.656Z","repository":{"id":57420359,"uuid":"51332283","full_name":"ernestoarbitrio/django-highcharts","owner":"ernestoarbitrio","description":"Plot graphs with django and highcharts","archived":false,"fork":false,"pushed_at":"2017-11-21T10:22:20.000Z","size":2874,"stargazers_count":49,"open_issues_count":2,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-19T01:51:28.104Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ernestoarbitrio.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":"2016-02-08T22:35:24.000Z","updated_at":"2023-11-15T04:32:27.000Z","dependencies_parsed_at":"2022-09-15T02:50:18.040Z","dependency_job_id":null,"html_url":"https://github.com/ernestoarbitrio/django-highcharts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernestoarbitrio%2Fdjango-highcharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernestoarbitrio%2Fdjango-highcharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernestoarbitrio%2Fdjango-highcharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernestoarbitrio%2Fdjango-highcharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ernestoarbitrio","download_url":"https://codeload.github.com/ernestoarbitrio/django-highcharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225825268,"owners_count":17529905,"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-08-04T19:01:03.274Z","updated_at":"2024-11-22T00:31:35.053Z","avatar_url":"https://github.com/ernestoarbitrio.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## Django Highcharts\n\nThis project starts from a fork of novapost package to\ngenerate charts in your Django application using Highcharts helpers.\n\n- Pie with drilldown charts\n- 3D Pie Options\n- Speedometer charts\n- Multiple Axes charts\n- Area charts\n- Bar charts\n- Heatmap charts\n- Polar Spider web charts\n- HighStock basic charts\n\n* `Source code is on Github \u003chttps://github.com/ernestoarbitrio/django-highcharts\u003e`\n\n### Install\nThere are a few different ways you can install pyechonest:\n\n* Use setuptools: `pip install django-highcharts`\n* Download the zipfile from the [downloads](https://github.com/ernestoarbitrio/django-highcharts/archive/master.zip) page and install it. \n* Checkout the source: `git@github.com:ernestoarbitrio/django-highcharts.git` and install it yourself.\n\nIn your settings file:\n```\nINSTALLED_APPS = [\n   ### other apps ###\n   'highcharts'\n   ### other apps ###\n]\n```\n\nDon’t forget to set your STATIC_ROOT path and to run the following command to update the static files:\n\n`python manage.py collectstatic`\n\nWrite a graph with different series type (in view.py file or if you want in a graph.py file):\n```\nfrom highcharts.views import (HighChartsMultiAxesView, HighChartsPieView,\n                              HighChartsSpeedometerView, HighChartsHeatMapView, HighChartsPolarView)\n                              \nclass BarView(HighChartsMultiAxesView):\n    title = 'Example Bar Chart'\n    subtitle = 'my subtitle'\n    categories = ['Orange', 'Bananas', 'Apples']\n    chart_type = ''\n    chart = {'zoomType': 'xy'}\n    tooltip = {'shared': 'true'}\n    legend = {'layout': 'horizontal', 'align': 'left',\n              'floating': 'true', 'verticalAlign': 'top',\n              'y': -10, 'borderColor': '#e3e3e3'}\n\n    @property\n    def yaxis(self):\n        y_axis = [\n            {'labels': {'format': '{value} pz/sc ', 'style': {'color': '#f67d0a'}},\n             'title': {'text': \"Oranges\", 'style': {'color': '#f67d0a'}},\n             'opposite': 'true'},\n            {'gridLineWidth': 1,\n             'title': {'text': \"Bananas\", 'style': {'color': '#3771c8'}},\n             'labels': {'style': {'color': '#3771c8'}, 'format': '{value} euro'}},\n            {'gridLineWidth': 1,\n             'title': {'text': \"Apples\", 'style': {'color': '#666666'}},\n             'labels': {'format': '{value} pz', 'style': {'color': '#666666'}},\n             'opposite': 'true'}\n        ]\n        return y_axis\n\n    @property\n    def series(self):\n        series = [\n            {\n                'name': 'Orange',\n                'type': 'column',\n                'yAxis': 1,\n                'data': [90,44,55,67,4,5,6,3,2,45,2,3,2,45,5],\n                'tooltip': \"{ valueSuffix: ' euro' }\",\n                'color': '#3771c8'\n            },\n            {\n                'name': 'Bananas',\n                'type': 'spline',\n                'yAxis': 2,\n                'data': [12,34,34,34, 5,34,3,45,2,3,2,4,4,1,23],\n                'marker': { 'enabled': 'true' },\n                'dashStyle': 'shortdot',\n                'color': '#666666',\n                },\n            {\n                'name': 'Apples',\n                'type': 'spline',\n                'data': [12,23,23,23,21,4,4,76,3,66,6,4,5,2,3],\n                'color': '#f67d0a'\n            }\n        ]\n        return series\n```\nif you want you can write a graph based on a particular class of chart. For example if you need a pie chart with drilldown interaction:\n```\nfrom highcharts.views import (HighChartsMultiAxesView, HighChartsPieView,\n                              HighChartsSpeedometerView, HighChartsHeatMapView, HighChartsPolarView)\n\nclass PieDrilldown(HighChartsPieView):\n    title = 'Torta'\n    subtitle = 'torino'\n\n    @property\n    def series(self):\n        series = [\n            {\n                'name': 'Classi',\n                'colorByPoint': 'true',\n                'data': [\n                    {'name': 'Emorroidi',\n                     'y': 10,\n                     'drilldown': 'emorroidi'},\n                    {'name': 'Igiene e bellezza',\n                     'y': 12,\n                     'drilldown': 'igiene'},\n                    {'name': 'Omeopatia',\n                     'y': 8,\n                     'drilldown': 'omeopatia'}\n                ]\n            }\n        ]\n        return series\n\n    @property\n    def drilldown(self):\n        drilldown = {\n            'series': [\n                {'id': 'emorroidi',\n                 'name': 'Emorroidi',\n                 'data': [\n                     ['brand1', 7],\n                     ['brand2', 3],\n                     ['brand3', 5]\n                 ]},\n                {'id': 'igiene',\n                 'name': 'Igiene e Bellezza',\n                 'data': [\n                     ['brand1', 3],\n                     ['brand2', 1],\n                     ['brand3', 4],\n                     ['brand4', 5]\n                 ]},\n                {'id': 'omeopatia',\n                 'name': 'Omeopatia',\n                 'data': [\n                     ['brand1', 3],\n                     ['brand2', 1],\n                     ['brand3', 4],\n                     ['', 0]\n                 ]}\n            ]\n        }\n        return drilldown\n\n       \n```\n\n\nThen you need to map the graph to an url in url.py file:\n```\n   from graphs.py import BarView\n   url(regex='^bar/$', view=BarView.as_view(), name='bar')\n```\n\nIn the template:\n```\n   {% load highcharts_tags %}\n   \u003c!-- enable highcharts scripts --\u003e\n   \u003c!-- highcharts_js (highcharts 3d highstock heatmap) you need to pass 1 or 0 if you want to enable 3d or highstock         etc...--\u003e\n   {% highcharts_js 1 0 0 0 %}\n   \u003c!-- the graph container --\u003e\n   \u003cdiv id=\"container\" style=\"height: 400px; min-width: 310px; max-width: 1200px; margin: 0 auto\"\u003e\u003c/div\u003e\n   \u003c!-- the javascript call --\u003e\n   $(function () {\n       $.getJSON(\"{% url 'bar' %}\", function(data) {\n           $('#container').highcharts(data);\n       });\n   })\n```\n\nAn advanced example with parameters passed via url and data retrived from db (using orm or raw query)\n```\nclass AdvancedGraph(HighChartsMultiAxesView):\n    title = 'Advanced graph'\n    subtitle = 'params and query'\n    chart = {'zoomType': 'xy'}\n    tooltip = {'shared': 'true'}\n    legend = {\n        'layout': 'vertical',\n        'align': 'left',\n        'verticalAlign': 'top',\n        'y': 30\n    }\n\n    def get_data(self):\n        param = self.kwargs['param1']\n        f = MyModel.objects.get(field=param)\n        cursor = connection.cursor()\n        cursor.execute(\"select * from mydbfunction(%s)\" as (outvalues json)\", [f.pk])\n        graph = cursor.fetchall()\n       \n        #### SERIES\n        self.serie = graph[0]\n        \n        ##### X LABELS\n        self.categories = graph[1]\n\n        ##### Y AXIS DEFINITIONS\n        self.yaxis = {\n            'title': {\n                'text': 'Title 1'\n            },\n            'plotLines': [\n                {\n                    'value': 0,\n                    'width': 1,\n                    'color': '#808080'\n                }\n            ]\n        }\n\n        ##### SERIES WITH VALUES\n        self.series = self.serie\n        data = super(AdvancedGraph, self).get_data()\n        return data\n```\nthen in urls.py\nThen you need to map the graph to an url in url.py file:\n```\n   from graphs.py import AdvancedGraph\n   url(regex='^adv/(?P\u003cparam1\u003e\\d+)/$', view=AdvancedGraph.as_view(), name='adv')\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fernestoarbitrio%2Fdjango-highcharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fernestoarbitrio%2Fdjango-highcharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fernestoarbitrio%2Fdjango-highcharts/lists"}