jsEasyCharts

Download jsEasyCharts Under 7kb compressed

The Google Charts API is an excellent way to put charts onto your page - they are PNG images, so do not require any specific plugin or latest browser. However, the interface is a URL, so it can be hard to build the querystring to make a chart.

jsEasyCharts is a JavaScript wrapper that allows you to easily place a Google Chart onto your page and access it via a simple API.

jsEasyCharts is also:

• Easy to use - make a chart with just two lines of JavaScript.
• Flexible - Can be used with almost any type of data: HTML table, arrays and JSON.
• Customisable - define the size, colour, labels, scale, type and spacing for your charts.

Continue reading...

Demos

Line Charts

• Basic line chart
• Setting data with JSON, sizing and colouring
• Defining labels and setting data with a HTML table
• Data scaling a line chart
• Multiple data tracks with an array on a line chart

Bar Charts

• Basic bar chart
• Setting data with JSON, sizing and colouring
• Defining labels and setting data with a HTML table
• Vertical bar chart
• Data scaling a bar chart
• Multiple data tracks with a JSON object in a bar chart

Pie Charts

• Basic pie chart
• Setting data with JSON
• Setting data with a HTML table, changing the type of bar chart, and changing the colour
• Overriding labels on the chart
• Multiple data tracks with a HTML table in a pie chart

Side-by-side Charts

• Basic side-by-side chart
• Setting data with JSON, adding axisLabels and overriding labels on the chart
• Setting data with a HTML table, adding grid lines and changing the colour
• Data scaling a side-by-side chart

Setup

To use the JavaScript API first add the below code into your page, then add one of the code examples into the window.onload function:

<script type="text/javascript" src="jseasycharts.min.js"></script>
<script type="text/javascript">
window.onload = function () {
	// Examples go in here
}
</script>

More about jsEasyCharts

jsEasyCharts will work in the following browsers:

• Internet Explorer 6/7/8
• Firefox 1.5/2/3
• Chrome
• Opera 9/10
• Safari 2/3/4

The latest version of jsEasyChart has a new type of chart, the Side-By-Side chart. This is unique to jsEasyChart, it allows you to compare two tracks of bar chart data side by side, showing each item of the tracks together.

What jsEasycharts is not

jsEasyCharts is a clean and simple way to put a chart into your page. There are many other great JavaScript charting solutions out there. jsEasyCharts does not give you an interactive chart, if you want a more dynamic chart then please look at any of the following charting solutions:

• Google Visualization API, Google's own excellent (but quite complicated) interactive charting solution.
• Bluff, a free solution by James Coglan that uses the canvas element. It looks very good but has limited documentation.
• Emprise JavaScript Charts, a paid for solution that uses the canvas element.
• Raphael JavaScript Library, a beautiful collection of different graphs, again using the canvas element.
• JS Charts, another paid for solution that uses the canvas element.