NextReports Blog: 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

1 comment:

for.7 September 2020 at 12:01
Great Article Cloud Computing Projects

Networking 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

Thursday, 20 February 2014

NextCharts: A Developer Perspective

1 comment: