brainstorm: NextCharts: A Developer Perspective

NextCharts is "the new kid in town" for NextReports Suite. It is a simple and nice HTML5 library, created with Javascript and JQuery, which can be used by developers to show different types of charts.

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:

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:

{
   "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"]
}

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":"glass",
   "alpha":0.6
}

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.

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"]
}

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"],
   "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

brainstorm

Thursday, February 20, 2014

NextCharts: A Developer Perspective

No comments: