JavaScript charts | How to use


Implementation | Multiple data | Customization | Reference | Line charts | Bar charts | Pie charts

Constructor reference

Constructor Description
JSCharts(string containerid, string charttype, string domainKeys)

All charts must be initialized using this constructor. Containerid represents the ID of the element where the chart will be generated. Charttype sets the type of the chart (the only possible values are line, bar and pie). Containerid and charttype are mandatory.

DomainKeys is a list of hash keys generated for the Internet domains where the charts will be hosted on. The list can contain at least one key corresponding for an Internet domain.

Note: If such a domain key is not specified, the chart will always display a watermark. For more information on the domain keys please consult the Watermark section.

Chart data reference

The chart data are always represented as an array. Each array element represents a set of chart data, for example a point on a line chart. The chart data set must have a certain format depending on the chart type:

  • Line type - array(number, number)

    where the first number represents the value on the horizontal axis and the second number represents the values on the vertical axis.

  • Bar type - array(string, number)

    where the string is the bar name on horizontal axis and the number is its value on the vertical axis.

  • Pie type - array(string, number)

    where the string is the section name and the number represents the section value.

Line type example:

var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);

Bar or pie type example:

var myData = new Array(['unit', 20], ['unit two', 10], ['unit three', 30], ['other unit', 10], ['last unit', 30]);

If you add the chart data by XML, the chart type has no significance on how you represent the data sets, even though you still need to mention the chart type in the dataset node. All data are added like in the following example:

<?xml version="1.0"?>
<JSChart>
	<dataset type="line">
		<data unit="10" value="20"/>
		<data unit="15" value="10"/>
		<data unit="20" value="30"/>
		<data unit="25" value="10"/>
		<data unit="30" value="5"/>
	</dataset>
</JSChart>

Methods reference

Method Description
clearLabels()

This method could be useful if you run the .draw() methods again and you want to clear all labels displayed in the initial chart.

clearLabelsX()

This method could be useful if you run the .draw() methods again and you want to clear all labels on the X axis displayed in the initial chart.

clearLabelsY()

This method could be useful if you run the .draw() methods again and you want to clear all labels on the Y axis displayed in the initial chart.

clearTooltips()

This method could be useful if you run the .draw() methods again and you want to clear all tooltips in the initial chart.

colorizeBars(array colordata)

Assign colors to different bars in a bar type chart. Colordata is an array consisting of colors expressed in hexadecimal format and must have the same length as the data length. Each color is assigned to one bar data.

Please note that the colorizeBars() function has no effect on line or pie charts.

The setBarColor() function can be used to set all bars within a bar chart to the same color; colorize() overrides setBarColor().

var myColors = new Array('#0f0', '#ff0000', '#00f', '#ff0', '#00ffff');
myChart.colorizeBars(myColors);

The XML file can hold the colors in the colorset section:

<?xml version="1.0"?>
<JSChart>
	<dataset type="line">
		<data unit="10" value="20"/>
		<data unit="15" value="10"/>
		<data unit="20" value="30"/>
		<data unit="25" value="10"/>
		<data unit="30" value="5"/>
	</dataset>
	<colorset>
		<color value="#0f0"/>
		<color value="#ff0000"/>
		<color value="#00f"/>
		<color value="#ff0"/>
		<color value="#00ffff"/>
	</colorset>
</JSChart>

The colorset section in the XML file can also be used to colorize a pie chart.

colorizePie(array colordata)

Similar to colorizeBars(), colorizePie() assigns colors to different pie sections in a pie type chart. Colordata is an array consisting of colors expressed in hexadecimal format and must have the same length as the data length. Each color is assigned to one pie data.

Please note that colorizePie() function has no effect on line or bar charts.

If the colorizePie() function is not used, the pie sections within a pie chart will have random colors.

The colorizePie() function is used very similar to the colorizeBars() function:

var myColors = new Array('#0f0', '#ff0000', '#00f', '#ff0', '#00ffff');
myChart.colorizePie(myColors);

The XML usage to colorize pie charts is identical to the method described at the colorizeBars() function (using the colorset section).

draw()

This function draws the chart within the set container with the set options and data. The data loading function has to be executed before draw() and any options (including colors) must be set before draw().

resize(integer x, integer y)

Resize an already drawn chart. X and y must be integers representing the new width and height respectively. The default size dimension for the chart is 400px/300px.

set3D(boolean 3d)

Set 3D aspect for bar and pie charts.

setArea(string unit, callback)

Set a click area for a bar or pie section. This function has no effect on line charts. Callback must be a Javascript function.

setAxisAlignFirstX(boolean align)

Set this to true to align the first value on the X axis with the left graph margin. This function has an effect only on line charts. Default is false.

setAxisAlignFirstY(boolean align)

Set this to true to align the first value on the Y axis with the bottom graph margin. This function has no effect on pie charts. Default is false.

setAxisAlignLastX(boolean align)

Set this to true to align the last value on the X axis with the right graph margin. This function has an effect only on line charts. Default is false.

setAxisAlignLastY(boolean align)

Set this to true to align the last value on the Y axis with the top graph margin. This function has no effect on pie charts. Default is false.

setAxisAlignX(boolean align)

Set this to true to align the first and last values on the X axis with the graph margins. This function has an effect only on line charts. Default is false.

setAxisAlignY(boolean align)

Set this to true to align the first and last values on the Y axis with the graph margins. This function has no effect on pie charts. Default is false.

setAxisColor(string hexcolor)

Set both axes color. Please note that this function has no effect on pie charts. Default color is #B5B5B5.

setAxisNameColor(string hexcolor)

Set the color for both axes names. This function has no effect on pie charts. Default color is #999.

setAxisNameColorX(string hexcolor)

Set the color for horizontal axis name. This function has no effect on pie charts. Default color is #999.

setAxisNameColorY(string hexcolor)

Set the color for vertical axis name. This function has no effect on pie charts. Default color is #999.

setAxisNameFontFamily(string fontfamily)

Set the font family for both axes names. This function has no effect on pie charts. Default is arial.

setAxisNameFontFamilyX(string fontfamily)

Set the font family for the X axis name. This function has no effect on pie charts. Default is arial.

setAxisNameFontFamilyY(string fontfamily)

Set the font family for the Y axis name. This function has no effect on pie charts. Default is arial.

setAxisNameFontSize(integer fontsize)

Set the font size for the axes names. This function has no effect on pie charts. Default font size is 11.

setAxisNameFontSizeX(integer fontsize)

Set the font size for the horizontal axis name. This function has no effect on pie charts. Default font size is 11.

setAxisNameFontSizeY(integer fontsize)

Set the font size for the vertical axis name. This function has no effect on pie charts. Default font size is 11.

setAxisNameX(string axisname, boolean rotate)

Set name for X axis. This function has no effect on pie charts. Default name is X.
The rotate parameter is optional and if set to true it rotates the axis name with 90 degrees. Default is false.

setAxisNameY(string axisname, boolean rotate)

Set name for Y axis. This function has no effect on pie charts. Default name is Y.
The rotate parameter is optional and if set to true it rotates the axis name with 90 degrees. Default is false.

setAxisPaddingBottom(integer padding)

Set the bottom padding distance between X axis and bottom <canvas> margin. Default is 30.

setAxisPaddingLeft(integer padding)

Set the left padding distance between Y axis and left <canvas> margin. Default is 40.

setAxisPaddingRight(integer padding)

Set the right padding distance between graph and right <canvas> margin. Default is 30.

setAxisPaddingTop(integer padding)

Set the top padding distance between graph and top <canvas> margin. Default is 50.

setAxisReversed(boolean reverse)

Horizontal bar charts. It switches the axes and all options regarding the axes, values, labels. This function has an effect only on bar charts. Default is false.

setAxisValuesAngle(integer angle)

Set the angle of rotation (anti-clockwise) for the values on the X axis. Possible values are between 0 and 90. This function has no effect on pie charts. Default value is 0.

setAxisValuesColor(string hexcolor)

Set the color for both X and Y axis value. This function has no effect on pie charts. Default color is #777.

setAxisValuesColorX(string hexcolor)

Set the color for X axis values. This function has no effect on pie charts. Default color is #777.

setAxisValuesColorY(string hexcolor)

Set the color for Y axis values. This function has no effect on pie charts. Default color is #777.

setAxisValuesDecimals(integer decimals)

Set number of decimals for both X and Y axis values for line charts, and for Y axis values for bar charts. This function has no effect on pie charts. Default is auto.

setAxisValuesDecimalsX(integer decimals)

Set number of decimals for X axis values for line charts. This function has no effect on bar and pie charts. Default is auto.

setAxisValuesDecimalsY(integer decimals)

Set number of decimals for Y axis values. This function has no effect on pie charts. Default is auto.

setAxisValuesFontFamily(string fontfamily)

Set the font family for values on both axes. This function has no effect on pie charts. Default is arial.

setAxisValuesFontFamilyX(string fontfamily)

Set the font family for values on the X axis. This function has no effect on pie charts. Default is arial.

setAxisValuesFontFamilyY(string fontfamily)

Set the font family for values on the Y axis. This function has no effect on pie charts. Default is arial.

setAxisValuesFontSize(integer fontsize)

Set the font size for the values on both axes. This function has no effect on pie charts. Default size is 8.

setAxisValuesFontSizeX(integer fontsize)

Set the font size for the values on X axis. This function has no effect on pie charts. Default size is 8.

setAxisValuesFontSizeY(integer fontsize)

Set the font size for the values on Y axis. This function has no effect on pie charts. Default size is 8.

setAxisValuesNumberX(integer number)

Set the number of values to show on X axis. If this number is too high for all the values to fit on the axis, it will be automatically reduced. Values of 0 and 1 can be used to show all values corresponding to the input data length. This function has no effect on pie charts or bar charts. Default is 0 (i.e. auto - input data length).

setAxisValuesNumberY(integer number)

Set the number of values to show on Y axis. If this number is too high for all the values to fit on the axis, it will be automatically reduced. Values of 0 and 1 can be used to show all values corresponding to the input data length. This function has no effect on pie charts. Default is 0 (i.e. auto - input data length).

setAxisValuesPaddingBottom(integer padding)

Set the bottom padding distance between X axis values and bottom <canvas> margin. This function has no effect on pie charts. Default is false (auto).

setAxisValuesPaddingLeft(integer padding)

Set the bottom padding distance between Y axis values and left <canvas> margin. This function has no effect on pie charts. Default is false (auto).

setAxisValuesPrefixX(string prefix)

Set prefix for values on X axis. This function has no effect on pie or bar charts. Default is false.

setAxisValuesPrefixY(string prefix)

Set prefix for values on Y axis. This function has no effect on pie charts. Default is false.

setAxisValuesSuffixX(string suffix)

Set suffix for values on X axis. This function has no effect on pie or bar charts. Default is false.

setAxisValuesSuffixY(string suffix)

Set suffix for values on Y axis. This function has no effect on pie charts. Default is false.

setAxisWidth(integer width)

Set axis width. This function has no effect on pie charts. Default is 2.

setBackgroundColor(string hexcolor)

Set a background color for the whole chart. Default is #FFF.

setBackgroundImage(string filename)

Set a background image for the whole chart. The image will repeat itself on both axes. Default is false.

setBarBorderColor(string hexcolor)

Set a color for the bar borders. This function has an effect only for bar charts. Default is #C4C4C4.

setBarBorderWidth(integer width)

Set bars border width. This function has an effect only for bar charts. Default is 1.

setBarColor(string hexcolor, integer series)

Set a color for all bars in a bar chart. The series integer is optional and it narrows the change for a specific series. This function is overwritten by the colorize() function. This function has an effect only for bar charts. Default is #3E90C9.

setBarDepth(integer depth)

Set the depth of 3D bar charts. This function has an effect only for 3D bar charts. Default is 10.

setBarOpacity(float opacity)

Set the opacity for bars. It can be any floating number between 0 and 1 (for example 0.5 will make the bars half transparent). This function has an effect only for bar charts. Default is 0.9.

setBarSpacingRatio(integer ratio)

Set a spacing ratio between bars on bar charts. Use this to control the bars width; setting it to 0 will leave no space between the bars. Use any integer between 0 and 100. This function has an effect only for bar charts. Default is 10.

setBarSpeed(integer speed)

Set the rendering speed for bar charts. Speed can be a number between 1 and 100. The value of 100 will cancel the animation. This function has an effect only for bar charts. Default is 90.

setBarValues(boolean values)

Set this to true or false to either show or not the values on top of the bars. This function has an effect only for bar charts. Default is true.

setBarValuesColor(string hexcolor)

Set color for the bar's value. This function has an effect only for bar charts. Default is #2F6D99.

