CODEWITHSUNDEEP
pythonjsonpandascsvhighcharts
SystemTheory
SystemTheory

Reputation: 369

Use pandas to convert csv to json for plotting two series instead of one in highcharts highstock graph

Problem is to show two series, for adjusted high and adjusted low, in a highcharts highstock graph similar to the following which shows only one series:

Highstock chart with one series for adjusted high

Links to similar Highstock question and JSFiddle:

https://forum.highcharts.com/viewtopic.php?f=12&t=40964&p=142595&hilit=multiple+series#p142595

https://jsfiddle.net/BlackLabel/xqgv2b4k/

Below are my working files used to produce the graph above.

sample.csv (input)

DATE,ADJ_HIGH,ADJ_LOW
2018-04-27,164.33,160.630
2018-04-30,167.26,161.840
2018-05-01,169.20,165.270
2018-05-02,177.75,173.800
2018-05-03,177.50,174.441

csv_to_json_testing.py

import numpy as np
import pandas as pd

input_file = 'sample.csv'

df = pd.read_csv(input_file, usecols=[0,1,2], parse_dates=['DATE'], date_parser = pd.to_datetime) #  keep_default_na = False

with open('overflow.txt', 'w') as f:
    df['DATE'] = df['DATE'].values.astype(np.int64) // 10 ** 6
    print(file=f)
    print('DATE, ADJ_HIGH (json)', file=f)
    print(file=f)
    print(df[['DATE','ADJ_HIGH']].tail(5).to_json(orient='values'), file=f)
    print(file=f)
    print('DATE, ADJ_LOW (json)', file=f)
    print(file=f)
    print(df[['DATE','ADJ_LOW']].tail(5).to_json(orient='values'), file=f)
    print(file=f)
    print('DATE, ADJ_HIGH, ADJ_LOW (json)', file=f)
    print(file=f)
    print(df[['DATE','ADJ_HIGH','ADJ_LOW']].tail(5).to_json(orient='values'), file=f)

overflow.txt (output)

DATE, ADJ_HIGH (json)

[[1524787200000,164.33],[1525046400000,167.26],[1525132800000,169.2],[1525219200000,177.75],[1525305600000,177.5]]

DATE, ADJ_LOW (json)

[[1524787200000,160.63],[1525046400000,161.84],[1525132800000,165.27],[1525219200000,173.8],[1525305600000,174.441]]

DATE, ADJ_HIGH, ADJ_LOW (json)

[[1524787200000,164.33,160.63],[1525046400000,167.26,161.84],[1525132800000,169.2,165.27],[1525219200000,177.75,173.8],[1525305600000,177.5,174.441]]

sample.json (DATE, ADJ_HIGH)

[[1524787200000,164.33],[1525046400000,167.26],[1525132800000,169.2],[1525219200000,177.75],[1525305600000,177.5]]

highstock_test.html

<html>
  <head>
    <title>
      Chart
    </title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/stock/highstock.js"></script>
    <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
    <script type="text/javascript">
    $.getJSON('sample.json', function (data) {
    // Create the chart
    Highcharts.stockChart('container', {

        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'XYZ Stock Price'
        },

        series: [{
            name: 'XYZ',
            data: data,
            tooltip: {
                valueDecimals: 2
            }
        }]
    });
});
    </script>
  </head>
  <body>
    <div id="container" style="width: 400px; height: 350px; margin: 0 auto"></div>
  </body>
</html>

When I store sample.json and highstock_test.html in a folder, then open the html file in a browser, I get the highstock graph shown above for one series. My challenge is to properly populate and format sample.json with DATE, ADJ_HIGH, and ADJ_LOW data, and to edit highstock_test.html so the plot properly renders two series instead of one. Would like to use the method that is easiest to understand and that could also be adapted to serve charts from a flask application.

Upvotes: 0

Views: 611

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

To display two series you need to create two series configuration objects:

Highcharts.stockChart('container', {
    series: [{
        data: data1
    }, {
        data: data2
    }]
});

If you want to use two separate JSON data, you will only have to assign the right values: http://jsfiddle.net/BlackLabel/fho6na5r/, but to use only one, you need to convert it to data structure required by Highcharts:

var data = [
        [1524787200000, 164.33, 160.63],
        [1525046400000, 167.26, 161.84],
        [1525132800000, 169.2, 165.27],
        [1525219200000, 177.75, 173.8],
        [1525305600000, 177.5, 174.441]
    ],
    dataS1 = [],
    dataS2 = [];

data.forEach(function(el) {
    dataS1.push([el[0], el[1]]);
    dataS2.push([el[0], el[2]]);
});

Highcharts.stockChart('container', {
    series: [{
        data: dataS1
    }, {
        data: dataS2
    }]
});

Live demo: http://jsfiddle.net/BlackLabel/gv7mph8x/6/

Upvotes: 1

Related Questions