Passer en langue franšaise Switch to english

Izzyway

JS Chart

Introduction

JS Chart is a js library to create chart. Easy, free and still in progress.

Licence

This library is under the Apache 2.0 licence.

Git repository

Available on GitHub: https://github.com/izzyway/izzychart

Documentation

Constructor

ConstructorParametersDescription
IzzyChartnoneCreate a new Chart Object

Methods

MethodParametersDescription
addSeriesdata - JSONArray of JSONArrayAdd a series to the chart.
Sample: addSeries([[1,2], [3,4]]);
drawid - String
config - JSONObject (optional)
draw the chart to the HTML element of the given id (see below for the detail of the configuration)

JSONObject config

Option nameTypeDefault valueDescription
debugBooleanfalseSet the debug mode (display message in the js console)
titleStringEmptyTitle of the chart
widthNumber800Width of the chart
heightNumber600Height of the chart
borderJSONObjectDefine the border of the chart
border.widthNumber4Width of the border
border.colorStringblackColor of the border
border.displayStringsolidDisplay of the border (accepted values: solid, none)
border.cornerStringsquareDefine the corner of the border (accepted values: square, rounded)
gridXJSONObjectDefine vertical lines
gridX.widthNumber1Width of the line
gridX.colorStringlightgrayColor of the line
gridX.displayStringdottedDisplay of the line (accepted values: solid, dotted, none)
gridX.scaleString / NumberautoDefine the scale (space between each line)
gridYJSONObjectDefine horizontal lines
gridY.widthNumber1Width of the line
gridY.colorStringlightgrayColor of the line
gridY.displayStringdottedDisplay of the line (accepted values: solid, dotted, none)
gridY.scaleString / NumberautoDefine the scale (space between each line)
axisXJSONObjectDefine vertical axis
axisX.widthNumber1Define the width axis
axisX.colorStringdarkgrayColor of the axis
axisX.displayStringdottedDisplay of the axis (accepted values: solid, dotted, none)
axisX.scaleString / NumberautoDefine the scale (space between each line)
axisX.labelJSONObectDefine the labels of the axis
axisX.label.fontStringVerdanaDefine the font of the labels
axisX.label.sizeNumber10Define the size of the labels
axisX.label.colorStringblackDefine the color of the labels
axisX.label.formatString#.##Define the number's format of the labels (ie: #,# or #.###)
axisYJSONObjectDefine horizontal axis
axisY.widthNumber1Define the width axis
axisY.colorStringdarkgrayColor of the axis
axisY.displayStringdottedDisplay of the axis (accepted values: solid, dotted, none)
axisY.scaleString / NumberautoDefine the scale (space between each line)
axisY.labelJSONObectDefine the labels of the axis
axisY.label.fontStringVerdanaDefine the font of the labels
axisY.label.sizeNumber10Define the size of the labels
axisY.label.colorStringblackDefine the color of the labels
axisY.label.formatString#.##Define the number's format of the labels (ie: #,# or #.###)
legendJSONObjectDefine the legend
legend.positionStringtop rightDefine the position of the legend (accepted values: top, bottom, right, left, none)
legend.backgroundStringwhiteDefine the background of the legend
legend.borderJSONObjectDefine the border of legend
legend.border.colorStringblackDefine the color of border of legend
legend.border.widthNumber1Define the color of border of legend
legend.labelJSONObjectDefine the label of legend
legend.label.fontStringVerdanaDefine the font of the label of legend
legend.label.sizeNumber10Define the size of the label of legend
legend.label.colorStringblackDefine the color of the label of legend
seriesJSONArrayDefine the parameters of the series
series[x].colorStringColor of the series
series[x].sizeNumber2Size of the line of the series
series[x].displayStringcurvedDisplay of the line of the series (accepted values: curved, line)
series[x].typeStringlineSeries'type (accepted values: bar, line)

Demo 1



<div id = "izzychart">
</div>

Demo 2



<div id = "izzychart2">
</div>