DataPoint

DataPoint element of chart
Class: Chart.DataPoint()
DataSeries is parent elements of data points. Applying style on DataSeries makes it easy to apply same style for every data points under a DataSeries.


Code using Axis Class
                                    var chart = new Cosfire.Chart("chart-div",{width:700,
                                           height:250});

 axesX: [{title: 'Country'}];     
 axesY: [{title: 'Population', 
          valueFormatRange: [1000, "K", 1000000, "M"]
        }];  
 /* Create instance of DataPoint */
 data: [{
         plotAs: 'column',
         points: [
                 {xLabel: "China", y: 1439323776},
                 {xLabel: "India", y: 1380004385},
                 {xLabel: "Indonesia",  y: 273523615},
                 {xLabel: "Pakistan", y: 220892340},
                 {xLabel: "Brazil", y: 212559417},
                 {xLabel: "Nigeria", y: 206139589},
                 {xLabel: "Russia",  y: 145934462},
                 {xLabel: "Mexico", y: 128932753}
                 ]
        }
  ];
          
  /* Add the dataSeries to chart */
 chart.setData(data);
 chart.render();
Using JSON Approach
                                    var chartJSON = { 
    width: 700,
    height: 250,
    axesX: [{ title: 'Country' }];     
    axesY: [{ title: 'Population', 
             valueFormatRange: [1000, "K", 1000000, "M"]
           }];  
    data: [{
    plotAs: 'column',
    points: [{ xLabel: "China", y: 1439323776 },
             { xLabel: "India", y: 1380004385 },
             { xLabel: "Indonesia",  y: 273523615 },
             { xLabel: "Pakistan", y: 220892340 },
             { xLabel: "Brazil", y: 212559417 },
             { xLabel: "Nigeria", y: 206139589 },
             { xLabel: "Russia",  y: 145934462 },
             { xLabel: "Mexico", y: 128932753 }]
          }]
  };
                                    
 var chart = new Cosfire.Chart("chart-div", chartJSON);
 chart.render();

List of Properties Supported in DataPoint.
Property Type Default Possible Values Description
x Number Not set Number > 0 Id for each Axis is auto generated. Helps to attach a Axis with one or multiple data Series.
y Number Array Number > 0 Y value of a data point. Y can be array for few specific chart types like stock chart, HLOC charts.
z Number Not set Number > 0 Z value of a data point.
xLabel String Not set --- Label that appears on x-axis scale in case of category axis.
Data Label/Text Properties
Property Type Default Possible Values Description
labelEnabled Boolean Not set • true • false Whether to display the label that appears near to data-point or not.
label String Not set The fields that can be used in the label {name}, {y}, {x}, {percentage} Label that appears near to data point drawn on the screen.
labelPosition String Not set --- Position of the label that appears near to data point drawn on the screen.
labelFont Cosfire.Font() Not set --- This property is a Font object that support all necessary attributes to apply style on data point label.
Styling The Data Point
Property Type Default Possible Values Description
color String Not set Supported: Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. Color of the data point. If not set chart generates color for the data point automatically to make the chart look beautiful.
borderWidth Number Not set Number > 0 Border width or line thickness of the data point. If not set chart generates auto value to make the chart look beautiful.
borderColor String Not set Supported: Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. Border color of the data point. If not set chart generates color for the data point automatically to make the chart look beautiful.
borderStyle String Not set • solid(default) • dashed • dotted Style of the border of a DataPoint.
markerEnabled Boolean Not set • true • false Whether to enable the marker for the DataPoint.
marker Cosfire.Marker() Not set --- This property is of type Marker allows to apply style on the marker on screen that represents a DataPoint.
Example:
Code using Axis Class
                                    var chart = new Cosfire.Chart("chart-div",{ width: 500,
                                            height: 300});

/* Create instance of AxisX and AxisY */
var axisY = new Cosfire.Axis({ 
    title: "AxisY Title", 
    titleFont: { 
        fontSize: 12, 
        fontWeight: 'bold',
        fontColor: 'red'
    }
});

/* Add the axes to chart */
chart.axesY.add(axisY);
Using JSON Approach
                                    var chartJSON = {width: 500,
                 height: 300,
                 axesY :[{ title: "AxisY Title", 
                           titleFont: { 
                              fontSize: 12,
                              fontWeight: "bold",
                              fontColor: "red"
                           }
                        }]
                };
                                    
var chart = new Cosfire.Chart("chart-div", chartJSON);
Styling The Legend-Item That Represents A Data Point Inside Legend
Property Type Default Possible Values Description
showInLegend Boolean Not set • true • false Whether to display a marker inside legend representing the data-point.
legendText Boolean Not set • true • false Label/text that appears in legend.
legendItem Cosfire.LegendItem() Not set --- This property is of type Chart.LegendItem(). This property can be used to set more properties to customize legend entry. LegendItem also can be represented as javascript object having all supported property by LegendItem class
Example:
Code using Axis Class
                                    var chart = new Cosfire.Chart("chart-div",{ width: 500,
                                            height: 300});

/* Create instance of AxisX and AxisY */
var axisY = new Cosfire.Axis({ 
    title: "AxisY Title", 
    labelFont: { 
        fontSize: 12, 
        fontWeight: 'bold',
        fontColor: 'red'
    }
});

/* Add the axes to chart */
chart.axesY.add(axisY);
Using JSON Approach
                                    var chartJSON = {width: 500,
                 height: 300,
                 axesY :[{ title: "AxisY Title", 
                           labelFont: { 
                                fontSize: 12,
                                fontWeight: "bold",
                                fontColor: "red"
                            }
                        }]
                };
                                    
var chart = new Cosfire.Chart("chart-div", chartJSON);
Properties To Format The Values.
Property Type Default Possible Values Description
xValueFormat String Not set --- Format string to format the x automatically before displaying. Checkout the examples here: Examples
xValueFormatRange String Not set Example: [1000, 'K', 1000000, 'M'] Apply range to format the x automatically before displaying.
xValueFormatFunction Function Not set --- Take full power on your own hand to format x. Define custom function and attach. The function will be called automatically by the render engine.
yValueFormat String Not set --- Format string to format the x automatically before displaying. Checkout the examples here: Examples
yValueFormatRange String Not set Example: [1000, 'K', 1000000, 'M'] Apply range to format the y automatically before displaying.
yValueFormatFunction Function Not set --- Take full power on your own hand to format y. Define custom function and attach. The function will be called automatically by the render engine.
zValueFormat String Not set --- Format string to format the z automatically before displaying.
zValueFormatRange String Not set Example: [1000, 'K', 1000000, 'M'] Apply range to format the z automatically before displaying.
zValueFormatFunction Function Not set --- Take full power on your own hand to format z. Define custom function and attach. The function will be called automatically by the render engine.
Property Type Default Possible Values Description
tooltipText String Default: "{name}:{y}" --- Tooltip that appear on mouse over on data point. All properties supported under data point are supported in tooltip text.
tooltipPointShape String Not set • square • triangle • circle A Shape that appears in tooltip to represent a DataPoint or DataSeries
tooltipPointShape String square • square • triangle • circle Shape that appears by default in tooltip. It automatically follows DataPoint/DataSeries color.
tooltipBackground String white Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. Background color of tooltip.
Property Type Default Possible Values Description
selected Boolean Not set • true • false Mark a data-point as selected.
isOpen Boolean false • true • false Open/Close a Pie or Doughnut slice. Set isOpen property to true to open the Pie/Doughnut slice.