900_080_hatch.js

Previous Chapter          Previous Page          Next Page          Table of content

Hatch between two lines

When you have two lines, you can use this add-ins to produce hatching lines between the lines.

The code of this add-ins can be reused to perform other kind of hatching. For people interested in the code, it combines two features : the option linkType=1 with "origin" variable (see : https://github.com/FVANCOP/ChartNew.js/wiki/100_070_Graph_Layout#linktype) and the xPos in the data (see : https://github.com/FVANCOP/ChartNew.js/wiki/070_010_Line).

Examples : see Samples\hatch1.html and Samples\hatch2.html

Restrictions

This will only works for charts with two lines and with options bezierCurve and datasetFill set to false.

How to implement hatch between two lines ?

• Include the the add-ins "Add-ins\hatch.js" in your code.
• Just after the data, call the function "addHatch".

Example :

 <SCRIPT src='../ChartNew.js'></script>
 <SCRIPT src='../Add-ins/hatch.js'></script>

 <SCRIPT>

 var mydata1 = {
     labels : ["Jan","Feb","Mar","Apr","Mai","Jun","Jul","Aug","Sep"],
     datasets : [
	{
		strokeColor : "black",
		data : [10,20,-5,-40,-30,50,100,70,-30],
  			title : "data1"
	},
	{
		strokeColor : "green",
  			data : [20,0,-30,10,-10,-20,70,10,10],
  			title : "data2"
	}
     ]
 };
 addHatch(mydata1,{animation : false, positive_strokeColor : "green"}); 
 var myoptions = {
     animation : true,
     // change options default values for producing the good result;
     datasetFill : false,
     bezierCurve : false
 };       

Parameters for function addHatch

The function addHatch has two parameters. The first one is the "data" to produce in the chart; The second one is an array of options. Each option has a default value; If you want to change the default value of the option, you have to specify it in the second parameter with the new value.

List of the available options

• nb_hatch_lines - default value : 100 - This parameter specify the number of hash lines that has to be drawn. With lot of hatch lines, you can fill the completely the space between the two lines (see third sample here before).
• animation - default value : true - If for your chart, the option animation is set to true, the two lines will appear in an animation and, by default, the hashing will also be animated. If you have lot of hash lines, the display will be very slow. If you don't want to animate the hash lines, just specify "animation : false" in the options (see example here before).

Options active for the hashing displayed when the first line is above the second line :

• positive_inGraphDataShow - default value : false - If general option "inGraphDataShow" is set to true and if you want that the inGraphData has to be displayed for the hash lines, set option to true.
• positive_annotateDisplay - default value : false - If general option "annotateDisplay" is set to true and if you want that the annotation has to be displayed for the hash lines, set option to true.
• positive_title - default value : "" - If the hash line has to appear in the legend, set the text that has to be put in the legend.
• positive_strokeColor - default value : "red" - Color of hash line
• positive_datasetStrokeWidth - default value : 2 - Width of hash line
• positive_datasetStrokeStyle - default value : "solid" - Type of hash line
• positive_pointColor - default value : "rgba(0,0,0,0)" -
• positive_pointStrokeColor - default value : "rgba(0,0,0,0)" -

Corresponding options active for the hashing displayed when the first line is below the second line :

• negative_inGraphDataShow
• negative_annotateDisplay
• negative_title
• negative_strokeColor - default value : "blue"
• negative_datasetStrokeWidth
• negative_datasetStrokeStyle
• negative_pointColor
• negative_pointStrokeColor

"negative_xxxx" options have the same default value has the corresponding "posive_xxxx" option except for the strokeColor which is "blue" for negative_strokeColor.

Previous Chapter          Previous Page          Next Page          Top of Page