2

Working Plot Without Using CSV Data

Using this example:

http://jsfiddle.net/grw3hamv/

I wrote the following code to plot a simple ohlc chart:

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="chart-container" style="width: 400px; height: 400px; margin: 0 auto"></div>
<script>
Highcharts.stockChart('chart-container', {
    chart: {
        type: 'ohlc'
    },
    title: {
        text: 'OHLC Chart W/O CSV'
    }, 
    series:  [{
        data: [{ 
            //date: 2016-08-01,
            x: new Date('2015-08-01').getTime(),
            open: 22, 
            high: 40,
            low: 20,
            close: 35,
            }, { 
            // date: 2016-08-02,
            x: new Date('2015-08-02').getTime(),
            open: 32, 
            high: 50,
            low: 30,
            close: 45
          }]
    }]
});
</script>

Experimenting with "null" values in the open and close fields shows that the application tolerates null values for open but does not print the bar if there is a null value for the close field.

Example of Using CSV in PRE Block

This example code uses embedded csv data to generate an "areaspline" chart via highcharts:

http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/data/csv/

Unable to Plot OHLC Chart from CSV in PRE Block - (Solved!)

I am trying to embed csv data into the html and generate an "ohlc" style chart from the csv data. The html/script code below runs locally in Firefox. The result shows the chart layout except no data bars appear in the plot. (Edit: The code below now works due to solution provided in comment section).

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="chart-container" style="width: 400px; height: 400px; margin: 0 auto"></div>

<pre id="csv" style="display: none">
x,open,high,low,close
1524787200000,179,180.48,178.16,178.50
1525046400000,179,180.615,178.05,178.80
</pre>
<script>
Highcharts.stockChart('chart-container', {
    chart: {
        type: 'ohlc'
    },
    title: {
        text: 'OHLC Chart from CSV?'
    }, 
    data: {
           csv: document.getElementById('csv').innerHTML 
    }
});
</script>

The next effort will be to convert the date format in the CSV data to the timestamp format which is output from the example command: new Date('2015-08-02').getTime().

SystemTheory
  • 339
  • 3
  • 15
  • OHLC charts does not work with csv, try convert to JSON and It will work. – lamtacvu Jul 12 '21 at 01:54
  • 1
    Hi @SystemTheory, Example: CSV data works fine for ohlc series type. Please check this example: http://jsfiddle.net/BlackLabel/pdh0kqcg/ – ppotaczek Jul 12 '21 at 09:42
  • 1
    @ppotaczek Thank you for the solution which I have incorporated into the question with comment that it is solved. If you provide an answer with the link to solution I will approve it. General notes: in the solution the date field must convert to what appears to be a Unix timestamp (?) and the csv headers must convert to the names: x, open, high, low, close. When the csv data are provided in this proper format then the data appear in the plot area as expected. – SystemTheory Jul 12 '21 at 12:11
  • 1
    Further experiments show that the solution actually works without the need to convert dates to Unix or other timestamps. Also a plot appears without any conversion of the csv headers to "x, open, high, low, close". Using plotOptions the TurboThreshold may need to increase above 1001 or else be set to 0 for datasets exceeding 1000 data records. – SystemTheory Jul 12 '21 at 14:53

0 Answers0