setBarValuesDecimals(integer decimals)

Set number of decimals for the bar's value. This function has an effect only on bar charts. Default is auto.

setBarValuesFontFamily(string fontfamily)

Set the font family for the bar's value. This function has an effect only on bar charts. Default is arial.

setBarValuesFontSize(integer fontsize)

Set the font size for the bar's value. This function has an effect only on bar charts. Default font size is 8.

setBarValuesPrefix(string prefix)

Set prefix for bar's values. This function has an effect only on bar charts. Default is false.

setBarValuesSuffix(string suffix)

Set suffix for bar's values. This function has an effect only on bar charts. Default is false.

setCanvasIdPrefix(string prefix)

Customize the prefix attached to the generated <canvas> ID to avoid any conflicts with other element IDs on your page. Default is JSChart_.

setDataArray(array data, string id, boolean usestring)

Import chart data as array. See the Implementation chapter. The id is optional and can be used to associate the data set with a setting with the same id (default value is null). The boolean usestring can be set to true to force the interpretation as strings of the X axis values. Also see the Implementation chapter.

setDataJSON(array filename)

Import chart data as json. See the Implementation chapter.

setDataXML(string filename|string data, boolean isString)

Import chart data as XML. If isString is true, the first argument will be interpreted as XML data rather than the path to the XML file. See more in the Implementation and Customization chapters.

setErrors(boolean errors)

Activate/deactivate error alerts. Error alerts produced before this are not affected. Default is true.

setFlagColor(string hexcolor)

Set a color for the tooltip flags. Default is #F00.

setFlagFillColor(string hexcolor)

Set the color for the inside of the tooltip flags. Default is false (transparent).

setFlagOffset(integer offset)

Set the tooltip flag offset for pie charts. Positive numbers will place the flag outside the pie and negative numbers will place the flag inside the pie. A zero value will place the flag on the pie border. This function has an effect only on pie charts. Default is -50.

setFlagOpacity(float opacity)

Set the opacity for tooltip flags. It can be any floating number between 0 and 1 (for example 0.5 will make the flag half transparent). Default is 1 (opaque).

setFlagRadius(integer radius)

Set tooltip flag radius. Default is 3.

setFlagShape(string shape)

Set the shape of the tooltip flags. Possible values are circle, square, diamond and triangle. Default is circle.

setFlagWidth(integer width)

Set the tooltip flag border width. Default is 1.

setFontFamily(string fontfamily)

Set the global font family. Default is arial.

setGraphExtend(boolean extend)

Toggle the graph extending option. When true, the graph axes and the grid lines (if grid enabled) will extend with a length equal to the 15th part of the axis length. This can help aesthetically improve the graph. Default value is false.

setGraphExtendX(boolean extend)

Similar to above but on horizontal grid lines only. Default value is false.

setGraphExtendY(boolean extend)

Similar to above but on vertical grid lines only. Default value is false.

setGrid(boolean grid)

Set this to true or false to either show or not the grid behind the charts. This function has no effect on pie charts. Default is true.

setGridColor(string hexcolor)

Set the grid color. This function has no effect on pie charts. Default is #C6C6C6.

setGridColorX(string hexcolor)

Set the horizontal grid color. This function has no effect on pie charts. Default is #C6C6C6.

setGridColorY(string hexcolor)

Set the vertical grid color. This function has no effect on bar and pie charts. Default is #C6C6C6.

setGridOpacity(float opacity)

Set grid opacity. It can be any floating number between 0 and 1 (for example 0.5 will make the grid half transparent). This function has no effect on pie charts. Default is 0.5.

setGridOpacityX(float opacity)

Set horizontal grid opacity. It can be any floating number between 0 and 1 (for example 0.5 will make the grid half transparent). This function has no effect on pie charts. Default is 0.5.

setGridOpacityY(float opacity)

Set vertical grid opacity. It can be any floating number between 0 and 1 (for example 0.5 will make the grid half transparent). This function has no effect on bar and pie charts. Default is 0.5.

setIntervalEndX(integer end)

Used to only show a fragment of the graph with the aid of interval settings on axes. End value of the interval on X axis must be greater than any start value if set. This function has an effect only on line charts. Default is false.

setIntervalEndY(integer end)

Used to only show a fragment of the graph with the aid of interval settings on axes. End value of the interval on Y axis must be greater than any start value if set. This function has no effect on pie charts. Default is false.

