Coder Social home page Coder Social logo

rlugojr / python-django Goto Github PK

View Code? Open in Web Editor NEW

This project forked from zingchart-demos/python-django

0.0 2.0 0.0 189 KB

Demo will render a line chart using ZingChart with data gathered from our database via an AJAX call to one of our endpoints.

Python 80.10% HTML 19.90%

python-django's Introduction

Django Charting Demo

Python is serving as the back-end of our app and employs Django’s framework to give us a very nice and simple abstraction to get us away from having to configure a server from scratch.

The app we are building today will render a line chart using ZingChart with data gathered from our database via an AJAX call to one of our endpoints.

Preparing the Environment

  1. Python installed. Open a console or terminal and type python --version. If a version is reported, you’re good to go. If not, download Python. python version

  2. Django installed. One liner, just type into your console/terminal pip install django. Note: If you do not have pip installed the download Python version 2.7.10 or newer. Python comes with pip preinstalled on these versions. Then once you have installed Python you need to point to it with your Environment Variables Path.

  3. Download this repo. Or you can clone it with the following command git clone https://github.com/zingchart-demos/Python-Django.git.

Displaying Python Graphs

  • cd to this directory.
  • type into the terminal python manage.py runserver. The output should look something like this: Django RunServer
  • The server is running now. So all we have to do is open our favorite browser and navigate to our app http://localhost:8000/zc_demo/index

Python Chart

At this point we can customize the chart to do virtually anything we want. For a complete demonstration of this charting library's capabilities please see the documentation for Your First Chart. Just right click on the chart and select 'View Source' then modify the configuration according to the documentation listed above. For example, let's add a legend to our chart. Right click, then select 'View Source', then copy/paste the following text into your configuration.

"legend": {
    "header": {
        "text": "My First Legend"
    }
},

Pthyon Chart Legend Also, note that you can interact with the rendered ZingChart to change any configuration you want by right clicking anywhere on the chart and selecting 'View Source'. From there you can add, modify, or remove anything you like. Visit zingchart for more information on how to customize your charts.

Happy Charting

python-django's People

Contributors

jbogartpint avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.