900_070_SpecialInChartData.js
Previous Chapter Previous Page Next Page Table of content
With option inGraphDataShow, you can display information inside the chart (see https://github.com/FVANCOP/ChartNew.js/wiki/100_080_In_Graph_Data) . With the add-ins "specialInChartData.js", you can display the information in a more sophisticated way compared to the information displayed with option inGraphDataShow.
THIS ADD-INS IS ONLY IMPLEMENTED FOR PIE AND DOUGHNUT CHARTS. NOT FOR OTHER CHARTS.
Examples : see Samples\specialInChartData_example.html
The module "specialInChartData.js" uses the power of another add-ins : the shapesInChart.js module (see https://github.com/FVANCOP/ChartNew.js/wiki/900_050_Shapes-Text-Images_In_Chart ). The add-ins "specialInChartData.js" creates "shapes" entries in your data. The shapes are created according parameters specified in the data part and parameters specified in the call to the new function "pushInGraphData".
In current version, specialInChartData.js can be used for Pie and Doughnut charts only.
To configure the way the "In Graph Data" is displayed, you have to specify parameters.
To explain how to specify parameters, we will take the sample of the "link" parameter.
The parameter "link" specifies the type of the link that has to be used. In the sample before, for the data on the right, the link is "line" (there is a line between the piece of Pie and the label); For the data on the left, the link is "triangle" (there is a small triangle coming out of the piece of Pie and "pointing" to the associated label).
Each parameter has a default value ; For the "link" parameter, the default value is "line". If you want to change the default value of a parameter, you can do this using two methods :
As you will see later, you have to call the function "pushInGraphData" to create the "shapes" that will produce the described result. In the function pushInGraphData, one of the parameter is a array of values for all parameters for which you don't want to use the default value. For instance, if you want to set that the link is "triangle" (which is not the default value), you can pass {link: "triangle"} as parameter to the function pushInGraphData.
Instead of specifying the non default value in the call to function pushInGraphData, you can specify the value of the parameter directly in the data part. If the value of the parameter has to be the same for all data, it is preferable to use the method 1. The method 2 is interesting when the value of a parameter has to be different to the value specified through method 1. If a parameter is specified in the data part, this value will be used instead of the value specified throught method 1.
Example : you want to use the link:"triangle" except for the second data that has to be link:"line".
var mydata = {
datasets : [
{
data : [30],
fillColor: "#D97041",
title : "January"
},
{
link : "line",
data : [90],
fillColor: "#C7604C",
title : "February"
},
{
data : [24],
fillColor: "#21323D",
title : "March"
},
{
value : [58],
fillColor: "#9D9B7F",
title : "April"
},
{
data : [82],
fillColor: "#7D4F6D",
title : "May"
},
{
data : [8],
fillColor: "#584A5E",
title : "June"
}
]
var myopt = {
inGraphDataShow : false
}
]
};
pushInGraphData("Doughnut",mydata,myopt,{link : "triangle"});
If you want to use the add-ins "specialInGraphData.js", you have to include it but also to include the add-ins "shapesInChart.js"
<SCRIPT src='../ChartNew.js'></script>
<SCRIPT src='../Add-ins/shapesInChart.js'></script>
<SCRIPT src='../Add-ins/specialInChartData.js'></script>
AFTER the specification of the data and the options for your chart and BEFORE the call of the Chart function, you have to call the pushInGraphData function. This function has 4 parameters :
-
parameter 1 : type of chart that will be displayed. For instance "Pie" if you will display a Pie Chart.
-
parameter 2 : your data variable;
-
parameter 3 : your options variable;
-
parameter 4 : the parameters for the specialInChartData (see method 1 in previous chapter).
`pushInGraphData("Doughnut",mydata,myopt,{text: "<Title> (<Value>)",fontSize : 12,linkStrokeColorLine: "grey",piePaddingY :0.1, avoidOverwrite :true, imagePos: 1, imageLoad: image,link : "triangle"});`
you have to set the parameter inGraphDataShow to false if you use the add-ins "specialInGraphData.js".
The parameter endDrawDataFunction has to be set to the value 'drawShapes'.
var myopt = {
inGraphDataShow : false,
endDrawDataFunction: drawShapes
}
In this part, we will list the parameters that can be specified for the "In Graph Data".
For each piece of the chart, you can associate a text.
In parameter "text", you can specify the text that has to be displayed. Specify text:"" if you don't want to display a text.
Example : text: "My own Text"
Default value : "<Value>".
Special values :
If in the text, you specify <Value>, this will be replaced by the value associated to the piece of chart.
If in the text, you specify <Title>, this will be replaced by the title associated to the piece of chart.
If in the text, you specify <i>, this will be replaced by the i value of data.datasets[i].data[j].
If in the text, you specify <j>, this will be replaced by the j value of data.datasets[i].data[j].
The text can be caracterized with the parameters fontColor (default value "black"), fontStyle (default value "normal", fontSise (default value 25) and the fontFamily (default value "'Arial'").
Example :
pushInChartData("Pie",mydata,myopt,{text : "<title> : <value>", fontColor : "green", fontStyle : "italic", fontSize : 16});
For each piece of the chart, you can associate an image.
In parameter imageLoad, you have to specify the image that has to be displayed - Specify 'null' if you don't want to display an image (null is the default value).
The image is caracterized by the parameters imageWidth (default value is 20) and a imageHeight (default value is 20).
Example :
var image=new Image();
image.src="plus_sign.jpg";
pushInChartData("Doughnut",mydata,myopt,{imageLoad : image, imageWidth : 15, imageHeight 10 });
When you have an image and a text associated to a piece of chart, you can specify :
-
the relative position with parameter imagePos : imagePos : 1 => the text is displayed before the image (this is the default value); imagePos : 0 => the text is displayed after the image;
-
the space (in points) between the text and the image with parameter spaceBetweenTextAndImage (default value : 5)
Example :
var image=new Image();
image.src="plus_sign.jpg";
pushInChartData("Doughnut",mydata,myopt,{imageLoad : image, text : "<title>:<value>", imagePos : 0, spaceBetweenTextAndImage : 10});
Has explained before, the "link" parameter can have two values : "triangle" or "line" (default value "line"). This parameter specifies what kind of "In Chart Data" has to be drawn for the piece of chart.
Example: pushInChartData("Pie",mydata,myopt,{link : "triangle"});
When the link value is "line", several parameters can be specified for the displayed line.
- linkStrokeColorLine (default value "black") : color of the line.
- linkStrokeStyleLine (default value "solid") : style of the line;
- linkStrokeSizeLine (default value 2) : size of the line
- paddingValXLine (default value 4) : horizonal padding (in points) between the line and the "In Graph Data".
- paddingValYLine (default value 0) : vertical padding (in points) between the line and the "In Graph Data".
The drawn line is a curved line; The parameter piePaddingY can be used to change the intensity of the curve (default value : 0.1).
When the link value is "triangle", several parameters can be specidief fot the displayed triangle.
- arrowWidth (default value 2) : width of the base of the triangle (in degres of the Pie)
- arrowHeight (default value 0.1) : height of the triangle (0.1 = 10 % of the height of the Piece of chart)
- linkStrokeColorTriangle (default value "rgba(0,0,0,0)") : color of the lines around the triangle
- linkStrokeStyleTriangle (default value "solid") : style of the lines around the triangle
- linkStrokeSizeTriangle (default value 0) : size of the line around the triangle
- paddingValXTriangle (default value 4) : horizonal padding (in points) between the triangle and the "In Graph Data".
- paddingValYTriangle (default value -16) : vertical padding (in points) between the triangle and the "In Graph Data".
When there are lot of datas or when there are small pieces in the chart, it could be that some texts are overwritten by other ones. When the parameter avoirOverwrite is set to true (default value is true), the add-ins tries to avoid this situation by putting the text on another place. This parameter is complicate to implement; In the current version, it will not work in all situations ....