setIntervalStartX(integer start)

Used to only show a fragment of the graph with the aid of interval settings on axes. Start value of the interval on X axis must be smaller than any end value if set. This function has an effect only on line charts. Default is false.

setIntervalStartY(integer start)

Used to only show a fragment of the graph with the aid of interval settings on axes. Start value of the interval on Y axis must be smaller than any end value if set. This function has no effect on pie charts. Default is false.

setIntervalX(integer start, integer end)

Shortcut for setIntervalStartX and setIntervalEndX.

setIntervalY(integer start, integer end)

Shortcut for setIntervalStartY and setIntervalEndY.

setLabelAlignFirstX(boolean align)

Set this to true to align the first label on the X axis with the left graph margin. This function has an effect only on line charts. Default is false.

setLabelAlignFirstY(boolean align)

Set this to true to align the first label on the Y axis with the bottom graph margin. This function has no effect on pie charts. Default is false.

setLabelAlignLastX(boolean align)

Set this to true to align the last label on the X axis with the right graph margin. This function has an effect only on line charts. Default is false.

setLabelAlignLastY(boolean align)

Set this to true to align the last label on the Y axis with the top graph margin. This function has no effect on pie charts. Default is false.

setLabelAlignX(boolean align)

Set this to true to align the first and last labels on the X axis with the graph margins. This function has an effect only on line charts. Default is false.

setLabelAlignY(boolean align)

Set this to true to align the first and last labels on the Y axis with the graph margins. This function has no effect on pie charts. Default is false.

setLabelColor(string hexcolor)

Set the font color for labels on both axes. This function has no effect on pie charts. Default is #777.

setLabelColorX(string hexcolor)

Set the font color for labels on X axis only. This function has no effect on pie charts. Default is #777.

setLabelColorY(string hexcolor)

Set the font color for labels on Y axis only. This function has no effect on pie charts. Default is #777.

setLabelFontFamily(string fontfamily)

Set the font family for labels on both axes This function has no effect on pie charts. Default is arial.

setLabelFontFamilyX(string fontfamily)

Set the font family for labels on the X axis This function has no effect on pie charts. Default is arial.

setLabelFontFamilyY(string fontfamily)

Set the font family for labels on the Y axis This function has no effect on pie charts. Default is arial.

setLabelFontSize(integer size)

Set the font size for labels on both axes. This function has no effect on pie charts. Default is 8.

setLabelFontSizeX(integer size)

Set the font size for labels on X axis only. This function has no effect on pie charts. Default is 8.

setLabelFontSizeY(integer size)

Set the font size for labels on Y axis only. This function has no effect on pie charts. Default is 8.

setLabelPaddingBottom(integer padding)

Set the bottom padding distance between X axis labels and bottom <canvas> margin. This function has no effect on pie charts. Default is false (auto).

setLabelPaddingLeft(integer padding)

Set the bottom padding distance between Y axis labels and left <canvas> margin. This function has no effect on pie charts. Default is false (auto).

setLabelX(array label)

Define a label on the X axis. The argument is an array of two elements. The first element is the value to which the label is attached, and the second element is the actual string which will show as label.

myChart.setLabelX([15, 'My label']);

In the above example, a label is defined for a line chart. The label will appear for the 15 X value of the graph.

Next example is applicable for a pie chart or a bar chart:

myChart.setLabelX(['unit two', 'My label']);

Please note that this function has no effect on pie charts.

setLabelY(array label)

Define a label on the Y axis. The argument is an array of two elements. The first element is the value to which the label is attached, and the second element is the actual string which will show as label.

myChart.setLabelY([20, 'My label']);

In the above example, a label is defined for a line chart. The label will appear for the 20 Y value of the graph.

Next example is applicable for a pie chart or a bar chart:

myChart.setLabelY(['unit two', 'My label']);

Please note that this function has no effect on pie charts.

setLegend(string hexcolor, string text)

Add an item to the legends area. It is the only way to add legends to a pie chart.

setLegendColor(string hexcolor)

Set the font color for legends. Default is #999.

setLegendDetect(boolean detect)

Automatically detect series in a line or bar chart and create legend items. If a series does not have a literal name (id), a number will be used as text. Default is true.

setLegendFontFamily(string fontfamily)

Set the font family for legends. Default is arial.

