Highcharts: JS to Python

[Leaf]

I have a few questions 1. is related to visualizing data with highcharts, and the other is related to 2. extracting data from JSON (is it a default dictionary?) into and appending the data within that to a new list.

(1) There is Python High Charts, I downloaded this library: https://github.com/kyper-data/python-highcharts , and then I found I had a problem. when I ran the scripts nothing happened because it wasn't being displayed our outputed anywhere; I realized then I don't actually know how to use a python library. How would I output that data/display it to a browser if using python version? Am I supposed to use some type of software or something else to show data from libraries like matplotlib or highcharts? What tools do I need to actually do this? Up until recently everything I have been doing is with the command line.

(2) Now for the code question: I am trying to convert this demo in javascript: https://jsfiddle.net/gh/get/library/pure...nd-volume/
Specifically this section (Javascript Code):

    // split the data set into ohlc and volume
    var ohlc = [],
        volume = [],
        dataLength = data.length,
        // set the allowed units for data grouping
        groupingUnits = [[
            'week',                         // unit name
            [1]                             // allowed multiples
        ], [
            'month',
            [1, 2, 3, 4, 6]
        ]],

        i = 0;

    for (i; i < dataLength; i += 1) {
        ohlc.push([
            data[i][0], // the date
            data[i][1], // open
            data[i][2], // high
            data[i][3], // low
            data[i][4] // close
        ]);

        volume.push([
            data[i][0], // the date
           

Into the equivalent python code. Basically I want to iterate through a JSON file I have; and extract the values from that JSON file to be appended and stored into a new list. I want it to be ordered so instead of using dictionaries I'm using lists.

I apologize for the messy code, I know it's not pythonic, I'm literally just trying to get things to work.

My practice code is within a class and has been as follows:

def data(self):
        response = requests.get("https://blockchain.info/charts/market-price?timespan=60days&format=json")
        self.data = response.json()
        print(self.data) # Just testing
        self.ohlc = []
        self.volume = []
        self.datalength = len(self.data)       
        self.groupingUnits = [
                    ['week', [1]],
                    ['month', [1, 2, 3, 4, 5, 6, 7]]
                    ]
        """For loop that takes every '3rd' letter. It is unable to go past 4 [3] without saying an out of range error"""
        for extract in self.data:
            newlist = [extract[0], extract[2]]
            self.ohlc.append(newlist)
            print(self.ohlc)

        """While Loop for trying to match the javascript code """

        index = 0
        
        while index < self.datalength: # Remove while, try it without range and len
            for index in range(self.datalength):
                index = index + 1  
                # [data[0, 1, 2, 3, 4]] doesn't work gives key error
                # self.data.values()
                self.ohlc.append([0, 1, 2, 3, 4]) # not sure how to add self.data into this
                self.volume.append([0, 5]) # not sure how to add self.data into this
        print('date, high, low, close')
        print(self.ohlc)
        print(self.volume)       

Output:

{'status': 'ok', 'name': 'Market Price (USD)', 'unit': 'USD', 'period': 'day', 'description': 'Average USD market price across major bitcoin e
xchanges.', 'values': [{'x': 1504310400, 'y': 4580.38}, {'x': 1504396800, 'y': 4648.15}, {'x': 1504483200, 'y': 4344.09}, {'x': 1504569600, 'y
': 4488.72}, {'x': 1504656000, 'y': 4641.82}, {'x': 1504742400, 'y': 4654.65}, {'x': 1504828800, 'y': 4310.75}, {'x': 1504915200, 'y': 4375.55
}, {'x': 1505001600, 'y': 4329.95}, {'x': 1505088000, 'y': 4248.09}, {'x': 1505174400, 'y': 4219.03}, {'x': 1505260800, 'y': 3961.27}, {'x': 1
505347200, 'y': 3319.62}, {'x': 1505433600, 'y': 3774.26}, {'x': 1505520000, 'y': 3763.62}, {'x': 1505606400, 'y': 3746.06}, {'x': 1505692800,
'y': 4093.31}, {'x': 1505779200, 'y': 3943.41}, {'x': 1505865600, 'y': 3977.56}, {'x': 1505952000, 'y': 3658.89}, {'x': 1506038400, 'y': 3637
.5}, {'x': 1506124800, 'y': 3776.38}, {'x': 1506211200, 'y': 3703.04}, {'x': 1506297600, 'y': 3942.55}, {'x': 1506384000, 'y': 3910.3}, {'x':
1506470400, 'y': 4202.55}, {'x': 1506556800, 'y': 4201.98}, {'x': 1506643200, 'y': 4193.57}, {'x': 1506729600, 'y': 4335.36}, {'x': 1506816000
, 'y': 4360.72}, {'x': 1506902400, 'y': 4386.88}, {'x': 1506988800, 'y': 4293.3}, {'x': 1507075200, 'y': 4225.17}, {'x': 1507161600, 'y': 4338
.85}, {'x': 1507248000, 'y': 4345.6}, {'x': 1507334400, 'y': 4376.19}, {'x': 1507420800, 'y': 4602.28}, {'x': 1507507200, 'y': 4777.96}, {'x':
1507593600, 'y': 4782.27}, {'x': 1507680000, 'y': 4819.48}, {'x': 1507766400, 'y': 5325.13}, {'x': 1507852800, 'y': 5563.8}, {'x': 1507939200
, 'y': 5739.43}, {'x': 1508025600, 'y': 5647.31}, {'x': 1508112000, 'y': 5711.2}, {'x': 1508198400, 'y': 5603.71}, {'x': 1508284800, 'y': 5546
.17}, {'x': 1508371200, 'y': 5727.63}, {'x': 1508457600, 'y': 5979.45}, {'x': 1508544000, 'y': 6020.37}, {'x': 1508630400, 'y': 5983.18}, {'x'
: 1508716800, 'y': 5876.07}, {'x': 1508803200, 'y': 5505.82}, {'x': 1508889600, 'y': 5669.62}, {'x': 1508976000, 'y': 5893.13}, {'x': 15090624
00, 'y': 5772.5}, {'x': 1509148800, 'y': 5776.69}, {'x': 1509235200, 'y': 6155.43}, {'x': 1509321600, 'y': 6105.87}, {'x': 1509408000, 'y': 63
88.64}]}
>>>From the For Loop Only
[['s', 'a']]
[['s', 'a'], ['n', 'm']]
[['s', 'a'], ['n', 'm'], ['u', 'i']]
[['s', 'a'], ['n', 'm'], ['u', 'i'], ['p', 'r']]
[['s', 'a'], ['n', 'm'], ['u', 'i'], ['p', 'r'], ['d', 's']]
[['s', 'a'], ['n', 'm'], ['u', 'i'], ['p', 'r'], ['d', 's'], ['v', 'l']]
>>>From the While Loop
date, high, low, close
[['s', 'a'], ['n', 'm'], ['u', 'i'], ['p', 'r'], ['d', 's'], ['v', 'l'], [0, 1, 2, 3, 4], [0, 1, 2, 3, 4], [0, 1, 2, 3, 4], [0, 1, 2, 3, 4], [
0, 1, 2, 3, 4], [0, 1, 2, 3, 4]]
[[0, 5], [0, 5], [0, 5], [0, 5], [0, 5], [0, 5]]

>>For the For Loop
I'm not sure why my code is doing what it's doing, as an example, why is it only getting every 3rd or 4th letter. I understand it relates to newlist = [extract[0], extract[2]], that it can only hold one integer, and that it's saying 0 through 2 (3)? but I'm not understanding exactly why or what it's doing, or how to as a list get it to hold more than one number.

>>In General
I don't know if a dictionary would be better, or if a tuple would be better, over a list. I know tuples are immutable; does that mean I should use immutable lists, but the data I'm getting back from the JSON is all in a dictionary {} does that mean I should be using dictionaries, keys and values?

>>For the While Loop
I feel like some stuff I'm trying to do from the javascript over to the python just isn't directly translating over as python and javascript have different ways to do the same thing and that may be part of my problem as I don't know Javascript very well. I'm unable to take the self.data with self.ohlc and then append to a list. I do understand what the Javascript code is doing and am struggling to replicate that in python (my command of dictionaries and lists , or my understanding is lacking)

https://docs.python.org/2/tutorial/datas...e-on-lists
I haven't been sure whether to use append, insert, or extend at times.

I can break down the steps that the Javascript is doing that I want to replicate as this:
(1) create an empty list for data I want: volume[] and ohlc[]
(2) getJSON > Response = Data,
(3) Get elements from JSON, .length in the javascript translated into len(data) in python
(4) It iterates through the list the number of times of elements that are in the list (gotten from len)
(5) the len(data) is also used as an indexer, to create a nested list with data, to which the JSONData is supposed to append to (I don't understand how this extraction works)
(6) Each iteraction creates a new list with as many elements as was asked for in #5 (0, 1, 2, 3, 4)

But then I realized python works differently form js and really I'm just stuck. Can anyone help me figure out how I would convert the Javascript snippet into Python? And why the codes do what they do?

[snippsat]

Your post is a little all over the places
Can give some tips and code how i would interact with HighCharts.

(1) There is Python High Charts, I downloaded this library: https://github.com/kyper-data/python-highcharts , and then I found I had a problem. when I ran the scripts nothing happened

Do you know how to use pip,it's pip install python-highcharts to install.
This package is for generate HTML files that can used in browser or Jupyter NoteBook.

My take on this with Flask of course
There tutorial Your First Chart .
So a line of HTML code and JavaScript/jQuery with all the main code.
Could rewrite JavaScript to Python,but that would just be painful.
Instead i want to send my data to JavaScript,so a Python list to JavaScript array.
This is my data.

jane = [1, 2, 7]
jon = [4, 7, 9]
fruit = ['Cherry', 'Grape', 'Lemon']

To do this will be using Jinja2 which build into Flask.
app.py:

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)
@app.route('/')
def index():    
    jane = [1, 2, 7]
    jon = [4, 7, 9]
    fruit = ['Cherry', 'Grape', 'Lemon']
    return render_template("index.html", jane=jane, jon=jon, fruit=fruit)

if __name__ == '__main__':
    app.run(debug=True)

index.html:

<!doctype html>
<html>
  <head>
    <title>Some title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/style.css') }}" />
  </head>
  <body>
    <div id='container' style='width:100%; height:400px;'></div >
  </body>
  <script>
  $(function () { 
    var myChart = Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: {{fruit|tojson|safe}}
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: {{jane|tojson|safe}}
        }, {
            name: 'John',
            data: {{jon|tojson|safe}}
        }]
      });
    });  
  </script>
  <!-- <script src="{{ url_for('static', filename='js/hi.js') }}"></script>   -->
</html>

So the app.py is the sever,and i am sending values to JavaScripts with Jinja.
The magic in JavaScripts is this {{fruit|tojson|safe}}
So it are taking a Python list and making it a JavaScripts array.
Result of running this.
[Image: AYcxkr.jpg]

[Leaf]

Thank you for your in depth response; my response may be a misunderstanding of your response to please forgive me if I am wrong. My question was not about how to have Highcharts JS interact with Flask; I know how to do this (if not clumsily :P) to send data back and forth between JS and Flask and vice versa. When I said I "downloaded" I meant that I "pip installed" Highcharts Python and tried to run the python scripts from their provided demo files in my Virtual Environment and found that I did not know how to output/display the data.

I have TWO completely separate questions related to TWO completely different versions of Highcharts. I did not want to flood the forum with TWO different posts covering similar topics so I placed it all in one, let me rephrase the first question:

(1) How do I take Charting tools in Python and visually display them; what tools do I need and what process would there be for being able to visually display charts with tools like Highcharts python or even matplotlib. I used Highcharts Python as an example because I'm not sure how or where to display it.

(2)

My second question was basically asking: Can someone help me with the proper way to convert the JS code to Python, and to understand what I've been doing wrong. As it turns out I was trying to convert JS line for line into Python line for line and they have two completely different ways of handling data. I did not need the 'while condition' as I thought, the for loop on it's own was sufficient, and I needed to handle the Python code as a dictionary. I'm still fiddling with it but this code appears to do what I was trying to do with datalength dropped:

 for extract in self.data:
            self.ohlc = self.data['values']

I suspect a better way to have tried to convert JS over to Python would have been to explore what it was trying to do in JS and then understand Python works completely different and focus on how I would express the same concepts in Python with no interference from how I think JS would have solved it.

I tried to be as detailed as possible; walking through my attempts to solve the problem so as to make clear I was not being lazy asking for help and was trying. I thought this information would be relevant, but perhaps not so much :D

[snippsat]

(1) How do I take Charting tools in Python and visually display them; what tools do I need and what process would there be for being able to visually display charts with tools like Highcharts python or even matplotlib. I used Highcharts Python as an example because I'm not sure how or where to display it.

Highcharts is JavaScript libraries,so then is browser used to display it.
That's why a brought Flask in the picture,because we are talking about web-development when JavaScript is in the picture.

Python have a bunch of plotting libraries,the most used way to display plot is using Jupyter NoteBook.
Example: 21 Interactive Plots from matplotlib, ggplot for Python,prettyplotlib, Stack Overflow, and seaborn 
Collection of Notebooks .
That's say there a several different ways to display this:
Browser, Picture output, GUI...ect.

(2)
My second question was basically asking: Can someone help me with the proper way to convert the JS code to Python, and to understand what I've been doing wrong. As it turns out I was trying to convert JS line for line into Python line for line and they have two completely different ways of handling data. I did not need the 'while condition' as I thought, the for loop on it's own was sufficient, and I needed to handle the Python code as a dictionary. I'm still fiddling with it but this code appears to do what I was trying to do with datalength dropped:

