Saturday, April 05, 2014

working with chart.js to create graphs,charts using javascript

I was monitoring my traffic last few days and was viewing graph of visitors for my site and was curious to know the way of generation of chart in Blogger to display the traffic.& finally found an excellent solution for my own Admin site also.solution was - Chart.js. Humans are always attracted to the visually drawn graphs and charts rather than raw data in plain sheets.Thus,Chart.js enhances to create charts and load the graph easily in to web pages since it is javascript plugin.as we come across the comparison of data charts could make easy to differ one from the other and makes user to understand soon about it,Any way those carts will be very useful for the ADMIN panel for many back end website to analyse data and compare them.There are lot of Bootstrap themes to create admin with charts but this tutorial may enhance you to create your own charts for your website with data given.


Installation of Chart.js : Download

Just like how we use javascript in our sites,attach them as in <head></head> tags using script src.

<script src="chart.js"></script>

Generating chart :

since this chart.js uses HTML5 we use <canvas> tag to load our charts in web pages with referencing respecttive id's

<canvas id="preferred_name" height="preferred height" 
width="preferred width"></canvas>

Javascript to create a chart :

generally Chart.js gives many flavours such as LINE,BAR,RADAR,POLAR,PIE,DOUGH NUT chart types.
Essential part of the chart is Data that to in number formats and Labels and Data Range to prepare a chart.By using the below statement we could call the function with possible arguments through them.generally we pass DATA and OPTIONS as arguments to generate a graph in canvas area.

var ctx = document.getElementById("canvas_id_here").getContext("2d");
new Chart(ctx).Line(data,options);

the above code calls the function with specific arguments i.e DATA and OPTIONS.

data (argument of above function) :

data is generally declared as VAR in javascript and by further we could break it up with three different options such as LABELS as array ,DATASETS that contains some CSS property and RAW-DATA.
lets have a look at the LABEL which is declared as array i.e

label:['India','south africa','Australia','USA']

now about some CSS property for our graph look i.e they have been determined by DATASETS with that RAW-DATA is combined as array which is essentials to generate graph, i.e

datasets:
[{
fillColor:"rgba(your specified value for fill color in r,g,b,a format)",
strokeColor:"rgba(your specified value for strokes colour in r,g,b,a format)",
pointColor:"rgba(your specified color option in rgba format)",
pointStrokeColor:"hexa decimal value for colour",
data:[45,42,15,14,17,62,14]
}
]

Options(argument to function mentioned above):

there are so many options which defines our graph look add some css,Those Options are simple for readers to interpret so i don't want to explain those,just go through the options code.

Line.defaults = {
scaleOverlay : false,
scaleOverride : false,
scaleSteps : null,
scaleStepWidth : null,
scaleStartValue : null,
scaleLineColor : "rgba(0,0,0,.1)",
scaleLineWidth : 1,
scaleShowLabels : true,
scaleLabel : "<%=value%>",
scaleFontFamily : "'Arial'",
scaleFontSize : 12,
scaleFontStyle : "normal",
scaleFontColor : "#666",
scaleShowGridLines : true,
scaleGridLineColor : "rgba(0,0,0,.05)",
scaleGridLineWidth : 1,
bezierCurve : true,
pointDot : true,
pointDotRadius : 3,
pointDotStrokeWidth : 1,
datasetStroke : true,
datasetStrokeWidth : 2,
datasetFill : true,
animation : true,
animationSteps : 60,
animationEasing : "easeOutQuart",
onAnimationComplete : null

}

Final word:

Thus combining the above resource we could generate charts graphs in efficient manner.I have given only a start up use the resource from Chart.js official website for download and verfication & documentations to get more stuffs loaded.share is care.I will provide the demo soon as possible.

2 comments:

Anonymous said...

please provide demo soon! pls

shivasurya said...

Hi, I am new to Charts. (Ionic framework). I would appreciate if I can help. I wonder where the javascripts included. In the HTML, within HEAD? It would be so?
I get a black screen only.



var ctx = document.getElementById("canvas_id_here").getContext("2d");
new Chart(ctx).Line(data,options);
label:['India','south africa','Australia','USA'];
datasets:
[{
fillColor:"rgba(your specified value for fill color in r,g,b,a format)",
strokeColor:"rgba(your specified value for strokes colour in r,g,b,a format)",
pointColor:"rgba(your specified color option in rgba format)",
pointStrokeColor:"hexa decimal value for colour",
data:[45,42,15,14,17,62,14]
}
]

Post a Comment

feel free to post your comments! Don't Spam here!