setLegendFontSize(integer size)

Set the font size for legends. Default is 8.

setLegendForBar(integer series, string text)

Modify the legend item text for a specific series in a bar chart. Since bar series do not have names, the order number of the series must be used.

myChart.setLegendForBar(2, 'Legend item text for 2nd bar series']);

This function has an effect only on bar charts.

setLegendForLine(string id, string text)

Modify the legend item text for a specific series in a line chart. Id refers to the id of the specific line series. This function has an effect only on line charts.

setLegendPadding(integer padding)

Set the distance between the legends area and the <canvas> margin. The graph will follow the legend area unless the padding between the graph and the <canvas> margin is set (with setAxisPadding...). Default is false (padding is calculated automatically).

setLegendPosition(string position | integer x, integer y)

Set the position for the legends area. The position can be defined either by a string that defines the position relative to the graph, or by coordinates. The relative position values can be: top center, top left, top right, left top, left middle, left bottom, bottom left, bottom center, bottom right, right top, right middle and right bottom. For shortcuts the following strings can also be used: left (equivalent for left middle), bottom (equivalent to bottom center), right (equivalent to right middle). Default is 'top center'.

setLegendShow(boolean show)

Create a legend area. Legend items are added manually with setLegend(...) and/or automatically with setLegendDetect(true). Default is false.

setLineColor(string hexcolor, string id)

Set the line color for line charts. This function has an effect only on line charts. Default is #3E90C9. The id is optional and can be used to associate the setting with a data set with the same id.

setLineOpacity(float opacity, string id)

Set lines opacity for line charts. It can be any floating number between 0 and 1 (for example 0.5 will make the line half transparent). This function has an effect only on line charts. Default is 0.9. The id is optional and can be used to associate the setting with a data set with the same id.

setLineSpeed(integer speed)

Set the rendering speed for line charts. Speed can be a number between 1 and 100. The value of 100 will cancel the animation. This function has an effect only for line charts. Default is 90.

setLineWidth(integer width, string id)

Set lines width for line charts. This function has an effect only on line charts. Default is 2. The id is optional and can be used to associate the setting with a data set with the same id.

setPieAngle(integer depth)

Set the angle of 3D pie charts. Possible values are between 0 and 89. This function has an effect only on 3D pie charts. Default is 45.

setPieDepth(integer depth)

Set the depth of 3D pie charts. This function has an effect only on 3D pie charts. Default is 15.

setPieOpacity(float opacity)

Set pie opacity for pie charts. It can be any floating number between 0 and 1 (for example 0.5 will make the pie half transparent). This function has an effect only on pie charts. Default is 1 (opaque).

setPiePosition(integer x, integer y)

Set the pie position within the <canvas>. This function has an effect only on pie charts. A 0 value on X or Y will center the pie on that axis. Default values are both 0.

setPieRadius(integer radius)

Set the pie radius. This function has an effect only on pie charts. Default value is the shortest <canvas> side divided by 3.75.

setPieUnitsColor(string hexcolor)

Set the color for the pie unit texts (section names). This function has an effect only on pie charts. Default is #777.

setPieUnitsFontFamily(string fontfamily)

Set the unit texts font family. This function has an effect only on pie charts. Default is false.

setPieUnitsFontSize(integer fontsize)

Set the unit texts font size. This function has an effect only on pie charts. Default is 8.

setPieUnitsOffset(integer offset)

Set the unit texts offset for pie charts. Positive numbers will place the text outside the pie and negative numbers will place the text inside the pie. This function has an effect only on pie charts. Default is 10.

setPieValuesColor(string hexcolor)

Set the value texts color. This function has an effect only on pie charts. Default is #fff.

setPieValuesDecimals(integer decimals)

Set number of decimals for values on pie. This function has an effect only on pie charts. Default is 0.

setPieValuesFontFamily(string fontfamily)

Set font family for value texts on pie charts. This function has an effect only on pie charts. Default is false.

setPieValuesFontSize(integer fontsize)

Set font size for value texts on pie charts. This function has an effect only on pie charts. Default is 8.

setPieValuesOffset(integer offset)

Set the value texts offset for pie charts. Positive numbers will place the text outside the pie and negative numbers will place the text inside the pie. This function has an effect only on pie charts. Default is -20.

setPieValuesPrefix(string prefix)

