JavaScript charts | How to use


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

Customization

JS Charts is a highly customizable Javascript library. There are several API functions for you to customize your charts. You can customize the charts: using the built-in Javascript functions and/or using the optionset node in the XML or JSON files.

  1. Using the built-in functions

    A few examples of how to customize a chart:

    <script type="text/javascript">
    	var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
    	var myChart = new JSChart('chartcontainer', 'line');
    	myChart.setDataArray(myData);
    	myChart.setBackgroundColor('#efe');
    	myChart.setAxisNameX('Custom X Axis Name');
    	myChart.setAxisNameY('Y Axis');
    	myChart.setSize(500, 400);
    	myChart.setTitle('My Chart Title');
    	myChart.setTitleColor('#5555AA');
    	myChart.setTitleFontSize(10);
    	myChart.draw();
    </script>
    Fig. 3.1 - Customized chart

    All public functions are described in the Reference chapter.

    When using multiple data series in a line chart, you might want different settings for each line (e.g. different colors). This will require associating the data set with the customization method using an id. The setDataArray can be called using a second argument which will be the data set id. The same id must be used when calling e.g. setLineColor, setLineWidth or setLineOpacity to set a property for the specific data set. In the following example the first line id is used to colorize the first data set and the second line id is used to set the width of the line for the second data set. Also a tooltip is defined for the line with the first line id (you can read more about the tooltips in Reference).

    <script type="text/javascript">
    	var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
    	var myData2 = new Array([10, 10], [15, 5], [25, 25], [30, 20]);
    	var myChart = new JSChart('chartcontainer', 'line');
    	myChart.setDataArray(myData, 'first line');
    	myChart.setDataArray(myData2, 'second line');
    	myChart.setBackgroundColor('#efe');
    	myChart.setAxisNameX('Custom X Axis Name');
    	myChart.setAxisNameY('Y Axis');
    	myChart.setLineColor('#ff0f0f', 'first line');
    	myChart.setLineWidth(5, 'second line');
    	myChart.setSize(500, 400);
    	myChart.setTitle('My Chart Title');
    	myChart.setTitleColor('#5555AA');
    	myChart.setTitleFontSize(10);
    	myChart.setTooltip([15, 'My Tooltip', 'first line']);
    	myChart.draw();
    </script>
    Fig. 3.2 - Associated customization methods with data sets

    These ids do not require to be unique. The same id can be associated to more than one data set.

    If perhaps it is about a bar chart, since the series do not have ids, an order number is used instead. First series has the order number 1, second is 2 etc. In the example below, different colors are assigned to the two bar series:

    <script type="text/javascript">
    	var myData = new Array(['Unit_1', 20, 5], ['Unit_2', 10, 30], ['Unit_3', 30, 20], ['Unit_4', 10, 15], ['Unit_5', 5, 10]);
    	var myChart = new JSChart('chartcontainer', 'bar');
    	myChart.setDataArray(myData);
    	myChart.setBackgroundColor('#efe');
    	myChart.setBarColor('#ff0f0f', 1);
    	myChart.setBarColor('#0fff0f', 2);
    	myChart.setSize(500, 400);
    	myChart.setTitle('My Chart Title');
    	myChart.setTitleColor('#5555AA');
    	myChart.setTitleFontSize(10);
    	myChart.draw();
    </script>
    Fig. 3.3 - Multiple series bar chart
  2. Using optionset

    Optionset is a special node which can be inserted in the XML or JSON file that is used to import data into the chart.

    <?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>
    	<optionset>
    		<option set="setBackgroundColor" value="'#efe'"/>
    		<option set="setAxisNameX" value="'Custom X Axis Name'"/>
    		<option set="setAxisNameY" value="'Y Axis'"/>
    		<option set="setSize" value="500,400"/>
    		<option set="setTitle" value="'My Chart Title'"/>
    		<option set="setTitleColor" value="'#5555AA'"/>
    		<option set="setTitleFontSize" value="10"/>
    	</optionset>
    </JSChart>
    Fig. 3.4 - Example using optionset within an XML file
    {
    	"JSChart" : {
    		"datasets" : [
    			{
    				"type" : "line",
    				"data" : [
    					{
    						"unit" : "10",
    						"value" : "20"
    					},
    					{
    						"unit" : "15",
    						"value" : "20"
    					},
    					{
    						"unit" : "20",
    						"value" : "30"
    					},
    					{
    						"unit" : "25",
    						"value" : "10"
    					},
    					{
    						"unit" : "30",
    						"value" : "5"
    					}
    				]
    			}
    		],
    		"optionset" : [
    			{
    				"set" : "setBackgroundColor",
    				"value" : "'#efe'"
    			},
    			{
    				"set" : "setAxisNameX",
    				"value" : "'Custom X Axis Name'"
    			},
    			{
    				"set" : "setAxisNameY",
    				"value" : "'Y Axis'"
    			},
    			{
    				"set" : "setSize",
    				"value" : "500,400"
    			},
    			{
    				"set" : "setTitle",
    				"value" : "'My Chart Title'"
    			},
    			{
    				"set" : "setTitleColor",
    				"value" : "'#5555AA'"
    			},
    			{
    				"set" : "setTitleFontSize",
    				"value" : "10"
    			}
    		]
    	}
    }
    Fig. 3.5 - JSON equivalent of the XML above

    The <option> tag has two mandatory attributes. First attribute is set and is actually the usual Javascript function name. Second attribute is value and represents the exact arguments you would use for functions, including any commas or quotes (always use single quotes within the value because double-quotes would alter the XML syntax).

    When using multiple data sets for line charts and different customization is needed for different lines, the datasets must receive the id attribute which must be used as 2nd argument in the options as described in the example below:

    <?xml version="1.0"?>
    <JSChart>
    	<dataset type="line" id="first 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>
    	<dataset type="line" id="second line">
    		<data unit="10" value="10"/>
    		<data unit="15" value="5"/>
    		<data unit="25" value="25"/>
    		<data unit="30" value="20"/>
    	</dataset>
    	<optionset>
    		<option set="setBackgroundColor" value="'#efe'"/>
    		<option set="setAxisNameX" value="'Custom X Axis Name'"/>
    		<option set="setAxisNameY" value="'Y Axis'"/>
    		<option set="setLineColor" value="'#ff0f0f','first line'"/>
    		<option set="setLineWidth" value="5,'second line'"/>
    		<option set="setSize" value="500,400"/>
    		<option set="setTitle" value="'My Chart Title'"/>
    		<option set="setTitleColor" value="'#5555AA'"/>
    		<option set="setTitleFontSize" value="10"/>
    		<option set="setTooltip" value="[15, 'My Tooltip', 'first line']"/>
    	</optionset>
    </JSChart>
    Fig. 3.6 - Associated customization methods with data sets, XML style

For details on public methods see Reference.