Skip to content
JQuery plugin for creating charts
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit a760312 Sep 18, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example update Oct 14, 2016
img first commit Oct 3, 2016
old first commit Oct 3, 2016
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Sep 18, 2017
CONTRIBUTING.md Create CONTRIBUTING.md Sep 18, 2017
LICENSE Create LICENSE Sep 18, 2017
README.md update Nov 7, 2016
bower.json update Nov 7, 2016
package.json update Nov 7, 2016
scale.css first commit Oct 3, 2016
scale.js update Oct 14, 2016

README.md

JQuery Linechart

NPM Version Download Month Download Total

alt text

JQuery plugin for building a linechart. Chart ruler completely on HTML/CSS/JS. Bar chart, calendar view visualisation. Diagram, graph, pyramid visualisation of large datasets. Showreel. The source for this module is in the main repo. Please create issues and pull requests. Angular plugin for linechart also exists. Check angular-scale if you're using Angular.js.

alt text

Inspired by kinopoisk.ru chart written using Adobe Flash. But this chart is just on HTML/CSS without using libraries. Feel free for contribute.

alt text

Install

bower install jquery-linechart 
npm install jquery-linechart

Use

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../scale.css">
	</head>
	<body>
		<div id="chart"></div>

		<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
		<script src="../scale.js"></script>
	</body>
</html>
$.getJSON('./votes.json', function(res) {
	var items = [];

	$.each(res, function(key, val){
		items.push({
			value: val["rank"],
			title: val["title"]
		});
	});

	$("#chart").linechart({
		data: items,
		width: 50, 
		height: 10,
		boxSize: 16,
		line: true,
		theme: "purple"
	});
});

Options

$("#chart").linechart({
	data: items,
	width: 50, 
	height: 10,
	boxSize: 16,
	line: true,
	theme: "purple"
});
  • data is an array of objects [{value: 0}, ... , {value: 10}]. This is the dataset of the chart.
  • width is the horizontal length of the data array. If width param is less than the length of the data array then user will see the last values of the data array.
  • height is the vertical length.
  • box-size is size of each box in pixels.

alt text

  • line is param that determines if this is a line-chart.

alt text

  • theme is color scheme of the chart.

alt text

Please check the example folder to see how it's going on practice.

Themes

  • default
  • purple
  • grey

alt text

License

Copyright (c) 2016 Kirill Stepkin

npm

You can’t perform that action at this time.