Charts are drawn on a HTML5 canvas and tooltips are shown on a different canvas. Chart is passed as a JSON object. You can call the chart drawing function using as parameters the json and the ids of the two canvases:
nextChart(json, idCanvas, idTooltipCanvas)In this case the chart will have the size of the canvas as specified inside CSS/HTML.
You can also specify the width and height in pixels or as percents:
nextChart(json, idCanvas, idTooltipCanvas, canvasWidth, canvasHeight)A simple HTML page that shows a NextChart can specify (through css) how the tooltip will look. In this example there is a url that serves a json:
<html>
<head>
<title>NextReports Chart</title>
<style type="text/css">
.tip {
background-color:white;
border:1px solid gray;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position:absolute;
left:-200px;
top:100px;
}
.canvas {
border: 1px solid gray;
}
</style>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/nextcharts-1.0.min.js" type="text/javascript"></script>
<script>
$.ajax({
type: "POST",
url: "data-html5.json",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
console.log(data);
nextChart(data, 'canvas', 'tip');
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error: " + textStatus + " errorThrown: " + errorThrown);
}
});
</script>
</head>
<body>
<canvas class="canvas" id="canvas" width="500" height="300"></canvas>
<canvas class="tip" id="tip" width="1" height="25"></canvas>
</body>
</html>
Following we are taking about Json object structure. As a minimal set of characteristics, only the data and type properties are needed.
{This will generate a bar series chart:
"type":"bar",
"data":[[16,66,24,30,80,52],[48,50,29,60,70,58],[30,40,28,52,74,50]],
}
Type property can take a value from: bar, stackedbar, hbar, hstackedbar, line, area, pie.
If you do not specify even type, then by default line is used.
Lets add some labels and change the colors:
{Lets change the style and add some alpha to colors:
"type":"bar",
"data":[[16,66,24,30,80,52],[48,50,29,60,70,58],[30,40,28,52,74,50]],
"labels":["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE"],
"color":["#004CB3","#A04CB3","#7aa37a"]
}
{Style property can have different values for different chart types. For bar charts it can be one of the following: normal, glass, cylinder, dome, parallelepiped. For line charts it can be: normal, soliddot, hollowdot, anchordot, bowdot, stardot.
"type":"bar",
"data":[[16,66,24,30,80,52],[48,50,29,60,70,58],[30,40,28,52,74,50]],
"labels":["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE"],
"color":["#004CB3","#A04CB3","#7aa37a"],
"style":"glass",
"alpha":0.6
}
Lets hide the grid and add a legend:
{Lets change labels fonts and colors and show a title:
"type":"bar",
"data":[[16,66,24,30,80,52],[48,50,29,60,70,58],[30,40,28,52,74,50]],
"labels":["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE"],
"color":["#004CB3","#A04CB3","#7aa37a"],
"style":"glass",
"alpha":0.6,
"showGridX":false,
"showGridY":false,
"legend":["2011 First year of work","2012 Second year of work","2013 Third year of work"]
}
{
"type":"bar",
"data":[[16,66,24,30,80,52],[48,50,29,60,70,58],[30,40,28,52,74,50]],
"labels":["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE"],
"color":["#004CB3","#A04CB3","#7aa37a"],
"style":"glass",
"alpha":0.6,
"showGridX":false,
"showGridY":false,
"legend":["2011 First year of work","2012 Second year of work","2013 Third year of work"],
"title":{
"text":"Financial Analysis",
"font":{
"weight":"bold",
"size":16,
"family":"sans-serif"
},
"color":"blue"
},
"xData":{
"font":{
"weight":"bold",
"size":10,
"family":"sans-serif"
},
"color":"blue"
},
"yData":{
"font":{
"weight":"bold",
"size":10,
"family":"sans-serif"
},
"color":"blue"
}
}
There are also other properties like:
tickCount: how many ticks are shown on y axis
message: message format for tooltip
tooltipPattern: a pattern for tooltip
background: background color
labelOrientation: x label orientation (horizontal, vertical, diagonal, halfdiagonal)
onClick: javascript function for click events
Great Article Cloud Computing Projects
ReplyDeleteNetworking Projects
Final Year Projects for CSE
JavaScript Training in Chennai
JavaScript Training in Chennai
The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training