GithubHelp home page GithubHelp logo

Comments (18)

benmccann avatar benmccann commented on July 17, 2024 1

@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

from chartjs-chart-financial.

benmccann avatar benmccann commented on July 17, 2024

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.

from chartjs-chart-financial.

x13machine avatar x13machine commented on July 17, 2024

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
		}]
	}
});*/

from chartjs-chart-financial.

benmccann avatar benmccann commented on July 17, 2024

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'
        }]
  }
});

from chartjs-chart-financial.

x13machine avatar x13machine commented on July 17, 2024

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
	}
});

from chartjs-chart-financial.

x13machine avatar x13machine commented on July 17, 2024

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

from chartjs-chart-financial.

x13machine avatar x13machine commented on July 17, 2024

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'
			}]
		}
	}
});

from chartjs-chart-financial.

benmccann avatar benmccann commented on July 17, 2024

What problem are you having?

from chartjs-chart-financial.

x13machine avatar x13machine commented on July 17, 2024

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

from chartjs-chart-financial.

x13machine avatar x13machine commented on July 17, 2024

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

from chartjs-chart-financial.

benmccann avatar benmccann commented on July 17, 2024

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

from chartjs-chart-financial.

x13machine avatar x13machine commented on July 17, 2024

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

from chartjs-chart-financial.

x13machine avatar x13machine commented on July 17, 2024

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

from chartjs-chart-financial.

benmccann avatar benmccann commented on July 17, 2024

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

from chartjs-chart-financial.

x13machine avatar x13machine commented on July 17, 2024

I think I will just do my own implementation.

from chartjs-chart-financial.

benmccann avatar benmccann commented on July 17, 2024

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

from chartjs-chart-financial.

AlberErre avatar AlberErre commented on July 17, 2024

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!

from chartjs-chart-financial.

benmccann avatar benmccann commented on July 17, 2024

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

from chartjs-chart-financial.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.