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.
{
"type":"bar",
"data":[[16,66,24,30,80,52],[48,50,29,60,70,58],[30,40,28,52,74,50]],
}
This will generate a bar series chart:
If you do not specify even type, then by default line is used.
Lets add some labels and change the 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"]
}
{
"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:
{
"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
No comments:
Post a Comment