Knowing both langues pretty well make helps a lot if need to translate  
You can search for libraries to help eg Js2Py other way around Transcrypt.

For me the most important point is how to interactive with JS,
JS have like a bunch of cool libraries and some i want use from Python.
Then need a web-development tool like as eg Flask.

Python and JS are the 2 most popular languages in the world GitHut 2.0.
So that can use each other stuff think i am important.

The JavaScript ecosystem is just insane:
JavaScript Frameworks, Libraries 

It seems there are more JavaScript frameworks, libraries, and tools than there are developers.
As of May 2017, a quick search on GitHub reveals more than 1.1 million JavaScript projects.
here are 500 thousand usable packages on npmjs.org with almost 10 billion downloads every month. 

[Leaf]

Thank you so much for your detailed answer, it has helped bring clarity.

I have one more question (for clarification):

When you say Highcharts is a Javascript library you are talking about this as well? As this Highcharts Python is what I was referring to for the first question:

https://github.com/kyper-data/python-highcharts ((I my have misunderstood the python version of highcharts as being able to be visually displayed in a different way)). I don't quite understand wrappers, but I thought that this python version of it would allow me more flexibility (to allow me the option to use the browser or a different GUI).

Is the github python version of highcharts different from other Python plotting libraries? Or would I use it the same as I would other python based plotting libraries?

[snippsat]

https://github.com/kyper-data/python-highcharts ((I my have misunderstood the python version of highcharts as being able to be visually displayed in a different way)). I don't quite understand wrappers, but I thought that this python version of it would allow me more flexibility (to allow me the option to use the browser or a different GUI).

That library create a HTML that can be displayed in browser or Jupyter Notebook,
so then is no need to run a server as i show with Flask.

To give a demo of how to run it,and also fix there wrong example code that's only work for Python 2.
Install is pip install python-highcharts.
This is the fix for Python 3.
data = list(range(1,20))

# hi_test.py
from highcharts import Highchart

# A chart is the container that your data will be rendered in, it can (obviously) support multiple data series within it.
chart = Highchart()

# Adding a series requires at minimum an array of data points.
# You can also change the series type, the name, or other series options as kwargs.
data = list(range(1,20))
chart.add_data_set(data, series_type='line', name='Example Series')

# This will generate and save a .html file at the location you assign
chart.save_file()

So running this code there will be no output but a Chart.html file that can be display in browser or Jupyter Notebook.
So can just open the HTML file it in browser or write a little script that do it.

import webbrowser

webbrowser.open_new_tab('file:///E:/1py_div/py_highchart/Chart.html')

Ouput in browser is:
[Image: y17wSk.jpg]

Is the github python version of highcharts different from other Python plotting libraries? Or would I use it the same as I would other python based plotting libraries?

There are similarity in all plotting libraries,look at link i have provide with Jupyter Notebook plotting examples.
Or search for plotting tutorial in Python,there are bunch of plotting stuff for Python,
as Python is very strong in data science that use plotting all the time.

Here a free book Python Data Science Handbook,has a lot of plotting example.
The whole book is written in Jupyter Notebook.