Skip to content

Instantly share code, notes, and snippets.

@vgoklani
Last active December 19, 2022 09:13
Show Gist options
  • Save vgoklani/5347161 to your computer and use it in GitHub Desktop.
Save vgoklani/5347161 to your computer and use it in GitHub Desktop.

Revisions

  1. vgoklani revised this gist Apr 9, 2013. 3 changed files with 11 additions and 14 deletions.
    6 changes: 3 additions & 3 deletions app.py
    Original file line number Diff line number Diff line change
    @@ -4,9 +4,9 @@

    @app.route('/')
    @app.route('/index')
    def index2(chartID = 'chart_ID', chart_type = 'bar', chart_height = 350):
    chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,}
    series = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [-1, -2, -3]}]
    def index(chartID = 'chart_ID', chart_type = 'bar', chart_height = 350):
    chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,}
    series = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [4, 5, 6]}]
    title = {"text": 'My Title'}
    xAxis = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
    yAxis = {"title": {"text": 'yAxis Label'}}
    17 changes: 7 additions & 10 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,14 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta charset="utf-8">

    <link href="../static/css/main.css" rel="stylesheet" type="text/css" />
    <!-- <link href="../static/css/main.css" rel="stylesheet" type="text/css" /> -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

    <script src="../static/js/main.js"></script>
    <!-- SUPPORT FOR IE6-8 OF HTML5 ELEMENTS -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    @@ -25,16 +21,17 @@
    </head>

    <body>
    <div id="container" style="width:100%; height:400px;"></div>
    <div id={{ chartID|safe }} class="chart"></div>
    <div id={{ chartID|safe }} class="chart" style="height: 100px; width: 500px"></div>
    <script>
    var chart_id = {{ chartID|safe }}
    var series = {{ series|safe }}
    var title = {{ title|safe }}
    var xAxis = {{ xAxis|safe }}
    var yAxis = {{ yAxis|safe }}
    var chart = {{ chart|safe }}
    </script>
    <!-- // <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> -->
    <!-- // <script src="../static/js/bootstrap.min.js"></script> -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="../static/js/main.js"></script>
    </body>
    </html>
    2 changes: 1 addition & 1 deletion main.js
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    $(document).ready(function() {
    $('#container').highcharts({
    $(chart_id).highcharts({
    chart: chart,
    title: title,
    xAxis: xAxis,
  2. vgoklani created this gist Apr 9, 2013.
    16 changes: 16 additions & 0 deletions app.py
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    from flask import Flask, render_template

    app = Flask(__name__)

    @app.route('/')
    @app.route('/index')
    def index2(chartID = 'chart_ID', chart_type = 'bar', chart_height = 350):
    chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,}
    series = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [-1, -2, -3]}]
    title = {"text": 'My Title'}
    xAxis = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
    yAxis = {"title": {"text": 'yAxis Label'}}
    return render_template('index.html', chartID=chartID, chart=chart, series=series, title=title, xAxis=xAxis, yAxis=yAxis)

    if __name__ == "__main__":
    app.run(debug = True, host='0.0.0.0', port=8080, passthrough_errors=True)
    40 changes: 40 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta charset="utf-8">

    <link href="../static/css/main.css" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

    <script src="../static/js/main.js"></script>
    <!-- SUPPORT FOR IE6-8 OF HTML5 ELEMENTS -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- <link rel="shortcut icon" href="{{ url_for('static', filename='ico/favicon.ico') }}"> -->
    {% block head %}
    <title>{% block title %} Title!{% endblock %}</title>
    {% endblock %}
    </head>

    <body>
    <div id="container" style="width:100%; height:400px;"></div>
    <div id={{ chartID|safe }} class="chart"></div>
    <script>
    var series = {{ series|safe }}
    var title = {{ title|safe }}
    var xAxis = {{ xAxis|safe }}
    var yAxis = {{ yAxis|safe }}
    var chart = {{ chart|safe }}
    </script>
    <!-- // <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> -->
    <!-- // <script src="../static/js/bootstrap.min.js"></script> -->
    </body>
    </html>
    54 changes: 54 additions & 0 deletions main.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    * {
    margin: 20;
    padding: 100;
    }
    header {
    background-color:rgba(33, 33, 33, 0.9);
    color:#ffffff;
    display:block;
    font: 14px/1.3 Arial,sans-serif;
    height:50px;
    position:relative;
    }
    header h2{
    font-size: 22px;
    margin: 0px auto;
    padding: 10px 0;
    width: 80%;
    text-align: center;
    }
    header a, a:visited {
    text-decoration:none;
    color:#fcfcfc;
    }
    body {
    background:url("background.jpg") no-repeat scroll top center transparent;
    }
    .actions, .chart {
    margin: 15px auto;
    width: 34px;
    }
    button {
    background: none repeat scroll 0 0 #E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 1px 1px #F6F6F6 inset;
    color: #333333;
    font: bold 12px;
    margin: 0 5px;
    padding: 8px 0 9px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 150px;
    }
    button:hover {
    background: none repeat scroll 0 0 #D9D9D9;
    box-shadow: 0 0 1px 1px #EAEAEA inset;
    color: #222222;
    cursor: pointer;
    }
    button:active {
    background: none repeat scroll 0 0 #D0D0D0;
    box-shadow: 0 0 1px 1px #E3E3E3 inset;
    color: #000000;
    }
    9 changes: 9 additions & 0 deletions main.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    $(document).ready(function() {
    $('#container').highcharts({
    chart: chart,
    title: title,
    xAxis: xAxis,
    yAxis: yAxis,
    series: series
    });
    });