Giter Club home page Giter Club logo

chartjs-chart-smith's Introduction

Chart.Smith.js

Build Status

Provides a Smith Chart for use with Chart.js

Documentation

To create a Smith Chart, include Chart.Smith.js after Chart.js and then create the chart by setting the type attribute to 'smith'

var mySmithChart = new Chart({
	type: 'smith',
	data: dataObject
});

Data Representation

The smith chart can graph multiple datasets at once. The data for each dataset is in the form of complex numbers.

var smithChartData = {
	datasets: [{
		label: 'Dataset 1',
		data: [{
			real: 0,
			imag: 1
		}, {
			real: 1,
			imag: 1
		}]
	}]	
};

Scale Configuration

The smith chart scale can be configured by placing options into the config that is passed to the chart upon creation.

new Chart({
	config: {
		scale: {
			display: true, // setting false will hide the scale
			gridLines: {
				// setting false will hide the grid lines
				display: true, 

				// the color of the grid lines
				color: rgba(0, 0, 0, 0.1), 

				// thickness of grid lines
				lineWidth: 1, 
			},
			ticks: {
				// The color of the scale label text
				fontColor: 'black',

				// The font family used to render labels
				fontFamily: 'Helvetica',

				// The font size in px
				fontSize: 12,

				// Style of font
				fontStyle: 'normal'

				// Function used to convert real valued ticks to strings
				rCallback: function(tick, index, ticks) {}

				// Function used to convert imaginary valued ticks to strings
				xCallback: function(tick, index, ticks) {}
			}
		}
	}
});

Dataset Configuration

The datasets for smith charts support many of the same options as the line chart

{
	// Bezier Curve tension. Set to 0 for straight lines
	tension: 0,

	// Fill color for dataset
	backgroundColor: 'rgba(0, 0, 0, 0.1)',

	// Width of line
	borderWidth: 1,

	// Line color
	borderColor: 'rgba(0, 0, 0, 0.1)',

	// Line ending style
	borderCapStyle: 'butt',

	// Line dash style
	borderDash: [],

	// Dash offset. Used in conjunction with borderDash property
	borderDashOffset: 0,

	// Line join style
	borderJoinStyle: 'miter',

	// Do we fill the line?
	fill: true,

	// Point radius
	radius: 3,

	// Point style (circle, cross, etc)
	pointStyle: 'circle',

	// Point fill color
	pointBackgroundColor: 'rgba(0, 0, 0, 0.1)',

	// Point stroke color
	pointBorderColor: 'rgba(0, 0, 0, 0.1)',

	// Point stroke width
	pointBorderWidth: 1,

	// Used for hit detection
	hitRadius: 3
}

License

Chart.Smith.js is available under the MIT license.

Bugs & issues

When reporting bugs or issues, if you could include a link to a simple jsbin or similar demonstrating the issue, that would be really helpful.

chartjs-chart-smith's People

Contributors

etimberg avatar

Watchers

 avatar  avatar

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.