search

chartjs / chartjs-chart-financial

Chart.js module for charting financial securities
MIT License
725 stars 197 forks source link

Add support for logarithmic scale #20

Closed x13machine closed 4 years ago

benmccann commented 6 years ago

You will need to compute the values yourself and then add a line to your chart. http://www.chartjs.org/docs/latest/charts/line.html

It looks like there are several ta-lib JS ports that you may be able to use for this task.

x13machine commented 6 years ago

How can I make both display dataset display?

<html>
  <head>
    <script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
    <script src="../Chart.Financial.js" type="text/javascript"></script>
  </head>
  <body>
    <div style="width:1000px">
      <canvas id="chart1"></canvas>
    <div>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>
function randomNumber(min, max) {
    return Math.random() * (max - min) + min;
}

function randomBar(date, lastClose) {
    var open = randomNumber(lastClose * .95, lastClose * 1.05);
    var close = randomNumber(open * .95, open * 1.05);
    var high = randomNumber(Math.max(open, close), Math.max(open, close) * 1.1);
    var low = randomNumber(Math.min(open, close) * .9, Math.min(open, close));
    return {
        t: date.valueOf(),
        o: open,
        h: high,
        l: low,
        c: close
    };
}

var dateFormat = 'MMMM DD YYYY';
var date = moment('April 01 2017', dateFormat);
var data = [randomBar(date, 30)];
var line = [];
var dates = [];
while (data.length < 60) {
    date = date.clone().add(1, 'd');
    if (date.isoWeekday() <= 5) {
        var bar = randomBar(date, data[data.length - 1].c);
        dates.push(bar.t);
        line.push(bar.o)
        data.push(bar);
    }
}

var ctx = document.getElementById("chart1").getContext("2d");
ctx.canvas.width = 1000;
ctx.canvas.height = 300;

new Chart(ctx, [
    {
        type: 'financial',
        data: {
            datasets: [{
                label: "CHRT - Chart.js Corporation",
                data: data
            }]
        }
    },
    {
        type: 'line',
        data: {
            labels: dates,
            datasets: [{
                backgroundColor: '#F00',
                borderColor: '#F00',
                fill: false,
                label: "test",
                data: line
            }]
        }
    }
]);
/*
console.log(line)
new Chart(ctx, {
    type: 'line',
    data: {
        labels: dates,
        datasets: [{
            backgroundColor: '#F00',
            borderColor: '#F00',
            fill: false,
            label: "test",
            data: line
        }]
    }
});*/
benmccann commented 6 years ago

Look at http://www.chartjs.org/docs/latest/charts/mixed.html

You need to do something more like:

var mixedChart = new Chart(ctx, {
  type: 'financial',
  data: {
    datasets: [{
          label: 'Financial Dataset',
          data: ...
        }, {
          label: 'Line Dataset',
          data: ...,
          type: 'line'
        }]
  }
});
x13machine commented 6 years ago

Both show up in the legend but the line graph doesn't display.

new Chart(ctx, {
    type: 'financial',
    data: {
        datasets: [{
            label: "CHRT - Chart.js Corporation",
            data: data
        },{
            backgroundColor: '#F00',
            borderColor: '#F00',
            fill: false,
            label: "test",
            data: line
        }],
        labels: dates
    }
});
x13machine commented 6 years ago

nvm, I got it working. forgot to add the value 'type': 'line'

x13machine commented 6 years ago

How do I make the numbers display correctly?

function randomNumber(min, max) {
    return Math.random() * (max - min) + min;
}

function randomBar(date, lastClose) {
    var open = randomNumber(lastClose * .99, lastClose * 1.03);
    var close = randomNumber(open * .99, open * 1.03);
    var high = randomNumber(Math.max(open, close), Math.max(open, close) * 1.01);
    var low = randomNumber(Math.min(open, close) * .99, Math.min(open, close));
    return {
        t: date.valueOf(),
        o: open,
        h: high,
        l: low,
        c: close
    };
}

var dateFormat = 'MMMM DD YYYY';
var date = moment('April 01 2017', dateFormat);
var data = [randomBar(date, 30)];
var line = [];
var dates = [];
while (data.length < 60) {
    date = date.clone().add(1, 'd');
    if (date.isoWeekday() <= 5) {
        var bar = randomBar(date, data[data.length - 1].c);
        dates.push(bar.t);
        line.push(bar.o)
        data.push(bar);
    }
}

var ctx = document.getElementById("chart1").getContext("2d");
ctx.canvas.width = 1000;
ctx.canvas.height = 300;

new Chart(ctx, {
    type: 'financial',
    data: {
        datasets: [{
            label: "CHRT - Chart.js Corporation",
            data: data
        },{
            backgroundColor: '#F00',
            borderColor: '#F00',
            fill: false,
            label: "test",
            data: line,
            type: 'line'
        }],
        labels: dates
    },
    options: {
        scales: {
            yAxes: [{
                id: 'price',
                type: 'logarithmic'
            }]
        }
    }
});
benmccann commented 6 years ago

What problem are you having?

x13machine commented 6 years ago

When I hover over the data points it says like "[timestamp] O undefined H undefined L undefined C undefined"

x13machine commented 6 years ago

I'm also trying to make the logarithmic scale show sane numbers

benmccann commented 6 years ago

logarithmic scale isn't supported yet. We had to make our own financial scale for the y-axis rather than using the built in scales. The reason for this is because the regular scales assume only a single y value where as we have a high and low value

x13machine commented 6 years ago

should I use a different library? I need to support logarithmic scale.

x13machine commented 6 years ago

Should I make my own implementation? I need to do a bunch of weird stuff.

benmccann commented 6 years ago

I think probably your fastest way to getting what you want is to try another library. I hope we'll eventually support the logarithmic scale, but it may take a few months

x13machine commented 6 years ago

I think I will just do my own implementation.

benmccann commented 5 years ago

I've reopened this ticket to track adding support for the logarithmic scale

AlberErre commented 4 years ago

I'm just struggling to make it work using ohlc type. The line doesn't show up.

Is the following code correct?

var mixedChart = new Chart(ctx, {
  type: 'ohlc',
  data: {
    datasets: [{
          label: 'Financial Dataset',
          data: ...
        }, {
          label: 'Line Dataset',
          data: ...,
          type: 'line'
        }]
  }
});

I have tried with candlestick as well, but it didn't work either :(

Thanks!

benmccann commented 4 years ago

@AlberErre your code snippet doesn't seem to have anything to do with a logarithmic scale. Am I missing something? If it's not related to the log scale, please don't use this issue as it will make it confusing to understand when multiple different things are being discussed in one place

benmccann commented 4 years ago

Support for the log scale has finally been added! Hurray for Chart.js 3.0!