Set prefix for value texts on pie charts. This function has an effect only on pie charts. Default is false.

setPieValuesSuffix(string suffix)

Set suffix for value texts on pie charts. This function has an effect only on pie charts. Default is false.

setShowXValues(boolean show)

Toggle either to show or not the values on X axis or section names on pie charts. This function has no effect on pie charts. Default is true.

setShowYValues(boolean show)

Toggle either to show or not the values on Y axis or values on pie charts. This function has no effect on pie charts. Default is true.

setSize(integer x, integer y)

Predefine the <canvas> size, before drawing the chart. Default sizes are 400/300.

setTextPaddingBottom(integer padding)

Set the bottom padding distance between X axis text and bottom <canvas> margin. Default is 1.

setTextPaddingLeft(integer padding)

Set the left padding distance between Y axis text and left <canvas> margin. Default is 8.

setTextPaddingTop(integer padding)

Set the top padding distance between graph title and top <canvas> margin. Default is 15.

setTitle(string title)

Set the chart title. If you want no title to show, set this to an empty string. Default is JS Chart.

setTitleColor(string hexcolor)

Set the chart title color. Default is #8E8E8E.

setTitleFontFamily(string fontfamily)

Set the font family for the chart title. Default is arial.

setTitleFontSize(integer fontsize)

Set font size for the chart title. Default is 11.

setTitlePosition(string position)

Set the title position horizontally. Possible values are center, left and right. Left and right position are influenced by the setAxisPaddingLeft() and setAxisPaddingRight() functions since the title will be aligned with the left/right margins of the chart. Default value is center.

setTooltip(array tooltip, function callback)

Define a tooltip. The argument is an array of one, two or three elements. The first element is the value to which the tooltip is attached, and the second element is an optional string which will show in the tooltip. By default, the tooltip contents are the attached values and are replaced by the optional string.

myChart.setTooltip([15]);
myChart.setTooltip([30, 'custom<br>contents']);

In the above example, two tooltips are defined for a line chart. The first will appear for the 15 value on the X axis of the graph. The second will appear for the 30 value on the X axis with a custom content.

For line charts, a third optional element can be used in the array to set the tooltip for the line with the same id only, useful if using multiple lines charts. Only works with line charts.

myChart.setTooltip([15, '', 'first line']);
myChart.setTooltip([30, 'custom<br>contents', 'second line']);

Next example is applicable for a pie chart or a bar chart:

myChart.setTooltip(['unit two']);
myChart.setTooltip(['last unit', 'custom<br>contents']);

The second argument is optional and must be a function to be called when the user clicks on the tooltip flag:

myChart.setTooltip([15], function(){alert('callback');});

If instead the tooltip contents string, the boolean false is used, no tooltip will be displayed but the tooltip flag cycle will show and any callback function will also work:

myChart.setTooltip([15, false], callback);
setTooltipBackground(string hexcolor)

Set the tooltips background color. Default value is #E6E6E6.

setTooltipBorder(string css)

Set the tooltips border styling. It must be a CSS expression. Default is 1px solid #D3D3D3.

setTooltipFontColor(string hexcolor)

Set the tooltip's content color. Default is #00F.

setTooltipFontFamily(string font)

Set the tooltips font family. You can specify any font family like in a CSS declaration. Default value is arial.

setTooltipFontSize(integer fontsize)

Set the tooltips contents font size. Default is 12.

setTooltipOffset(integer offset)

Set the tooltip distance from the tooltip flag to the tooltip itself. Default is 7.

setTooltipOpacity(float opacity)

Set tooltips opacity. It can be any floating number between 0 and 1 (for example 0.5 will make the tooltips half transparent, 0 transparent and 1 opaque). Default is 0.7.

setTooltipPadding(string css)

Set the tooltips padding style. It must be a CSS expression. Default is 2px 5px.

setTooltipPosition(string position)

Set the tooltip position from the tooltip flag. Possible values are nw, ne, sw and se (meaning north-west, north-east, south-west, south-east and they correspond to top-left, top-right, bottom-left and bottom-right respectively). Default value is se.

setValuesFormat(string separator)

Set the decimal separator for the numeric values. Possible values are , (comma) and . (period). When setting , (comma), the thousands separator will be the . (period) and vice versa. When leaving the default value of false, the . (period) will be used as decimal separator and no thousands separator. Default is false.