Introduction:
A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.
a) Functions of data Input Parameter:
Name:- Entity Name
Color :- Color of the entity shape
Shape :- Shape of the entity
data:- Actual data of entity
xAxisTickArray:- x axis ticks array
yAxisfactor:- y axis label
xAxisfactor:- x axis label
yAxisData:- JSON Data array
eg)
var basicLineData =
{
xAxisTickArray:["Jan'14","Feb'14","Mar'14","Apr'14","May'14","Jun'14","Jul'14","Aug'14","Sept'14","Oct'14"],
yAxisfactor : "Sold Quantity(last 10 days)",
yLabelColor:"red",
xAxisfactor : "Indexes(in whole number)",
xLabelColor:"green" ,
padding:30,
yAxisData:
[{
"Name" : "Angel",
"Shape" : "circle",
"color": "brown",
"data" : [12345,42345.23,30234,22345,72345,22345,32345,70345,52345,78345] },
{
"Name" : "Venture",
"Shape" : "square",
"color": "orange",
"data" : [
[90234,90234.34,12034,22394,72934,62394,32374,9234,5234,56034] },
{
"Name" : "Micro",
"Shape" : "triangle",
"color": "blue",
"data" :
[33340,62304,67214,6734,90734,12034,43240,42340,15234,100034] },
{
"Name" : "Capital",
"Shape" : "circle",
"color": "cyan",
"data" :
[68333,23304,90314,9734,19734,90834,67240,82340,51234,97034] }] };
a) Pass div id and basicLineData as argument in function.
eg)
setTimeout(function(){
var stocChart1=$("#line1").stocCharts(textStyleConfg);
stocChart1.drawBasicLineChart('#line1', basicLineData);
},50);
Introduction:
A scatter plot, scatterplot, or scatter graph is a type of mathematical diagram using Cartesian coordinates to display values for two variables from a set of data.
a) Functions of user Input Parameter:
padding :- Clears space around the element
toolTipLabel :- Label to be used in tooltip
eg)
var cfgScatterPlot = {
padding :30,
toolTipLabel : 'Population'
}
a) Functions of data Input Parameter:
Name:- Entity Name
Color :- Color of the entity shape
Shape :- Shape of the entity
data:- Actual data of entity
xAxisTickArray:- x axis ticks array
yIndicationLabel:- y axis label
xIndicationLabel:- x axis label
yAxisData:- JSON Data array
eg)
var scatterPlotData = {
xAxisTickArray:["Jan'14","Feb'14","Mar'14","Apr'14","May'14","Jun'14","Jul'14","Aug'14","Sept'14",
"Oct'14","Nov'14","Dec'14","Jan'15","Feb'15","Mar'15","Apr'15","May'15","Jun'15"],
xIndicationLabel:"Time",
yIndicationLabel:"Population",
padding:30,
yAixsData:[
{
"name": "Women",
"color":"pink",
"shape":"circle",
"data":
[20,560,90,250,300,100,130,330,250,500,15,30,200,56,290,150,320,120,230,400,260,400,
159,230,200,260,190,350,300,290,230,430,150,300,150]
},
{
"name": "Child",
"color":"green",
"shape":"triangle",
"data": [200,45,25,330,89,15,220,450,125,380,389,315,190,450,250,430,589,150]
},
{
"name": "Men",
"color":"blue",
"shape":"square",
"data": [20,90,50,33,95,150,200,190,500,330,450,250,200,340,312,290,140,150]
}]
};
Pass scatterPlotData and div id where this chart to be made as argument to function.
eg)
var stocChart2=$("#line2").stocCharts(textStyleConfg);
stocChart2.drawScatterPlotChart('#line2', scatterPlotData);
Introduction:
Drill-down from yearly data to quarterly, quarterly to monthly (in a chart showing sales figures) or from categories to individual.
a) Functions of user Input Parameter:
topMargin :- Margin from the top
rightMargin :- Margin from the right
bottomMargin :- Margin from the right
leftMargin :- Margin from the left
color :- Color of the bars
eg)
var cfgDrillDown = {
topMargin: 5,
rightMargin: 0,
bottomMargin: 40,
leftMargin: 40,
color: d3.scale.category20c()
}
a) Functions of data Input Parameter:
x :- x axis entities
y :- y axis entities
eg)
var barData = [
{ 'x': 'IE', 'y': 5 },
{ 'x': 'Chrome', 'y': 20 },
{ 'x': 'Firefox', 'y': 10 },
{ 'x': 'Safari', 'y': 30 },
{ 'x': 'Opera', 'y': 5 },
{ 'x': 'Not Known', 'y': 33 },
var Chrome = [
{ 'x': 'v5.0', 'y': 31 }
{ 'x': 'v6.0', 'y': 10 }
{ 'x': 'v7.0', 'y': 20 }
{ 'x': 'v8.0', 'y': 53 }
{ 'x': 'v9.0', 'y': 25 }
{ 'x': 'v10.0', 'y': 35 }
{ 'x': 'v11.0', 'y': 23 }];
var Firefox = [
{ 'x': 'v25.0', 'y': 22 },
{ 'x': 'v26.0', 'y': 19 },
{ 'x': 'v27.0', 'y': 25 },
{ 'x': 'v28.0', 'y': 10 },
{'x': 'v29.0', 'y': 34 }];
Pass div id, cfgDrillDown, barData, Chrome, Firefox, cfgDrillDown and button id which is responsible to bring back previous chart.
eg)
var stocChart7=$("#line3").stocCharts();
stocChart7.drawDrillDownChart("#line3", barData, Chrome, Firefox, cfgDrillDown, "#backData");
Introduction:
A heat map is a graphical representation of data where the individual values contained in a matrix are represented as colors
data:- Actual data
xLabel : x axis labels
yLabel : y axis labels
yAxisValue : y axis ticks
eg)
var heatMapData = {
data:{
Rajiv:[18,20,22,16,10],
Akash:[10,29,21,50],
Mohit:[11,26,23,9,27],
Gurjant:[13,16,29,18,21],
Guarav:[18,12,23,14,8]
},
xLabel:"Employee Name",
yLabel:"Working Hours",
yAxisValue:['Monday','Tuesday','Wednesday','Thursday','Friday']
};
Pass div id, heatMapData, cfgHeatMap as argument to the function.
eg)
var stocChart4=$("#line4").stocCharts(textStyleConfg);
stocChart4.drawHeatMapChart('#line4', heatMapData, cfgHeatMap);
Introduction:
It is a type of graph in which a circle is divided into sectors, and each sector represents a some fraction of the whole.
a) Functions of data Input Parameter:
key:- Legends of pie chart
value: Value for pie chart
label:- Value for each label
color: color for each data
eg)
var dataSet= {
key :['Agnitio','Apple Inc','IBM','Facebook','Accenture',"Gold Man Sach"],
value : [12000,1350,433,1234,30234,2134],
label : 'Cost',
color : ["#7cb5ec","#434348","#90ed7d","orange","green","cyan"]
};
a) Pass dataset as argument to function.
eg)
var stocChart8=$("#line5").stocCharts();
stocChart5.drawPieChartWithTransition(dataSet);
Introduction:
A doughnut chart displays data as percentage of the whole. Categories are represented by every slice. Doughnut charts are functionally identical to pie charts.
a) Functions of user Input Parameter:
key:- Set of legends
value:- Values of each slice
label: Any other label to be used
color:- Color of each slice
eg) var data = {
key :['Mozilla','IE','Firefox','Chrome','Opera','Safari'],
value : [10,50,80,60,40,80],
label : 'popular',
color : ['red','green','blue','cyan','purple','brown']
};
Pass data and divId where this chart to be made.
eg)
var cnfg={"data":data,"divId":"line22"}
var stocChart21=$("#line22").stocCharts();
stocChart21.dountChartWithLegend(cnfg);
A donut chart displays data as percentage of the whole. Categories are represented by every slice. Donut charts are functionally identical to pie charts. Additionally, the bar chart is also embedded to show data.
a) Functions of user Input Parameter:
key:- Set of legends
value:- Values of each slice
label: Any other label to be used
color:- Color of each slice
textAndLegendColor:- Color of text and legend
eg)
var data= {
key :['India','China','Japan','Canada','Australia','England'],
value : [10,50,80,60,40,80],
label : 'employee',
textAndLegendColor : 'black',
color : ['red','green','blue','cyan','purple','brown']
};
b) Functions of user input parameters for each key
key:- Set of legends
color:- Color of each slice
Others parameters are values of keys.
eg)
var subDataArray = {
key :['Doctor','Engineers','Social Worker','Government Employees','XYZ'],
color :["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd"],
India :[45,67,32,56,34],
China :[34,54,42,24,45],
Japan :[23,34,45,40,23],
Canada : [82,62,54,199,78],
Australia : [45,34,23,32,44],
England :[56,24,54,32,40]
};
Pass data, divId and subDataArray in cnfg. then call drawDountWithBarChart function by passing cnfg as argument
eg)
var cnfg={"data":data,"divId":"line23","subDataArray":subDataArray}
var stocChart23=$("#line23").stocCharts();
stocChart23.drawDountWithBarChart(cnfg);
Introduction:
A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. The relative position and angle of the axes is typically uninformative.
a) Functions of user Input Parameter:
colorPieArray:- Color of each slice
legendSet:- Label of each slice/ Name of entities
eg)
var colorPieArray=["#7cb5ec","#434348","#90ed7d","orange","green","cyan"];
var legendSet=['Agnitio','Apple Inc','IBM','Facebook','Accenture',"Gold Man Sach"];
a) Functions of data Input Parameter:
dataset:- Values of entities
eg)
var dataset=[5, 10, 20, 45, 6, 25];
Pass dataset, legendSet, colorPieArray, factorName i.e., tooltip label and div id where this chart to be made.
eg)
var
stocChart8=$("#line5").stocCharts();
stocChart8.drawPieChartWithTransition({'data':dataset,'legends':legendSet,"colors":colorPieArray,'factorName':'COST'});
Introduction:
This chart can have more than one scale axis, so you can easily contrast a set of entities based on multiple parameters
a) Functions of data Input Parameter:
dataset:- Values of entities
color:- Color of axis
indicationLabel:- Y-axis label
lineType:- Type of line(eg) cardinal etc)
isDottedLine:- Line to be dotted or not
data:- Actual data to be used for chart
unit: Temerature measurement
eg)
var mulitpleLineBarData=
"sea-level":
{
"color":"green",
"indicationLabel":"Sea Level Pressure",
"chartType":"line",
"lineType":"cardinal",
"isDottedLine":false,
"unit":"mb",
"data":
[59,69,43,66,46,54,73,78,62,47,72,45,44,59,61,42,80,54,56,50,70,49,48,76,66,43,73,52,64,72,40,68,
77,52,44,44,54,54,44,45,63,55,47,63,79,61,52,52,52],
"temperature":
{"color":"#90ed7d",
"chartType":"line",
"indicationLabel":"Temperature",
"lineType":"linear",
"unit":"C",
"data":
[64,62,61,60,79,69,67,64,69,78,76,70,65,79,74,79,72,70,63,67,73,79,78,76,70,75,
74,70,79,63,64,72,77,69,60,69,69,74,79,79,70,66,71,71,72,63,66,78,66],
"isDottedLine":true
},
"rainfall":
{
"color":"#7cb5ec",
"chartType":"bar",
"indicationLabel":"Rain Fall",
"unit":"mm",
"data":
[22,77,73,33,60,43,37,29,30,68,20,75,67,31,20,67,50,23,38,44,81,78,36,87,76,
86,80,36,23,68,28,55,73,39,90,53,93,56,98,32,50,67,76,28,42,21,63,92,98] }}
Pass below mentioned parameters:-
mulitpleLineBarData,
marginLeft(space from left to be empty) ,
marginRight(space from right to be empty),
xAxis() :- Function to generate the x-axis labels
indicationLabel :- Lable to be displayed
eg)
var stocChartLineBars=$("#line7").stocCharts();
stocChartLineBars.drawBarWithMultipleLineAndCircle({'data':mulitpleLineBarData,
'marginLeft':50,'marginRight':50,'xAxis':xAxis,'indicationLabel':'Category'});
Introduction:
A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.
[{"doj":"2014-02-01","pending":51,"approved":15,"rejected":9,"halted":32},{"doj":"2014-03-01","pending":69,"approved":41,"rejected":2,"halted":55},{"doj":"2014-04-01","pending":78,"approved":49,"rejected":1,"halted":49},{"doj":"2014-05-01","pending":91,"approved":12,"rejected":3,"halted":36},{"doj":"2014-06-01","pending":56,"approved":13,"rejected":0,"halted":99},{"doj":"2014-07-01","pending":100,"approved":26,"rejected":5,"halted":82},{"doj":"2014-08-01","pending":52,"approved":12,"rejected":10,"halted":79},{"doj":"2014-09-01","pending":67,"approved":34,"rejected":4,"halted":82},{"doj":"2014-10-01","pending":86,"approved":31,"rejected":7,"halted":39},{"doj":"2014-11-01","pending":77,"approved":12,"rejected":3,"halted":92},{"doj":"2014-12-01","pending":61,"approved":15,"rejected":7,"halted":67},{"doj":"2015-01-01","pending":48,"approved":21,"rejected":3,"halted":94},{"doj":"2015-02-01","pending":97,"approved":35,"rejected":10,"halted":30},{"doj":"2015-03-01","pending":56,"approved":41,"rejected":0,"halted":60}]
Pass below mentioned parameters in function:
data:- Data to be passed
xFieldName :- Label for tooltip of x axis
showAllTicks: To show ticks or not
colors:- colors of legends and bars
yAxisfactor :- Label for y axis
yLabelColor :- Color on y-axis label
xAxisfactor :- Label for x axis
xLabelColor :- Color on y-axis label
eg)
var groupedChartData=generateDataForStackChart();
var stocChart8=$("#line8").stocCharts(textStyleConfg);
stocChart8.groupedBarChart({'data':groupedChartData,
'xFieldName':'doj',
'widthOfBar':'',
'showAllTicks':true,
'colors':colorJson,
yAxisfactor : "Orders Quantity(last 10 days)",
yLabelColor:"grey",
xAxisfactor : "Indexes(in whole number)",
xLabelColor:"green",});
Introduction:
A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent. Bars are grouped with each other.
[{"doj":"2014-02-01","pending":51,"approved":15,"rejected":9,"halted":32},{"doj":"2014-03-01","pending":69,"approved":41,"rejected":2,"halted":55},{"doj":"2014-04-01","pending":78,"approved":49,"rejected":1,"halted":49},{"doj":"2014-05-01","pending":91,"approved":12,"rejected":3,"halted":36},{"doj":"2014-06-01","pending":56,"approved":13,"rejected":0,"halted":99},{"doj":"2014-07-01","pending":100,"approved":26,"rejected":5,"halted":82},{"doj":"2014-08-01","pending":52,"approved":12,"rejected":10,"halted":79},{"doj":"2014-09-01","pending":67,"approved":34,"rejected":4,"halted":82},{"doj":"2014-10-01","pending":86,"approved":31,"rejected":7,"halted":39},{"doj":"2014-11-01","pending":77,"approved":12,"rejected":3,"halted":92},{"doj":"2014-12-01","pending":61,"approved":15,"rejected":7,"halted":67},{"doj":"2015-01-01","pending":48,"approved":21,"rejected":3,"halted":94},{"doj":"2015-02-01","pending":97,"approved":35,"rejected":10,"halted":30},{"doj":"2015-03-01","pending":56,"approved":41,"rejected":0,"halted":60}]
Pass below mentioned parameters in function:
data:- Data to be passed
xFieldName :- Label for tooltip of x axis
showAllTicks: To show ticks or not
colors:- colors of legends and bars
yAxisfactor :- Label for y axis
yLabelColor :- Color on y-axis label
xAxisfactor :- Label for x axis
xLabelColor :- Color on y-axis label
eg)
var groupedChartData=generateDataForStackChart();
var stocChart19=$("#line19").stocCharts();
stocChart19.groupedBar2DChart
({'data':groupedChartData,
'xFieldName':'doj',
'widthOfBar':'',
'showAllTicks':true,
'colors':colorJson,
yAxisfactor : "Orders Quantity(last 10 days)",
yLabelColor:"grey",
xAxisfactor : "Indexes(in whole number)",
xLabelColor:"green",});
Introduction:
A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent. Bars are represented in 3D view
a) Functions of user Input Parameter:-
colorPieArray:- Color of each slice
topMargin: margin from top
rightMargin: margin from right,
bottomMargin: margin from bottom,
leftMargin: margin from left,
toolTipLabelForYAxis: y axis label for tooltip ,
color: Color to set,
xAxisTickArray: Array of ticks for x axis ,
xLabel:Label for x axis
eg)
var cfg3DBarChart = {
topMargin: 5,
rightMargin: 0,
bottomMargin: 40,
leftMargin: 40,
toolTipLabelForYAxis: "Sales(in Crores)",
color: d3.scale.category20c(),
xAxisTickArray:[2010,2011,2012,2013,2014,2015,2016,2017,2018,2019],
xLabel:"Year"
}
eg)
var heightOfBars = [15, 80, 120, 280, 50, 65, 900, 40, 23, 98];
Pass div id, heightOfBars and cfg3DBarChart.
eg)
var stocChart10=$("#line10").stocCharts();
stocChart10.drawThreeDBarChart("#line10",
heightOfBars, cfg3DBarChart);
Introduction:
Multigrouped Bar Chart is represent a groupe of bars which represent some kind of data(for example in this chart group represent a year and each bars in these group represent
a product sale in that year)
title:- title of chart
xAxisLabel:- Label represent x-axis
yAxisLabel:- Label represent y-axis
xAxisData:- Data for x-axis
toolTipUnit:- For tool tip heading
key array:- Represent data for Product name,y-axis data and color
eg)
var data = {
title : "Comparison Of Sale", xAxisLabel :"Years", yAxisLabel :"Sales(In Crores)", xAxisData : ["2010","2011","2012","2013","2014"], toolTipUnit: "Year", key: [ { name: 'Zara', data: [50, 30, 40, 37, 20], color : "#EBD6CC" }, { name: 'Levis', data: [58, 70, 95, 25, 50], color : "#00FFFF" }, { name: 'Woodland', data: [30, 40, 74, 22, 55], color : "#7FFFD4" } ]
}
Introduction:
This Map represents Population of india in each state.
indiaStatesData :- JSON that has population, growthRate,area,density,sex Ratio, Literacy
colorRange:- color range
eg)
var colorRange = {
["#add8e6", "#9acd32", "#9acd32", "#d2b48c", "#98fb98", "#3cb371"];
}
var indiaStatesData = {
"Andhra Pradesh" :{"population" : 84580777 , "growthRate" : 10.98 , "area": 275045, "density":308 , "sex Ratio":993 ,"Literacy":67.02}, "Andhra Pradesh" :{"population" : 84580777 , "growthRate" : 10.98 , "area": 275045, "density":308 , "sex Ratio":993 ,"Literacy":67.02}, "Arunachal Pradesh" :{"population": 1383727 , "growthRate":26.03 , "area":83743, "density":17, "sex Ratio":938, "Literacy":65.38}, "Assam" :{"population" : 31205576,"growthRate": 17.07 , "area":78438, "density":398, "sex Ratio":958, "Literacy":72.19}, "Bihar" :{"population" : 104099452 ,"growthRate": 25.42 , "area":94163, "density":1106, "sex Ratio":918, "Literacy":61.80}, "Chhattisgarh" :{"population" :25545198 ,"growthRate": 22.61 , "area":135192, "density":189, "sex Ratio":991, "Literacy":70.28}, "Delhi" :{"population" : 16787941,"growthRate": 21.21 , "area":1483, "density":11320, "sex Ratio":868, "Literacy":86.21}, "Goa" :{"population" : 1458545,"growthRate":8.23 , "area":3702, "density":394, "sex Ratio":973, "Literacy":88.70}, "Gujarat" : {"population" :60439692 ,"growthRate":19.28 , "area":196244, "density":308, "sex Ratio":919, "Literacy":78.03}, "Haryana" : {"population" :25351462 ,"growthRate":19.90 , "area":44212, "density":573, "sex Ratio":879, "Literacy":75.55}, "Himachal Pradesh" :{"population" : 6864602,"growthRate":12.94 , "area":55673, "density":123, "sex Ratio":972, "Literacy":82.80}, "Jammu and Kashmir" :{"population" :12541302 ,"growthRate":23.64 , "area":222236, "density":56, "sex Ratio":889, "Literacy":67.16}, "Jharkhand" : {"population" :32988134 ,"growthRate": 22.42 , "area":79716, "density":414, "sex Ratio":948, "Literacy":66.41}, "Karnataka" : {"population" :61095297 ,"growthRate":15.60 , "area":191791, "density":319, "sex Ratio":973, "Literacy":75.36}, "Kerala" : {"population" :33406061 ,"growthRate": 4.91 , "area":38852, "density":860, "sex Ratio":1084, "Literacy":94.00}, "Madhya Pradesh" :{"population" : 72626809,"growthRate": 20.35 , "area": 308252, "density": 236, "sex Ratio": 931, "Literacy": 69.32}, "Maharashtra" : {"population" : 112374333, "growthRate": 15.99 , "area": 307713, "density": 365, "sex Ratio": 929, "Literacy":82.34}, "Manipur" : {"population" : 2570390,"growthRate":12.05 , "area":22327, "density":115, "sex Ratio":992, "Literacy":79.21} , "Meghalaya" : {"population" : 2966889,"growthRate":27.95 , "area":22429, "density":132, "sex Ratio":989, "Literacy":74.43}, "Mizoram" : {"population" :1097206 ,"growthRate":23.48 , "area":21081, "density":52, "sex Ratio":976, "Literacy":91.33}, "Nagaland" : {"population" : 1978502,"growthRate":-0.58 , "area":16579, "density":119, "sex Ratio":931, "Literacy":79.55}, "Orissa" : {"population" : 41974218,"growthRate": 14.05 , "area":155707, "density":270, "sex Ratio":979, "Literacy":72.87}, "Punjab" : {"population" : 27743338,"growthRate":13.89 , "area":50362, "density":551, "sex Ratio":895, "Literacy":75.84}, "Rajasthan" : {"population" : 68548437 ,"growthRate":21.31 , "area":342239, "density":200, "sex Ratio":928, "Literacy":66.11}, "Sikkim" : {"population" :610577 ,"growthRate":12.89 , "area":7096, "density":86, "sex Ratio":890, "Literacy":81.42}, "Tamil Nadu" : {"population" :72147030 ,"growthRate":15.61 , "area":130060, "density":555, "sex Ratio":996, "Literacy":80.09}, "Tripura" : {"population" : 3673917,"growthRate":14.84 , "area":10486, "density":350, "sex Ratio":960, "Literacy":87.22}, "Uttar Pradesh":{"population" :199812341 ,"growthRate":20.23 , "area":240928, "density":829, "sex Ratio":912, "Literacy":67.68}, "Uttarakhand" : {"population" : 10086292,"growthRate": 18.81 , "area":53483, "density":189, "sex Ratio":963, "Literacy":78.82}, "West Bengal" : {"population" :91276115 ,"growthRate": 13.84 , "area":88752, "density":1028, "sex Ratio":950, "Literacy":76.26}
}
Introduction:
This Map represent Unemployement rate of USA
data through JSON
Introduction:
This Map represent Farming Trends of USA.
Data Through JSON
Introduction:
This Map represent Farming Trends of USA.
Data Through JSON
Introduction:
It is a type of chart in which Horizontal Bars represent product wise data(for example in this chart each bar represent product sale of each individual brand )
title:- Title for chart
xAxisLabel:- Label represent x-axis
yAxisLabel:- Label represent y-axis
yAxisData:- Data for y-axis
key:- Array for product name,x-axis data and color
eg)
var data = {
title : "Product Sale(Brand wise)", xAxisLabel :"Current Status", yAxisLabel :"Product", yAxisData : ["Formal Shirt","Jeans","T-Shirt","Trouser","Blazers","Sports Wear"], key: [ { name: 'Zara', data: [50, 30, 40, 37, 20,30], color : "#00FFFF" }, { name: 'Levis', data: [58, 40, 32, 25, 50,20], color : "#DCDCDC" }, { name: 'Woodland', data: [30, 43, 74, 22, 55,35], color : "#7FFFD4" } ]
}
Introduction:
A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent and multiple bars stacked on top of each other. Bars are represented in 3D view
a) Functions of user Input Parameter:-
colorArray:- Color of each bars
topMargin:- Margin from top
rightMargin:- Margin from right,
bottomMargin:- Margin from bottom,
leftMargin:- Margin from left,
toolTipLabelForYAxis:- y axis label for tooltip,
xLabel:- Label for x axis
eg)
var cfg3DBarChart = {
topMargin: 5,
rightMargin: 0,
bottomMargin: 40,
leftMargin: 40,
toolTipLabelForYAxis: "Sales(in Crores)",
colorArray: ["#39ec6e","#ff9811","#63deff","#59bde5","#16c54a","#e7969c",
"#e7cb94", "#7f7f7f", "#bcbd22"],
xLabel:"Year" }
eg)
var threeDStackedBarsData = [{
'key': 'Barclays',
'data': [15, 80, 120, 180, 50, 65, 30, 109, 210,13, 123,210, 210] },
{
'key': 'Morgan Stanley',
'data': [60, 20, 70, 40, 100, 95, 230, 123, 100,24, 231, 210, 210]
},
{
'key': 'SBI',
'data': [40, 28, 79, 100, 40, 195, 20, 78, 321,45, 109, 210, 210]
},
{
'key': 'American Express Bank',
'data': [140, 280, 179, 200, 109, 95, 300, 86, 123,56, 290, 210, 210]
},
{
'key': 'Indusland Bank',
'data': [120, 34, 50, 100, 400, 65, 30, 34, 310,76, 19, 210, 210]
},
{
'key': 'Yes Bank',
'data': [80, 180, 179, 300, 40, 109, 89, 120, 230,89, 99, 210, 210]
}];
colorArray:- Color of bars
gridLineColor:- Color of background grid lines
textColor:- Color of text of ticks
xAxisArray:- x axis ticks arrray
eg)
var
colorArray=["#39ec6e","#ff9811","#63deff","#59bde5","#16c54a","#e7969c", "#e7cb94", "#7f7f7f", "#bcbd22"];
var gridLineColor = "#4d4d4d";
var textColor = "Grey";
var xAxisArray = ['1994', '1995', '1996', '1997', '1998',
'1999','2000','2001','2002','2003', '2004', '2005', '2006'];
Pass div id, threeDStackedBarsData, cfg3DBarChart,
colorArray, gridLineColor,
textColor and xAxisArray as argument.
eg)
var
stocChart27=$("#line27").stocCharts(textStyleConfg);
stocChart27.drawThreeDStackedBarChart("#line27",
threeDStackedBarsData, cfg3DBarChart, colorArray, gridLineColor, textColor, xAxisArray);
Introduction:
A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent. They are placed horizontally.
a) Functions of user Input Parameter:-
colorArray:- Color of each bars
xFieldName:- X axis label,
yFieldName:- Y axis label,
axisColor:- Color of axis,
data1:- First Bar data
data2:- second bar data
xLabel:- Label for x axis
eg)
var colorArray=["#A3BFDB","black"];
var xFieldName="population";
var yFieldName="year";
var axisColor="black";
var cnfg={"data1":data1,
"data2":data2,
"colorArray":colorArray,
"xFieldName":xFieldName,
"yFieldName":yFieldName,
"axisColor":axisColor};
}
eg)
var data1=[{"population":100,'year':2014},{"population":50,'year':2015},{"population":150,'year':2016},{"population":100,'year':2017},{"population":200,'year':2018},{"population":150,'year':2019},{"population":250,'year':2020},{"population":300,'year':2021}];
var data2=[{"population":200,'year':2014},{"population":50,'year':2015},{"population":150,'year':2016},{"population":100,'year':2017},{"population":200,'year':2018},{"population":150,'year':2019},{"population":400,'year':2020},{"population":700,'year':2021}];
Pass cnfg as argument in function.
eg)
var stocChart24=$("#line24").stocCharts();
stocChart24.bulletBar(cnfg);
Introduction:
This chart will show run scored in each over in a cricket match using bar chart.
a) Functions of user Input Parameter:-
colorArray:- Color of each bars
xLabel:- Label for x axis
yLabel:- Lable for y axis
xFieldName:- X axis label
yFieldName:- Y axis label
axisColor:- Color of axis
textColor:- color of text
textFontFamily:- Font of text
title:- Title Label Data
titleColor :- Color of title
xLabelColor:- Color of x axis label
xDatacolor:- Color of x data
specialXDataLabel:- Additional label/legend for x data
specialXDataColor:- color for additional x data label
specialXData:- Additional label data(eg. powerplay)
specialDataLabel:- Image for additional x data label
specialIcon:- Icon to be placed on top of bars for revamped look
specialData:- Fall of wicket data
font-style:- Font style for specialData
specialDataLabelOfWicket:- Label image for fall of wicket on y axis
yData:- Bar data of run scored each over
eg)
var colorArray=["#A3BFDB"];
var xFieldName="over";
var yFieldName="run";
var axisColor="black";
var AdvancedBarData={
"textColor":"Black",
"textFontFamily":"Cursive",
"title" : ['INDIA','ENGLAND','Fourth Royel London ODI','Edgbaston'],
"titalColor" : "#867114",
"yLabel":"RUNS",
"yData":[3,5,6,8,9,10,1,13,15,3,5,6,2,1,2,4,7,8,3,13,6,5,6,7,5,4,7,9,3,4,5,6,8,14,12],
"xLabel":"OVERS",
"xLabelColor" : "white",
"xDatacolor" : "#182051",
"xData":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35],
"specialXDataLabel" : 'power Play',
"specialXDataColor" : "#9a862d",
"specialXData" : [1,2,3,4,5,6,33,34,35],
"specialDataLabel":"./img/red-ball.png",
"specialIcon":"circle",
"specialData":{1:[{"Maxwell":"bowled Umesh Yadav"}],7:[{"Watson":"c Kohli b
Jadeja"},{"Baily":"c & b Jadeja"}]},
"font-style":"Arial Black",
"specialDataLabelOfWicket" : "./img/wikets.png"
}
var
cnfg={"data":AdvancedBarData,"colorArray":colorArray,"xFieldName":xFieldName,
"yFieldName":yFieldName,"axisColor":axisColor};
eg)
var yData:[3,5,6,8,9,10,1,13,15,3,5,6,2,1,2,4,7,8,3,13,6,5,6,7,5,4,7,9,3,4,5,6,8,14,12]
Pass cnfg as argument in function.
eg)
var stocChart25=$("#line25").stocCharts();
stocChart25.cricketAnalysis(cnfg);
Introduction:
This chart will show data in area stacked on top of each other.
a) Functions of user Input Parameter:-
topMargin: Margin from top,
rightMargin: Margin from right,
bottomMargin: Margin from bottom,
leftMargin: Margin from left,
color: color for areas,
xLabel: Label for x axis
eg)
var cfgStackedAreaChart = {
topMargin: 5,
rightMargin: 0,
bottomMargin: 40,
leftMargin: 40,
color: d3.scale.category20c(),
xLabel:"Time" }
eg)
var stackedAreaData = [
{"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":34.6240,
"name":"PRODUCT1","type":"area","band1Color":"#bb533f","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":31.7140,
"name":"PRODUCT1","type":"area","band1Color":"#bb533f","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Feb","categoryorder":13,"y":34.8570,
"name":"PRODUCT1","type":"area","band1Color":"#bb533f","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":144.4390,
"name":"PRODUCT2","type":"area","band1Color":"#ba8e3e","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":153.1140,
"name":"PRODUCT2","type":"area","band1Color":"#ba8e3e","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Feb","categoryorder":13,"y":126.4660,
"name":"PRODUCT2","type":"area","band1Color":"#ba8e3e","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":13.0250,
"name":"PRODUCT3","type":"area","band1Color":"#3ca2b8","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":6.0190,
"name":"PRODUCT3","type":"area","band1Color":"#3ca2b8","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Feb","categoryorder":13,"y":5.3900,
"name":"PRODUCT3","type":"area","band1Color":"#3ca2b8","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":99.8900
,"name":"PRODUCT4","type":"area","band1Color":"#7929b2","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":79.9660,
"name":"PRODUCT4","type":"area","band1Color":"#7929b2","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Feb","categoryorder":13,"y":84.7040,
"name":"PRODUCT4","type":"area","band1Color":"#7929b2","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":102.3490,
"name":"PRODUCT5","type":"area","band1Color":"#be2f96","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":114.9680,
"name":"PRODUCT5","type":"area","band1Color":"#be2f96","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Feb","categoryorder":13,"y":100.8590,
"name":"PRODUCT5","type":"area","band1Color":"#be2f96","metric1Label":""}];
Pass div id, stackedAreaData and cfgStackedAreaChart as argument in function.
eg)
var stocChart11=$("#line11").stocCharts();
stocChart11.drawStackedAreaChart("#line11",
stackedAreaData, cfgStackedAreaChart);
Introduction:
A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent and multiple bars stacked on top of each other. Bars are represented in 3D view
a) Functions of user Input Parameter:-
topMargin: Margin from top,
rightMargin: Margin from right,
bottomMargin: Margin from bottom,
leftMargin: Margin from left,
color: color for areas,
xLabel: Label for x axis
eg)
var cfgStackedAreaChart = {
topMargin: 5,
rightMargin: 0,
bottomMargin: 40,
leftMargin: 40,
color: d3.scale.category20c(),
xLabel:"Time"
}
eg)
var stackedAreaData = [
{"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":34.6240,
"name":"PRODUCT1","type":"area","band1Color":"#bb533f","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":31.7140,
"name":"PRODUCT1","type":"area","band1Color":"#bb533f","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Feb","categoryorder":13,"y":34.8570,
"name":"PRODUCT1","type":"area","band1Color":"#bb533f","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":144.4390,
"name":"PRODUCT2","type":"area","band1Color":"#ba8e3e","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":153.1140,
"name":"PRODUCT2","type":"area","band1Color":"#ba8e3e","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Feb","categoryorder":13,"y":126.4660
,"name":"PRODUCT2","type":"area","band1Color":"#ba8e3e","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":13.0250,
"name":"PRODUCT3","type":"area","band1Color":"#3ca2b8","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":6.0190,
"name":"PRODUCT3","type":"area","band1Color":"#3ca2b8","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Feb","categoryorder":13,"y":5.3900,
"name":"PRODUCT3","type":"area","band1Color":"#3ca2b8","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":99.8900,
"name":"PRODUCT4","type":"area","band1Color":"#7929b2","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":79.9660,
"name":"PRODUCT4","type":"area","band1Color":"#7929b2","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Feb","categoryorder":13,"y":84.7040,
"name":"PRODUCT4","type":"area","band1Color":"#7929b2","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":102.3490,
"name":"PRODUCT5","type":"area","band1Color":"#be2f96","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":114.9680,
"name":"PRODUCT5","type":"area","band1Color":"#be2f96","metric1Label":""},
{"layoutID":309,"nationalAvg":1,"category":"Feb","categoryorder":13,"y":100.8590,
"name":"PRODUCT5","type":"area","band1Color":"#be2f96","metric1Label":""}
];
Pass div id, stackedAreaData and cfgStackedAreaChart as argument in function.
eg)
var stocChart11=$("#line11").stocCharts();
stocChart11.drawStackedAreaChart("#line11", stackedAreaData, cfgStackedAreaChart);
Introduction:
Funnel charts are a type of chart, often used to represent stages in a sales process and show the amount of potential revenue for each stage. This type of chart can also be useful in identifying potential problem areas in an organization's sales processes.
eg)
var funnelChartData= [
["Food", 12000, "#008080"],
["Travel", 4000, "#702963"],
["Bill", 2500, "#ff634d"],
["Others", 1500, "#007fff"] ];
Pass funnelChartData as argument in function.
eg)
var stockChart14=$("#line14").stocCharts();
stockChart14.drawFunnelChart(funnelChartData)
Introduction:
A gauge chart (or speedometer chart) combines a Doughnut chart and a Pie chart in a single chart.
eg)
var data= [{"maxSpeedVal":200,
"speedVal":80}];
Pass funnelChartData as argument in function.
id: Div id
arcStartIndLabel:- Left label
arcMiddleIndLabel:- Middle label
arcEndIndLabel:- Right label
eg)
var stockChart15=$("#line15").stocCharts();
stockChart15.gaugeGraph({'dataA':data,
"id":"#line15",
'arcStartIndLabel':'No Risk',
'arcMiddleIndLabel':'Meter',
'arcEndIndLabel':'Total'});
Introduction:
An area chart or area graph displays graphically quantitative data.
eg)
var data =
[{"id":8385,"doj":"2015-02-24"},{"id":9759,"doj":"2015-02-25"},{"id":542,"doj":"2015-02-26"},{"id":8099,"doj":"2015-02-27"},{"id":4087,"doj":"2015-02-28"},{"id":3644,"doj":"2015-03-01"},{"id":6104,"doj":"2015-03-02"},{"id":1415,"doj":"2015-03-03"},{"id":7785,"doj":"2015-03-04"},{"id":4663,"doj":"2015-03-05"},{"id":8181,"doj":"2015-03-06"},{"id":3614,"doj":"2015-03-07"},{"id":2548,"doj":"2015-03-08"},{"id":6308,"doj":"2015-03-09"},{"id":1420,"doj":"2015-03-10"},{"id":1444,"doj":"2015-03-11"},{"id":8455,"doj":"2015-03-12"},{"id":6050,"doj":"2015-03-13"},{"id":5049,"doj":"2015-03-14"},{"id":6924,"doj":"2015-03-15"},{"id":2339,"doj":"2015-03-16"},{"id":5137,"doj":"2015-03-17"},{"id":4343,"doj":"2015-03-18"},{"id":565,"doj":"2015-03-19"},{"id":4803,"doj":"2015-03-20"},{"id":7511,"doj":"2015-03-21"},{"id":4997,"doj":"2015-03-22"},{"id":1985,"doj":"2015-03-23"},{"id":1422,"doj":"2015-03-24"}];
Pass div id, stackedAreaData and cfgStackedAreaChart as argument in function.
Functions of input parameter:-
xFieldName: x axis label name for tooltip
yFieldName: y axis label name for tooltip
xAxisIndicationLabel: x axis label below ticks
yAxisIndicationLabel: y axis label on left of ticks
axisColor: color of axis
attachBrushEvent: Flag for attaching brush event
redraw:
eg)
var stockChart=$("#line16").stocCharts(textStyleConfg);
stockChart.areaChart({'data':data,
'xFieldName':'doj',
"yFieldName":'id',
'xAxisIndicationLabel':'Time Index',
'yAxisIndicationLabel':'Money',
'axisColor':'#222222',
'attachBrushEvent':true,
'redraw':false});
stockChart.circleChart({'color':"black",'r':3,'data':data});
Introduction:
A pyramid chart is an inverted funnel chart. Similar to a funnel chart, the pyramid chart is a single series chart which does not use an axis. It represents data as portions of a 100% (the individual segments add up to represent a whole).
a) Functions of user Input Parameter:-
eg)
eg)
Pass div id, stackedAreaData and cfgStackedAreaChart as argument in function.
eg)
Introduction:
A pyramid chart is an inverted funnel chart. Similar to a funnel chart, the pyramid chart is a single series chart which does not use an axis. It represents data as portions of a 100% (the individual segments add up to represent a whole).
a) Functions of user Input Parameter:-
colorArray:- Color for each block of pyramid labelArray:- Array of labels for each block of pyramid
eg)
var labelArray=["DUSTER","Qualis","Scorpio","Eco Sport","Honda city","Altis","EON"];
var colorArray 1= ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b", "#e377c2", "#7f7f7f", "#bcbd22"];
var confg =
{"data":data,
"colorArray":colorArray1,
"labels":labelArray,
"unit":"M$"};
eg)
var data =[20, 15, 10, 10, 20, 20, 5];
Pass confg as argument in function.
eg)
var stocChart20=$("#line20").stocCharts();
stocChart20.draw3DPyramidChartWithoutSlice(confg);
Introduction:
A pyramid chart is an inverted funnel chart. Similar to a funnel chart, the pyramid chart is a single series chart which does not use an axis. It represents data as portions of a 100% (the individual segments add up to represent a whole). Pyramid is divided in slices
a) Functions of user Input Parameter:-
colorArray:- Color for each block of pyramid
labelArray:- Array of labels for each block of pyramid
eg)
var labelArray=["Ford","Mercedes","Volkswagon","Ferrari","BMW","RENUALT","HYUNDAI"];
var colorArray1= ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b", "#e377c2", "#7f7f7f", "#bcbd22"];
var confg =
{"data":data,
"colorArray":colorArray1,
“labels”:labelArray
"unit":"%"};
eg)
var data =[20, 15, 10, 10, 20, 20, 5];
Pass confg as argument in function.
eg)
var stocChart21=$("#line20").stocCharts();
stocChart20.draw3DPyramidChartWithoutSlice(confg);
Introduction:
A pyramid chart is an inverted funnel chart. Similar to a funnel chart, the pyramid chart is a single series chart which does not use an axis. If we invert this we get invert pyramid.
a) Functions of user Input Parameter:-
eg)
eg)
Pass pyramidPercentData, payableSummaryArray, yLabel as argument in function.
eg)
var invertStockChart=$("#line17").stocCharts();
invertStockChart.drawPyramidChart(pyramidPercentData,payableSummaryArray,true,yLabel);
Introduction:
It is a type of chart which display a gauge and a needle to show the value.
Pass div id as argument in init function. Pass angle as argument in turnNeedle function
eg)
meterChart.init('line18');
meterChart.turnNeedle(-90);
setTimeout(function(){
meterChart.turnNeedle(90);
},2000)
Introduction:
It's a chart which displays the data using combination of pie and area chart.
Functions of user Input Parameter:-
xAxisLabel:- Label for x axis
xAxisData:- x axis data
yLabel:- y axis label
labelLine1:-
dataOfLine1:-
labelLine2:-
dataOfLine2:-
revenueUnit:- Currency unit to use
PieData:- Data for pie chart
pieDataFactor:- Currency unit for pie chart
revenueOfLine1:- Data for first line
revenueOfLine2:- Data for second line
color:- Color for each line
clickedInfo:- Extra information to show on button click
2006:-
2012:-
clickedSybmol:- Image for symbol
eg)
var data = {
xAxisLabel : 'years',
xAxisData: [2004,2005,2006,2007,2008,2009,2010,2011,2012,2013],
yLabel : 'GDP',
labelLine1 :'india',
dataOfLine1 : [19,34,70,12,-42,20,-14,67,112,78],
labelLine2 : 'canada',
dataOfLine2 :[34,25,-60,22,92,30,24,47,53,38],
revenueUnit : '$',
PieData:{
//point wise data
'Data1':[76,43,54,32,66,34,21,56,12,55],
'Data2':[45,56,23,67,49,34,65,24,57,66]
},
pieDataFactor:"Revenue($)",
revenueOfLine1 :[76,43,54,32,66,34,21,56,12,55],
revenueOfLine2 :[45,56,23,67,49,34,65,24,57,66],
color : ["#ff7f0e","#9467bd"],
clickedInfo :{2009:"INDAIN GDP IS FASTEST GROWING ECONOMY",
2006:"INDAIN GDP IS FASTEST GROWING ECONOMY",
2012:"INDAIN GDP IS FASTEST GROWING ECONOMY"}
,
clickedSybmol :'./img/N.png'
};
Pass data defined above as argument in function.
eg)
var stocChart26=$("#line26").stocCharts();
stocChart26.drawCombinationalChart(data);
Introduction:
It's a type of chart which shows the variation in two data using bar chart.
a) Functions of user Input Parameter:-
title:- Title text of chart
subTitle:- Subtitle text of chart
titleColor:- color of title text
yAxisLabel:- y axis label
yAxisData:- y axis ticks
xAxisLabel:- x axis label
xAxisData:- actual data for coordinates
eg)
"title" : "Temperature variation by month",
"subTitle" : "Observed in Vik i Sogn, Norway, 2014",
"titleColor" : "gray",
"yAxisLabel" : 'Month',
"yAxisData": ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
"xAxisLabel" : "\u00B0"+"C",
"xAxisData" : [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
], }
var cnfg = {"data":variationData};
Pass cnfg defined above as argument in function.
eg)
var stocChart28=$("#line28").stocCharts();
stocChart28.variationAnalysis(cnfg);
Introduction:
It's a type of chart which shows the data in bubble.
a) Functions of user Input Parameter:-
title:- Title text of chart
subTitle:- Subtitle text of chart
titleColor:- color of title text
yAxisLabel:- y axis label
yAxisData:- y axis ticks
xAxisLabel:- x axis label
xAxisData:- actual data for coordinates
legendArray:- Array of legends
colorArray:- Array of colors
eg)
"title" : "Temperature variation by month",
"subTitle" : "Observed in Vik i Sogn, Norway, 2014",
"titleColor" : "gray",
"yAxisLabel" : 'Month',
"yAxisData": ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
"xAxisLabel" : "\u00B0"+"C", "xAxisData" : [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
],
"series" : [
{
data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [17, 93, 87], [151, 69, 40], [138, 123, 33], [57, 86, 31]]
},
{
data: [[125, 10, 87], [12, 75, 59], [111, 54, 8], [86, 55, 93], [115, 3, 58], [190, 63, 44], [191, 33, 17], [97, 113, 56], [115, 67, 48], [54, 125, 81]]
},
{
data: [[147, 47, 21], [120, 12, 4], [116, 76, 91], [38, 30, 60], [57, 98, 64], [61, 117, 80], [183, 60, 13], [167, 78, 75], [164, 112, 10], [30, 77, 82]]
}],
'legendArray':["Accenture","Wipro","Infosys"], 'colorArray' :["red","blue","green"] var cnfg={"data":bubbleData};
Pass cnfg defined above as argument in function.
eg)
var stocChart32=$("#line32").stocCharts();
stocChart32.threeDBubbleChart(cnfg);
Introduction:
A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent and multiple bars grouped with each other. Bars are grouped and are represented in 3D view.
a) Functions of user Input Parameter:-
colorArray:- Color of each bars
topMargin:- Margin from top
rightMargin:- Margin from right,
bottomMargin:- Margin from bottom,
leftMargin:- Margin from left,
toolTipLabelForYAxis:- y axis label for tooltip,
xLabel:- Label for x axis
xAxisTickArray:- x axis ticks
eg)
var cfg3DBarChart = {
topMargin: 5,
rightMargin: 0,
bottomMargin: 40,
leftMargin: 40,
toolTipLabelForYAxis: "Sales(in Crores)",
colorArray:["#39ec6e","#ff9811","#63deff","#59bde5","#16c54a","#e7969c", "#e7cb94", "#7f7f7f", "#bcbd22"],
xAxisTickArray:[2010,2011,2012,2013,2014,2015,2016,2017,2018,2019, 2020, 2021, 2022, 2023],
xLabel:"Year" }
eg)
var barDataOne = [15, 80, 120, 280, 50, 65, 900, 40, 23, 98, 634, 356, 520, 200];
var barDataTwo = [150, 180, 20, 20, 90, 650, 300, 400, 230, 308, 434, 320, 120, 189];
Pass div id, barDataOne, barDataTwo cfg3DBarChart,
eg)
var stocChart34=$("#line34").stocCharts(textStyleConfg);
stocChart34.drawThreeDGroupedBarChart("#line34", barDataOne, barDataTwo, cfg3DBarChart);
Introduction:
A diagram used in strategic decision making, valuation or probability calculations. The diagram starts at a single node, with branches emanating to additional nodes, which represent mutually exclusive decisions or events.
eg)
var data = { "Name": "Product",
"children1": [
{ "BName":"TShirt",
"Email":"",
"children1":[
{"NickName":"Red TShirt",
"id":1},
{"NickName":"Black TShirt",
"id":27 }],},
{"BName":"Fridge TV",
"Email":"",
"children1":[
{"NickName":"Large TV",
"id":2 },
{ "NickName":"Small TV",
"id":68} ],
}]};
Pass div id, data, link-color(color of connecting ways), node-color(color of tree nodes) using cfg.
eg)
var stocChart33=$("#line33").stocCharts();
var cfg={"data":data,"link-color":"#ccc","node-color":"#fff"};
stocChart33.treeChart(cfg);
Introduction:
A comparison chart is a simple bullet chart . It is used for comparison between the estimated value and actual result(for e.g it can be used for checking last decade trend of actual profit and estimated profit yearly).
a) var yAxisEstimateData :- It represents the values in gray color, which are representing estimated value.
b) var yAxisActualData :- It represents the bars in centre of every block , which are representing actual values.
c) var xAxisData :- It represents the value(here it is year).
eg)
yAxisEstimateData : [300,390,300,270,230,180,150,350,300,300,390,300,270,200,230,180]
yAxisActualData : [330,450,320,250,270,140,190,300,370,330,450,320,250,230,270,140]
xAxisData:[1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014]
var data = {
title : "Last 16 Year Data , Estimated v/s Actual Profit",
titleColor : "gray",
yAxisLabel : "Profit",
yAxisUnit : "Million",
yAxisEstimateData : [300,390,300,270,230,180,150,350,300,300,390,300,270,200,230,180],
yAxisEstimateDataUnit : 'Estimated',
yAxisActualData : [330,450,320,250,270,140,190,300,370,330,450,320,250,230,270,140],
yAxisActualDataUnit : 'Actual',
xAxisLabel : "Years",
xAxisData : [1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014]
}
var cnfg={"data":data};
Pass cnfg as argument in function.
eg)
var stocChart37=$("#line37").stocCharts();
stocChart37.comparisonAnalysis(cnfg);
Introduction:
A music spikes chart is simple bar chart , with different colors in different domains.
It is used for checking the intensity of a result and in which particular domains it falls in.(for e.g it can be used to check everyday temperature and in which domains it falls).
a) var yAxisData :- It represents values(here it is temperature) on a particular day.
b)xAxisData :- It represents values(here it is day).
eg)
var data = {
title : "Last 15 day's temperature readings",
titleColor : "gray",
yAxisUnit : "\u00B0"+"C",
yAxisLabel : "Temperature",
yAxisData : [18,25,42,25,20,35,45,20,40,10,30,40,32,44,40],
xAxisLabel : "",
xAxisData :
["1'Mar","2'Mar","3'Mar","4'Mar","5'Mar","6'Mar","7'Mar","8'Mar","9'Mar","10'Mar","11'Mar","12'Mar",
"13'Mar","14'Mar","15'Mar"]}
var cnfg={"data":data};
Pass cnfg as argument in function.
eg)
var stocChart36=$("#line36").stocCharts();
stocChart36.musicSpikesAnalysis(cnfg);
Introduction:
It is used to visualise the results , along the median(or any value) and visualising the intensity of that negative/positive results.It is used to visualise results with continuously changing value along X-axis.
a) var yAxisData :- It represents values(here it is temperature) on a particular day/time.
b)var xAxisData :- It represents values(here it is time of a day) with set intervals.
c)var conditionArrayAboveMidPoint:- It is giving gradient colors to the area above average amount line.
d)var conditionArrayBelowMidPoint:-It is giving gradient colors to the area below average amount line.
eg)
var data = {
yAxisArray : [-23,45,12,-23,-13,-66,-44,24,34,-12,40,67,-20,-32,-24,-28,20,40,70,-78],
xAxisArray:["8:00","8:30","9:00","9:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00",
"13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30"],
midPoint : 5,
midPointLabel : "Average Amount",
conditionArrayAboveMidPoint : [{34:"#aaefec"},{48:"#90e0dc"},{70:"#6cc0bc"}],
conditionArrayBelowMidPoint : [{15:"#e67a77"},{30:"#f6b0ae"},{50:"#ffd1d0"}],
xAxisLabel:"Time",
yAxisLabel:"Amount"}
var cnfg={"data":data};
Pass cnfg as argument in function.
eg)
var stocChart35=$("#line35").stocCharts();
stocChart35.areaChartWithNegativeValueAnalysis(cnfg);
Introduction:
An area chart or area graph displays graphically quantitive data. It is based on the line chart. The area between axis and line are commonly emphasized with colors, textures and hatchings. Commonly area chart is used for comparison between two or more quantities.
title: Title text
yAxisArray : y axis data
xAxisArray : x axis data
midPoint : Middle point
midPointLabel : Middle point label
conditionArrayAboveMidPoint : Color Array
conditionArrayBelowMidPoint : Color Array
xAxisLabel : x axis label array
yAxisLabel : y axis label array
eg)
var data = {
title : "FootFall Intensity in last 10 hours",
yAxisArray : [33,65,32,53,23,86,64,44,54,32,60,87,40,52,44,48,40,60,90,98],
xAxisArray:["8:00","8:30","9:00","9:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00",
"13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30"],
midPoint : 55,
midPointLabel : "Average Amount",
conditionArrayAboveMidPoint : [{64:"#aaefec"},{78:"#90e0dc"},{100:"#6cc0bc"}],
conditionArrayBelowMidPoint : [{45:"#ffd1d0"},{35:"#f6b0ae"},{30:"#e67a77"}],
xAxisLabel:"Time",
yAxisLabel:"Amount"
}
Pass div id, data and pass it in function as cnfg.
eg)
var cnfg={"data":data};
var stocChart35=$("#line35").stocCharts();
stocChart35.areaChartWithNegativeValueAnalysis(cnfg);
Introduction:
Donut or Doughnut chart is just a simple pie chart with a hole inside
dountData :Donut data
dountKey : Donut key
colorArray : color array
unit : label unit
legend : label of legend
legendColor: color of legends
eg)
var data = {
data:[{
dountData : [50,80,60,40,80],
dountKey : ["Excellent","Above Avg.","Average","Below Avg.","Poor"],
colorArray : ['#e67a77','#95d7bb','#fcb322','#6d788e','#aec785'],
className :"7th",
totalStudent : "45"},
{dountData : [50,80,60,40,80],
dountKey : ["Excellent","Above Avg.","Average","Below Avg.","Poor"],
colorArray : ['#e67a77','#95d7bb','#fcb322','#6d788e','#aec785'],
className :"8th",
totalStudent : "45"},
{dountData : [50,80,60,40,80],
dountKey : ["Excellent","Above Avg.","Average","Below Avg.","Poor"],
colorArray : ['#e67a77','#95d7bb','#fcb322','#6d788e','#aec785'],
className :"9th",
totalStudent : "48"},
{dountData : [50,80,60,40,80],
dountKey : ["Excellent","Above Avg.","Average","Below Avg.","Poor"],
colorArray : ['#e67a77','#95d7bb','#fcb322','#6d788e','#aec785'],
className :"10th",
totalStudent : "44"},
{dountData : [50,80,60,40,80],
dountKey : ["Excellent","Above Avg.","Average","Below Avg.","Poor"],
colorArray : ['#e67a77','#95d7bb','#fcb322','#6d788e','#aec785'],
className :"11th",
totalStudent : "52"
},
{
dountData : [50,80,60,40,80],
dountKey : ["Excellent","Above Avg.","Average","Below Avg.","Poor"],
colorArray : ['#e67a77','#95d7bb','#fcb322','#6d788e','#aec785'],
className :"12th",
totalStudent : "45"
}
],
unit:"Student's",
legend : ["Excellent","Above Avg.","Average","Below Avg.","Poor"],
legendColor: ['#e67a77','#95d7bb','#fcb322','#6d788e','#aec785']}
Pass div id and data in function.
eg)
var stocChart39=$("#line39").stocCharts();
stocChart39.multipleDountChartAnalysis(data);
Introduction:
A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.
titleColor: Title text color
bottomLabel : label of bottom axis
yAxisLabel : y axis label
yAxisUnit : y axis unit
yAxisData : y axis data
yAxisDataUnit : y axis data unit
unit: label unit
colorArray :color array
xAxisLabel : x axis label
xAxisData : x axis data
eg)
var data = {
titleColor : "",
bottomLabel : "Last Scores as compared to average of class",
yAxisLabel : "Profit",
yAxisUnit : "Million",
yAxisData : [25,-17,36,-8,20,-10],
averageValue : 0,
yAxisDataUnit : 'Estimated',
xAxisLabel : "Years",
xAxisData : ["9th(math)","9th(physics)","9th(chemistry)","10th(math)","10th(physics)","10th(chemistry)"],
colorArray : ['#e67a77','#95d7bb','#fcb322','#6d788e','#aec785','#a48ad4'],
unit : "%"}
Pass div id, data in function.
eg)
var stocChart40=$("#line40").stocCharts();
stocChart40.barWithLabelAnalysis(data);
Introduction:
The Logo Chart shows the performance of an individual, relative to the average performance of the organization.
nameArray: Name array
classArray : Class array
imageArray: Image array
imageFrameColor: Frame image color
textArray: Array of text
textColor : Text color
legendArray : Array of legends
legendImageArray : Array of legend image
unit : Label unit
eg)
var data = {
{nameArray: ['John','Mark','Steev','Hussy','John','John','John','John',],
classArray : ['10th','10th','10th','10th','10th','10th','10th','10th'],
imageArray:["./img/S3.png","./img/S3.png","./img/S3.png","./img/S3.png","./img/S3.png","./img/S3.png","./img/S3.png","./img/S3.png"],
imageFrameColor:["green","green","red","red","green","green","red","red"],
textArray:[-20,30,-40,-50,20,10,50,-80],
textColor : ["green","red"],
legendArray:["Above Average","Below Average","Improving","Worsening"],
legendImageArray:['green','red','green','red'],
unit : "%"}
Pass div id, data in function as cnfg.
eg)
var stocChart41=$("#line41").stocCharts();
stocChart41.logoChart(data);
Introduction:
The Bar chart with Logo is an advanced version of Simple Bar Chart, in which rather than companies name, we used their logos to make it more informative.
xData:- x axis data
yData:- y axis data
imagePathArray:- image array
color:- color to be used
yIndicationLabel:- y axis label
xIndicationLabel:- x axis label
colorArray:- color array
xFieldName:- x axis field name
yFieldName:- y axis field name
axisColor:- color of axis
eg)
var AdvancedBarData={
"yData":[3,5,6,2,10,20,10],
'xData':["Volkswagen","Hyundai","Toyota","Ford","porsche","Ebay","Paxcom"],
"imagePathArray":["./img/logos/1.jpg","./img/logos/2.jpg","./img/logos/3.jpg","./img/logos/4.jpg","./img/logos/5.jpg","./img/logos/6.jpg","./img/logos/7.jpg"],
"color":["#e67a77"],
"yIndicationLabel":"Profit",
"xIndicationLabel":"Company"
}
var colorArray=["#A3BFDB"];
var xFieldName="over";
var yFieldName="run";
var axisColor="black";
Pass div id, data using cfg in function.
eg)
var cnfg={"data":AdvancedBarData};
var stocChart30=$("#line30").stocCharts();
stocChart30.barWithLogo(cnfg);
Introduction:
The Detail Menu Chart illustrates, what happened in the last pre-defined time interval.
title:- Title text
titleSize:- Title size
titleColor:- Title color
color:- color to be used
leftYAxisData:- left y axis data
leftYAxisLabel:- left y axis label
leftYAxisUnit:- left y axis unit
rightYAxisData:- right y axis data
rightYAxisLabel:- right y axis label
rightYAxisUnit:- right y axis unit
xAxisData:- x axis data
xAxisLabel:- x axis label
topYSymbolArray:- top y symbol array
topYSymbolLabel:- top y symbol label
bottomYSymbolArray:- bottom y symbol array
bottomYSymbolLabel:- bottom y symbol label
imageFolderPath:- image folder path
eg)
var data = {
'title' : 'Last 20 Balls Progression Of Innings',
'titleSize' : 20,
'titleColor' : 'gray',
'leftYAxisData' : [6,6.1,6,6.5,6.2,7,4,3,6,7,4,3.4,5,5,6,5,3,6,7,6],
'leftYAxisLabel' : 'Average',
'leftYAxisUnit' : 'rpo',
'rightYAxisData' :
[202,203,205,205,209,210,216,218,220,221,222,223,227,231,233,239,243,243,245,249],
'rightYAxisLabel' : 'Total Runs',
'rightYAxisUnit' : 'runs',
'xAxisData' : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
'xAxisLabel' : 'Last 20 Balls',
'topYSymbolArray' :
['two','one','two','wicket','four','one','six','two','two','one','one','one','four','four','two','six','four','wicket','two','four'],
'topYSymbolLabel' : 'Runs Scored',
'bottomYSymbolArray' :
['inSwing','shortPitch','outSwing','yorker','outSwing','yorker','inSwing','shortPitch','outSwing','yorker',
'outSwing','yorker','inSwing','shortPitch','outSwing','yorker','outSwing','yorker','outSwing','yorker'],
'bottomYSymbolLabel' : 'Ball Type',
"imageFolderPath":'./img/'
}
Pass div id, data using cfg in function.
eg)
var cnfg={"data":data};
var stocChart31=$("#line31").stocCharts(textStyleConfg);
stocChart31.detailAnalysis(cnfg);
Introduction:
The Zoomable Area Chart is an advanced version of simple Area Chart, in which user can zoom a particular area for more detailed description of that segment.
var data = [{"id":401,"doj":"2015-03-28"},{"id":315,"doj":"2015-03-29"},{"id":436,"doj":"2015-03-30"},{"id":230,"doj":"2015-03-31"},{"id":180,"doj":"2015-04-01"},{"id":136,"doj":"2015-04-02"},{"id":220,"doj":"2015-04-03"},{"id":396,"doj":"2015-04-04"},{"id":374,"doj":"2015-04-05"},{"id":279,"doj":"2015-04-06"},{"id":484,"doj":"2015-04-07"},{"id":205,"doj":"2015-04-08"},{"id":242,"doj":"2015-04-09"},{"id":206,"doj":"2015-04-10"},{"id":284,"doj":"2015-04-11"},{"id":167,"doj":"2015-04-12"},{"id":123,"doj":"2015-04-13"},{"id":484,"doj":"2015-04-14"},{"id":450,"doj":"2015-04-15"},{"id":125,"doj":"2015-04-16"},{"id":270,"doj":"2015-04-17"},{"id":153,"doj":"2015-04-18"},{"id":493,"doj":"2015-04-19"},{"id":254,"doj":"2015-04-20"},{"id":481,"doj":"2015-04-21"},{"id":438,"doj":"2015-04-22"},{"id":123,"doj":"2015-04-23"},{"id":268,"doj":"2015-04-24"},{"id":382,"doj":"2015-04-25"}]
eg)
eg)
xFieldName:- x field name
yFieldName:- y field name
title:- title text
xAxisIndicationLabel:- x axis label
yAxisIndicationLabel:- y axis label
axisColor:- color of axis
Pass div id, data and above fields in area chart function.
Pass color and data in circle chart function
eg)
var stockChart=$("#line16").stocCharts();
stockChart.areaChart({'data':data,'xFieldName':'doj',"yFieldName":'id','title':'Profit Analysis
Chart','xAxisIndicationLabel':'Time
Index','yAxisIndicationLabel':'Money','axisColor':'#222222','attachBrushEvent':true,'redraw':false});
stockChart.circleChart({'color':"blue",'r':3,'data':data});
Introduction:
The Network Chart shows, to which and how the nodes are linked to each other.
var data = [{"id":401,"doj":"2015-03-28"},{"id":315,"doj":"2015-03-29"},{"id":436,"doj":"2015-03-30"},{"id":230,"doj":"2015-03-31"},{"id":180,"doj":"2015-04-01"},{"id":136,"doj":"2015-04-02"},{"id":220,"doj":"2015-04-03"},{"id":396,"doj":"2015-04-04"},{"id":374,"doj":"2015-04-05"},{"id":279,"doj":"2015-04-06"},{"id":484,"doj":"2015-04-07"},{"id":205,"doj":"2015-04-08"},{"id":242,"doj":"2015-04-09"},{"id":206,"doj":"2015-04-10"},{"id":284,"doj":"2015-04-11"},{"id":167,"doj":"2015-04-12"},{"id":123,"doj":"2015-04-13"},{"id":484,"doj":"2015-04-14"},{"id":450,"doj":"2015-04-15"},{"id":125,"doj":"2015-04-16"},{"id":270,"doj":"2015-04-17"},{"id":153,"doj":"2015-04-18"},{"id":493,"doj":"2015-04-19"},{"id":254,"doj":"2015-04-20"},{"id":481,"doj":"2015-04-21"},{"id":438,"doj":"2015-04-22"},{"id":123,"doj":"2015-04-23"},{"id":268,"doj":"2015-04-24"},{"id":382,"doj":"2015-04-25"}]
eg)
eg)
xFieldName:- x field name
yFieldName:- y field name
title:- title text
xAxisIndicationLabel:- x axis label
yAxisIndicationLabel:- y axis label
axisColor:- color of axis
Pass div id, data and above fields in area chart function.
Pass color and data in circle chart function
eg)
var stockChart=$("#line16").stocCharts();
stockChart.areaChart({'data':data,'xFieldName':'doj',"yFieldName":'id','title':'Profit Analysis
Chart','xAxisIndicationLabel':'Time
Index','yAxisIndicationLabel':'Money','axisColor':'#222222','attachBrushEvent':true,'redraw':false});
stockChart.circleChart({'color':"blue",'r':3,'data':data});
Introduction:
The Multi-Axis Line chart is an advanced form of line charts used to contrast a set of entities based on multiple parameters.
yAxisData:- y axis data
yAixsAvgData:- y axis average data
yAxisColor:- y axis color
xAxisData:- x axis data
unit:- label unit
legend:- array of legends
legendColor:- array of legend color
eg)
var data = { yObject: [
{
yAxisData : [210,280,270,320,350,260,325],
yAixsAvgData : [80,37,40,100,75,45,30],
yAxisColor : "orange"
},
{
yAxisData : [240,250,160,295,160,180,170],
yAixsAvgData : [35,25,20,45,30,20,55],
yAxisColor : "blue"
},
{
yAxisData : [100,150,50,200,125,75,230],
yAixsAvgData : [135,125,120,150,130,120,155],
yAxisColor : "green"
}
],
xAxisData : ["Jan","Feb","Mar","Apr","May","June","July"],
unit:"Student's",
legend : ["Student Login","Class Avg.Login","Student Interaction","Class.Avg Interaction","Student Time Spent","Class Time Spent"],
legendColor: ['orange','orange','blue','blue','green','green']
}
Introduction:
A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent. Bars are represented in 3D cylindrical view.
yAxisData:- y axis data
yAxisColor:- y axis color
xAxisData:- x axis data
unit:- label unit
eg)
var data = title : "Country Growth Rate", barData: [ [
{"country": "USA","visits": 4250,"color": "#FF0F00" },
{"country": "China", "visits": 3882, "color": "#FF6600"},
{"country": "Japan","visits": 3409,"color": "#FF9E01"},
{"country": "Germany","visits": 3022,"color": "#FCD202"},
{"country": "pakistan","visits": 2622,"color": "#F8FF01"},
{"country": "France",
"visits": 2214,
"color": "#B0DE09"
},
{
"country": "India",
"visits": 1984,
"color": "#04D215"
},
{
"country": "Spain",
"visits": 1511,
"color": "#0D8ECF"
},
{
"country": "England",
"visits": 1165,
"color": "#0D52D1"
},
{
"country": "Russia",
"visits": 980,
"color": "#2A0CD0"
},
{
"country": "UK",
"visits": 743,
"color": "#8A0CCF"
},
{
"country": "Canada",
"visits": 641,
"color": "#CD0D74"
},
{
"country": "Brazil",
"visits": 595,
"color": "#754DEB"
},
{
"country": "Italy",
"visits": 516,
"color": "#999999"
}],
xAxisLabel : "Country",
yAxisLabel :"Visits",
unit : ""}
Introduction:
It is a type of graph in which a circle/pie is divided into sectors, and each sector represents a some fraction of the whole. Here, pie is shown in 3D.
dountData:- dount data array
dountKey:- dount key array
colorArray:- dount color array
unit:- label unit
eg)
var data = {
dountData : [231,123,184,155,55], dountKey : ["Excellent","Above Avg.","Average","Below Avg.","Poor"], colorArray : ['pink','#95d7bb','#fcb322','#e67a77','#aec785'], unit : "%"
}
Introduction:
A doughnut chart displays data as percentage of the whole. Categories are represented by every slice. Doughnut charts are functionally identical to pie charts.
Donut is represented in 3D view here.
dountData:- dount data array
dountKey:- dount key array
colorArray:- dount color array
unit:- label unit
eg)
var data = {
dountData : [231,123,184,155,55], dountKey : ["Excellent","Above Avg.","Average","Below Avg.","Poor"], colorArray : ['pink','#95d7bb','#fcb322','#e67a77','#aec785'], unit : "%"
}
Introduction:
A 3D comparison chart is a simple bullet chart . It is used for comparison between the estimated value and actual result(for e.g it can be used for checking last decade trend of actual profit and estimated profit yearly).
a) var yAxisEstimateData :- It represents the values in gray color, which are representing estimated value.
b) var yAxisActualData :- It represents the bars in centre of every block , which are representing actual values.
c) var xAxisData :- It represents the value(here it is year).
eg)
var data = {
title : "Last 16 Year Data , Estimated v/s Actual Profit",
yAxisLabel : "Profit",
yAxisUnit : "Million",
yAxisEstimateData : [325,250,340,230,250,290,100,220,350,300],
yAxisEstimateDataUnit : 'Estimated',
yAxisActualData : [275,300,320,250,230,270,140,190,300,370],
yAxisActualDataUnit : 'Actual',
xAxisLabel : "Years",
xAxisData : [2005,2006,2007,2008,2009,2010,2011,2012,2013,2014],
legendArray : ['Estimate Data','Actual Data']
}
Introduction:
This chart represent speed in km/hr
data:- data for meter chart
colorArray:-color of meter chart
meterLabel:-label for meter chart
eg)
var meterChartData = {
"data" :[0,20,40,60,80,100,120,140,160,180,200,220], "colorArray" : ["#2ec7c9","#5ab1ef","#d87a80"], "meterLabel" : "Km/h"
}
Introduction:
A comparison area chart is a simple area chart representing multiple areas for data . It is used for comparison between data.
.
title:-Title of Chart
xAxisData:-Data for x-axis
xAxisLabel:-Label for x-axis
yAxisLabel:-Label for y-axis
yDataObj:-Array of JSON object
yAxisData:- Data for y-axis
legend:- legend name
color:- color value
eg)
var data = {
"title" : "Product Status", "xAxisData" : ["1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009"], "xAxisLabel" : "Years", "yAxisLabel" : "sssssss", "yDataObj" : [ { "yAxisData" : [330,450,320,250,270,140,190,300,370,330,450], "legend" : "Complete", "color" : "#90e0dc" }, { "yAxisData" : [230,432,267,272,188,299,388,255,299,466,133], "legend" : "Total", "color" : "#2ab298" }, { "yAxisData" : [344,234,321,123,432,123,322,266,166,211,356], "legend" : "Approved", "color" : "#d9d66d" }, { "yAxisData" : [453,234,378,212,367,234,321,378,211,111,324], "legend" : "Active", "color" : "#e56969" } ]
}
Introduction:
This is a simple Line chart that has Reverse Y Axis
dountData:- dount data array
dountKey:- dount key array
colorArray:- dount color array
unit:- label unit
eg)
var data = {
dountData : [231,123,184,155,55], dountKey : ["Excellent","Above Avg.","Average","Below Avg.","Poor"], colorArray : ['pink','#95d7bb','#fcb322','#e67a77','#aec785'], unit : "%"
}
Introduction:
Performance chart represent performance of data(for eg, performance of each class according to to subject).
title:- Title for chart
xLabel:- Label represent x-axis
yLabel:- Label represent y-axis
legendArray:- Array for represent Legends
legendColor:- color for Legends
differentActivity:- activities represent x-axis
maxValue:- maximum value
minValue:- minimum value
LineColor:- color of line
data:-Array of JSON object represent data
eg)
var performanceChartData = {
"title" : "Class Performence", "yLabel" : "subject(class vise)", "xLabel" : "activity", "legendArray":["legend1","legend2","legend3"], "legendColor":["cyan","#f7f7f7","yellow"], "data": [ { "class_name": "7th-B Maths", "class_url": "http://example.com", "activity": 12, "recall": 24, "understanding": 36, "xData":[45,34,67,34,56,20], "xDataColor":["#f7f7f7","#f7f7f7","#f7f7f7","#f7f7f7","#f7f7f7","#f7f7f7"], "toolTipActivities":["Good","Very Good","Brilient","Good","Very Good","Brilient"], "tip-activity": "Lorem Ipsum activity", "tip-recall": "Lorem Ipsum recall", "tip-understanding": "Lorem Ipsum understanding", "color-activity": "#f7f7f7", "color-recall": "#f7f7f7", "color-understanding": "#f7f7f7" }, { "class_name": "7th-A Maths", "class_url": "http://example.com", "activity": 12, "recall": 24, "understanding": 36, "xData" : [34,56,43,23,43,45], "xDataColor" : ["#fcb322","#fcb322","#fcb322","#fcb322","#fcb322","#fcb322"], "toolTipActivities":["Good","Very Good","Brilient","Good","Very Good","Brilient"], "tip-activity": "Lorem Ipsum activity", "tip-recall": "Lorem Ipsum recall", "tip-understanding": "Lorem Ipsum understanding", "color-activity": "#fcb322", "color-recall": "#fcb322", "color-understanding": "#fcb322" }, { "class_name": "6th-A Maths", "class_url": "http://example.com", "activity": 12, "recall": 24, "understanding": 36, "xData" : [54,63,36,23,25,49], "xDataColor" : ["#fcb322","#fcb322","#fcb322","#fcb322","#fcb322","#fcb322"], "toolTipActivities":["Good","Very Good","Brilient","Good","Very Good","Brilient"], "tip-activity": "Lorem Ipsum activity", "tip-recall": "Lorem Ipsum recall", "tip-understanding": "Lorem Ipsum understanding", "color-activity": "#fcb322", "color-recall": "#fcb322", "color-understanding": "#fcb322" }, { "class_name": "6th-B Maths", "class_url": "http://example.com", "activity": 12, "recall": 24, "understanding": 36, "xData" : [54,23,"fsy",43,35,39], "xDataColor" : ["#fcb322","#fcb322","#fcb322","#fcb322","#fcb322","#fcb322"], "toolTipActivities":["Good","Very Good","Brilient","Good","Very Good","Brilient"], "tip-activity": "Lorem Ipsum activity", "tip-recall": "Lorem Ipsum recall", "tip-understanding": "Lorem Ipsum understanding", "color-activity": "#fcb322", "color-recall": "#fcb322", "color-understanding": "#fcb322" } ], "differentActivity" : ["activity","recall","understanding","aaaaa","bbbb","cccc"], "maxValue" : 67, "minValue" : 20, "lineColor" : "gray"
}
Introduction:
It is a type of graph in which a donut is divided into sectors, and each sector represents a some fraction of the whole. Here, donut is shown in 3D.
dountData:- dount data array
dountKey:- dount key array
colorArray:- dount color array
unit:- label unit
factor:- represent data
eg)
var data = {
{ dountData : [231,123,184,155,55], dountKey : ["Excellent","Above Avg.","Average","Below Avg.","Poor"], colorArray : ['#a7a7a7','#95d7bb','#fcb322','#e67a77','#aec785'], unit : "%", factor :"Students" }
}
Introduction:
This chart represent herarical structure of data
children:- Array of JSON with name,Size and Id
range:- color range
unit:- represent unit for data
eg)
var treeData = {
factor : "Asset Value", unit : "%", range : [-40,40], name: "tree", children:[ { name: "Portfolio 1", size: 45, portfolioId:"Portfolio1"}, { name: "Portfolio 2", size: 40, portfolioId:"Portfolio2"}, { name: "PortFolio 3", size: 35, portfolioId:"Portfolio3"}, { name: "Portfolio 4", size: 30, portfolioId:"Portfolio4"}, { name: "Portfolio 5", size: 25, portfolioId:"Portfolio5"}, { name: "Portfolio 6", size: 20, portfolioId:"Portfolio6"} ]
}
Introduction:
Active Area chart is combination of Area chart and Line chart. This chart shows the total sale of product according to years.
yAxisData:- y axis data
xAxisData:- X axis data
areaColor:- Color of shaded area
lineStrokeColor:- Color of Line
eg)
var data = {
title : "Product Sale",
yAxisLabel : "Sale",
yAxisData: [100,200,800,600,700,400,500],
xAxisLabel :"Years",
xAxisData :["2008","2009","2010","2011","2012","2013","2014"],
lineStrokeColor : "#0e3ab2",
areaColor : "#4866ba"
}
Introduction:
A Smooth Line Chart is a advance Line Chart to show data with the partition on average value.The larger data values from average value show different color then Lowest values
yAxisData :- Data for Y Axis
xAxisData :- Data for X Axis
lineColor :- Give two different color for line
circleBoundaryColor :- Boundary color for circle
average :- Average value of data for partition
eg)
var data = {
title : "Product Sale",
yAxisLabel :"Sale",
yAxisData: [10,60,32,20,44,70,50,20,70,10,25,30,28,33,65,77,50,58,40,20,15],
xAxisLabel :"Years",
xAxisData :["1990","1991","1992","1993","1994","1995","1996","1997","1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009","2010"],
lineColor : ["#2c539e","#7d011d"],
circleBoundaryColor : "white",
average : 40
}
Introduction:
It is a type of graph in which a circle/pie is divided into sectors, and each sector represents a some fraction of the whole. Here, pie is shown in 3D.
dountData:- dount data array
dountKey:- dount key array
colorArray:- dount color array
unit:- label unit
eg)
var data = {
dountData : [231,123,184,155,55], dountKey : ["Excellent","Above Avg.","Average","Below Avg.","Poor"], colorArray : ['pink','#95d7bb','#fcb322','#e67a77','#aec785'], unit : "%"
}
Introduction:
A donut chart displays data as percentage of the whole. Categories are represented by every slice. Donut charts are functionally identical to pie charts. Additionally, the bar chart is also embedded to show data.
title:-Title for chart
obj:- Array of JSON Object
key:- product Name
color:-color of product
data:- data of product
subData:- sub data represent product
subDataColor:-color for sub data
subDataKey:- subData Names
unit:-unit of data
eg)
var data = {
"title":"Product Distribution", "obj" :[{ "key" : "chips", "color" : "#c4a7ff", "data" : 45, "subData" : [56,23,78,43,56] }, { "key" : "soft drinks", "color" : "#c799ff", "data" : 42, "subData" : [78,43,23,56,67] }, { "key" : "oats", "color" : "#9bc8ff", "data" : 48, "subData" : [45,45,32,67,45] }, { "key" : "Product 1", "color" : "#8faeff", "data" : 40, "subData" : [45,78,45,23,56] }, { "key" : "Product 2", "color" : "#9999ff", "data" : 50, "subData" : [45,65,23,56,43] }, ], "subDataColor" : ["#5bc0de","#f0ad4e","#5cb85c","#d9534f","#428bca"], "subDataKey" : ["amazon","snapdeal","flipkart","local banya","big basket"], "unit" : "%"
}