Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google-like Stock Chart / Line Chart [closed]

I'm looking for a specific style of Javascript or SVG chart library that resembles a Google Chart (example)

Google search: "NASDAQ: GOOG" shows a stock chart like this.

I have searched for some time but can't find anything that closely resembles this style, and I was curious if anyone could point me in the right direction to achieve a similar end result.

I have looked in to the Google Visualization API and tried making a Line Chart in JSFiddle but can't seem to replicate that style of design. Any advice?

See Example Image

Javascript, SVG, and AngularJS are all acceptable for the bounty reward. Bonus points for SVG.

like image 425
jaggedsoft Avatar asked Feb 02 '16 01:02

jaggedsoft


People also ask

What is a close only chart?

A line chart is the most basic and simplest type of stock charts that are used in technical analysis. The line chart is also called a close-only chart as it plots the closing price of the underlying security, with a line connecting the dots formed by the close price.

How do you use Open High Low Close chart?

An OHLC chart shows the open, high, low, and close price for a given period. It can be applied to any timeframe. The vertical line represents the high and low for the period, while the line to the left marks the open price and the line to the right marks the closing price.

What are the types of line charts?

In statistics, there are three main types of line charts: a simple line chart, a multiple line chart, and a compound line chart. A simple line chart is plotted with only a single line.


1 Answers

First Screenshot

This is the closest I've managed to get, and I think I did a pretty good job given the requirements.

If you'd like the tooltip to always show when you're hovering over the chart (Example: Google Trends) this can be accomplished with the focusTarget option (Example JSFiddle) which currently only works with Classic Google charts and not the new material charts.

google.charts.load('current', { packages: ['line'] });
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'X');
  data.addColumn('number', 'Dogs');

  data.addRows([
    [new Date(2015, 9, 28), 6],
    [new Date(2015, 9, 29), 10],
    [new Date(2015, 9, 30), 19],
    [new Date(2015, 10, 0), 14],
    [new Date(2015, 10, 1), 16],

  ]);

  var options = {
    colors: ["#4184F3"],
    lineWidth: 3,
    legend: {
      position: "none"
    },
    hAxis: {
      pointSize: 2,
      format: 'MMM d',
      title: '',
      titlePosition: 'none'
    },
    vAxis: {
      title: 'Popularity'
    }
  };

  var chart = new google.charts.Line(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Line.convertOptions(options));
}
#chart_div svg g circle {
  stroke: #4184F3 !important;
  fill-opacity: 1;
  r: 5;
  fill: #4184F3 !important;
  filter: none !important;
}
#chart_div svg g circle:hover {
  r: 8
}
#chart_div svg g path {
  stroke-width: 4 !important;
  stroke: #4184F3 !important;
  stroke-linejoin: bevel;
  stroke-width: 1;
  stroke-linecap: round;
  filter: none !important;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
like image 166
jaggedsoft Avatar answered Oct 14 '22 22:10

jaggedsoft