HTML5 Chart – Sibeesh Passion

Client Side Chart Widget in HTML5: Part 5 (Polar Area Chart)

SibeeshVenu — Fri, 29 May 2015 19:53:38 +0000

Introduction

I hope you have read my first two articles in this series that explains the loading of a Bar Chart, Pie Chart and Doughnut Chart. Please see the following links.

Now we will explain a client-side Doughnut Chart widget in HTML5.

Background

Please download the necessary files here http://www.chartjs.org/.

Using the code

A simple HTML

>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title> Polar Area Chart Using Chart.jstitle>
head>
<body>body>
html>

Included JavaScript file

<script src=“Chart.js”>script>

Call the Chart Function

window.onload = function () {
var canvasObject = document.getElementById(“myChart”).getContext(“2d”);
window.myPolarArea = new Chart(canvasObject).PolarArea(polarChartData, {
responsive: true
});
}

Here we are loading the chart in the myChart.

As you can see in the preceding code, polarChartData is the data we will load into the chart.

var polarChartData = [
{
value: 200,
color: “#F7464A”,
highlight: “#FF5A5E”,
label: “Monday”
},
{
value: 50,
color: “#46BFBD”,
highlight: “#5AD3D1”,
label: “Tuesday”
},
{
value: 150,
color: “#FDB45C”,
highlight: “#FFC870”,
label: “Wednesday”
},
{
value: 20,
color: “#949FB1”,
highlight: “#A8B3C5”,
label: “Saturday”
},
{
value: 400,
color: “#4D5360”,
highlight: “#616774”,
label: “Sunday”
}
];

Properties

value
color
highlight
label

Here you can change the properties as you want.

Complete HTML

>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Doughnut Chart Using Chart.jstitle>
<script src=“Chart.js”>script>
<script>
var polarChartData = [
{
value: 200,
color: “#F7464A”,
highlight: “#FF5A5E”,
label: “Monday”
},
{
value: 50,
color: “#46BFBD”,
highlight: “#5AD3D1”,
label: “Tuesday”
},
{
value: 150,
color: “#FDB45C”,
highlight: “#FFC870”,
label: “Wednesday”
},
{
value: 20,
color: “#949FB1”,
highlight: “#A8B3C5”,
label: “Saturday”
},
{
value: 400,
color: “#4D5360”,
highlight: “#616774”,
label: “Sunday”
}
];
window.onload = function () {
var canvasObject = document.getElementById(“myChart”).getContext(“2d”);
window.myPolarArea = new Chart(canvasObject).PolarArea(polarChartData, {
responsive: true
});
}
script>
head>
<body>
<div>
Polar Area Chart @ <a href=“www.sibeeshpassion.com”>Sibeesh Passiona>
<canvas id=“myChart”>canvas>
div>
body>
html>

Conclusion

I hope you can now create your own chart.

Output

Client Side Chart Widget in HTML 5: Part 3 (Line Chart)

SibeeshVenu — Fri, 29 May 2015 19:51:17 +0000

Introduction

I hope you have read my first two articles in this series that explains about loading a Bar chart and Pie chart. If you have not read them then please see the following links.

Now we will explain a client-side line chart widget in HTML5.

Background

Please download the necessary files here.

Using the code

A simple HTML

“http://www.w3.org/1999/xhtml”>
Line Chart Using Chart.js

Included JavaScript file

“Chart.js”>

Call the Chart Function

window.onload = function () {
var canvasObject = document.getElementById(“myChart”).getContext(“2d”);
window.myLine = new Chart(canvasObject).Line(lineChartData, {
responsive: true
});
}

Here we are loading the chart into myChart.

As you can see in the preceding code, lineChartData is the data we will load into the chart.

var lineChartData = {
labels: [“Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”, “Sunday”],
datasets: [
{
label: “My First dataset”,
fillColor: “rgba(220,220,220,0.2)”,
strokeColor: “rgba(220,220,220,1)”,
pointColor: “rgba(220,220,220,1)”,
pointStrokeColor: “#fff”,
pointHighlightFill: “#fff”,
pointHighlightStroke: “rgba(220,220,220,1)”,
data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
},
{
label: “My Second dataset”,
fillColor: “rgba(151,187,205,0.2)”,
strokeColor: “rgba(151,187,205,1)”,
pointColor: “rgba(151,187,205,1)”,
pointStrokeColor: “#fff”,
pointHighlightFill: “#fff”,
pointHighlightStroke: “rgba(151,187,205,1)”,
data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
}
]
}

Properties

Labels
Datasets
1. fillColor
2. strokeColor
3. pointColor
4. pointStrokeColor
5. pointHighlightFill
6. pointHighlightStroke
7. data

Here you can change the properties as you want.

To generate data

var scalingFactor = function () { return Math.round(Math.random() * 100) };

Complete HTML

“http://www.w3.org/1999/xhtml”>
Line Chart Using Chart.js
“Chart.js”>
“myChart”>

Conclusion

I hope you have created your own chart.

Output

Client-Side Chart Widget in HTML 5: Part 2 (Pie Chart)

SibeeshVenu — Fri, 29 May 2015 19:48:02 +0000

Introduction

Hi all, I hope you are fine. I hope you have read my first part of this series that explains about loading the Bar Chart. Today we will explain a client-side Pie Chart widget in HTML5.

Background

As you need, you need to download the files. Please download the necessary files from here.

Using the code

A simple HTML

“http://www.w3.org/1999/xhtml”>
Pie Chart Using Chart.js

Included JavaScript file

“Chart.js”>

Call the Chart Function

window.onload = function () {
var canvasObject = document.getElementById(“myChart”).getContext(“2d”);
window.myPie = new Chart(canvasObject).Pie(pieChartData);
}

Here we are loading the chart in myChart.

As you can see in the preceding code, pieChartData is the data we will load into the chart.

var pieChartData = [
{
value: 600,
color: “#F7464A”,
highlight: “#FF5A5E”,
label: “Monday”
},
{
value: 150,
color: “#46BFBD”,
highlight: “#5AD3D1”,
label: “Tuesday”
},
{
value: 100,
color: “#FDB45C”,
highlight: “#FFC870”,
label: “Wednesday”
},
{
value: 400,
color: “#949FB1”,
highlight: “#A8B3C5”,
label: “Thursday”
},
{
value: 120,
color: “#4D5360”,
highlight: “#616774”,
label: “Friday”
}
];

Properties

value
color
highlight
label

Here you can change the properties as you want.

Complete HTML

“http://www.w3.org/1999/xhtml”>
Pie Chart Using Chart.js
“Chart.js”>
“myChart”>

Conclusion

I hope you can now create your own chart.

Output

Drag and Drop the Legend and Maintain the Position in Chart

SibeeshVenu — Wed, 29 Apr 2015 20:40:08 +0000

Today we will learn how to create a drag-able legend and maintain that position in the chart area, so that once we drag and drop the legend, even if we reload the chart again, it will take the legend position from the session storage, where we have set the values when dropping the legend. Cool, right?

Background

For the past few weeks I have been working in Charts, so a few days ago I got a requirement to make a drag-able legend and maintain the position. As you all know, everyone expects the best from their products, so I began working to satisfy my client by giving them all the feasible options in the chart. Once I was done with that it was good.

Download Source Code

Drag and Drop the Legend and Maintain the Position

Load the required files

To start, we must load some files, you can determine the files below.
[js]

[/js]

Creating UI elements

Now we need some UI elements to load the chart and show the drag and drop position. We will show the position values while the user drags and drops the legend, so that it looks more active.
[html]

Legend X:

Legend X:
[/html]

Creating options of chart

The next step we need is to set the options of the chart. Please find the following settings.
[js]
var options = {
title: {
text: ‘Worked hours in a week’
},
xAxis: {
categories: [‘Developing’, ‘Maitenance’, ‘Marketing’, ‘Business’, ‘Admin’]
},
series: [{
type: ‘column’,
name: ‘Monday’,
data: [3, 2, 1, 3, 4]
}, {
type: ‘column’,
name: ‘Tuesday’,
data: [2, 3, 5, 7, 6]
}, {
type: ‘column’,
name: ‘Wednesday’,
data: [4, 3, 3, 9, 0]
}, {
type: ‘column’,
name: ‘Thursday’,
data: [4, 3, 3, 9, 0]
}, {
type: ‘column’,
name: ‘Friday’,
data: [4, 3, 3, 9, 0]
}, {
type: ‘spline’,
name: ‘Thursday’,
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: ‘white’
}
}],
legend: {
enabled: true,
layout: ‘vertical’,
backgroundColor: ‘white’,
align: ‘left’,
verticalAlign: ‘top’,
y: 50,
x: 50,
borderWidth: 1,
borderRadius: 0,
title: {
text: ‘::Drag Me’
},
floating: true,
draggable: true,
zIndex: 20
}
};
[/js]

In the preceding code block we have set the series and other settings including the legend. Please note that we have set the draggable and floating property to true. You can customize all of these properties as you need to.
[js]
floating: true,
draggable: true,
[/js]

Now if you run your application, you will get output as follows.

Drag and Drop the Legend and Maintain the Position in Chart

So our application is working fine, isn’t it?

Changes in draggable-legend.js

To continue with the process, we must make some changes in the draggable-legend.js. You can see the changes below. If you download the source code attached, you can see the changes by default.
[js]
addEvent(chart.container, ‘mousemove’, function (e) {

});
[/js]

I will include some code for our purposes in the preceding function in draggable-legend.js. At the end of the specified function I am including the following code block.
[js]
$("#txtLegendX").val(options.x);
$("#txtLegendY").val(options.y);
sessionStorage.setItem("legendx", options.x);
sessionStorage.setItem("legendy", options.y);
[/js]

The purpose of that code block is to set the value to the session storage and the UI element. Now we will run our application and see the output.

Drag and Drop the Legend and Maintain the Position in Chart

Now if you drag and drop the legend somewhere else, you can see that the values specified in the text boxes has changed.

Drag and Drop the Legend and Maintain the Position in Chart

No we will check whether the values are updated to the session storage in the browser console.

Drag and Drop the Legend and Maintain the Position in Chart

Cool, it is updated, we are happy.

Now we need to retain this position even if the user reloads the chart, right? Normally what happens is, the chart will be loaded with the initial settings we have set in the option.

Maintain the legend position

To maintain the legend position, we must apply the legend position to the chart, we can take the values from the session storage where we already set the values.
[js]
if (sessionStorage.getItem("legendx") != null && typeof sessionStorage.getItem("legendx") != ‘undefined’ && sessionStorage.getItem("legendy") != null && typeof sessionStorage.getItem("legendy") != ‘undefined’) {
options.legend.x = parseInt(sessionStorage.getItem("legendx"));
options.legend.y = parseInt(sessionStorage.getItem("legendy"));
$("#txtLegendX").val(sessionStorage.getItem("legendx"));
$("#txtLegendY").val(sessionStorage.getItem("legendy"));
}
$(‘#container’).highcharts(options);
[/js]

We are checking the session storage values and applying values to the options and we provide that options to the chart. Sounds good? So our complete code for this implementation is as follows.

Complete code
[html]

Dragable Legend – sibeeshpassion

Dragable Legend – sibeeshpassion

Legend X:

Legend X:

[/html]

Conclusion

I hope you liked this article. Please provide your valuable suggestions. It matters a lot. Please download the source code to determine more.

Points of interest

Legend, Chart, Drag legend, Drop legend, Drag and drop legend in chart.

Working With Charts

SibeeshVenu — Wed, 29 Apr 2015 20:35:46 +0000

Introduction

This tip says how to formulate our data as a High Chart. Please provide your valuable comments. 🙂

Background

I am working in a project where 80% of the processes are handled in the client side itself. So I was looking for a client-side chart and High Chart satisfied my requiremetns. It is a good plugin and also easy to use. What is High Chart? High Charts is solely based on native browser technologies and doesn’t require client-side plugins like Flash or Java. Furthermore you don’t need to install anything on your server. No PHP or ASP.NET. High Charts needs only two JavaScript files to run, the highcharts.js core and either the jQuery, MooTools, Prototype or High Charts Standalone framework. The High Charts Standalone framework is designed for those who do not already use jQuery, MooTools or Prototype in their web page and wish to use High Charts with minimal overhead. Read more here: HIGHCHARTS, HIGHSTOCK AND HIGHMAPS DOCUMENTATION.

What you must know

jQuery :jQuery .
JavaScript :W3Schools.com.
CSS 3 : CSS3 Introduction .
HTML :HTML(5) Tutorial .
DOM Manipulations in jQuery :jQuery – DOM Manipulation .

Using the code

Before you start, you need to download the necessary files from: http://www.highcharts.com/download. Once you download the files, you need to include those in your project. Or you can use the CDN also.

[js]

[/js]

Now it is time to add a UI element in which we will generate the chart. Please assign some width to that element, so that our chart can be formulated inside that element.
[html]

[/html]

Now what else is pending is only to add the script that does the formulation work as in the following:
[js]
$(function() {
$(‘#container’).highcharts({
chart: {
type: ‘heatmap’,
marginTop: 40,
marginBottom: 40
},
title: {
text: ‘Sales per employee per weekday’
},
xAxis: {
categories: [‘Alexander’, ‘Marie’, ‘Maximilian’, ‘Sophia’, ‘Lukas’, ‘Maria’, ‘Leon’, ‘Anna’, ‘Tim’, ‘Laura’]
},
yAxis: {
categories: [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’],
title: null
},
colorAxis: {
min: 0,
minColor: ‘#FFFFFF’,
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: ‘right’,
layout: ‘vertical’,
margin: 0,
verticalAlign: ‘top’,
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function() {
return ‘’
this.series.xAxis.categories[this.point.x]
‘ sold
’
this.point.value ‘ items on
’
this.series.yAxis.categories[this.point.y]
‘’;
}
},
series: [{
name: ‘Sales per employee’,
borderWidth: 1,
data: [
[0, 0, 10],
[0, 1, 19],
[0, 2, 8],
[0, 3, 24],
[0, 4, 67],
[1, 0, 92],
[1, 1, 58],
[1, 2, 78],
[1, 3, 117],
[1, 4, 48],
[2, 0, 35],
[2, 1, 15],
[2, 2, 123],
[2, 3, 64],
[2, 4, 52],
[3, 0, 72],
[3, 1, 132],
[3, 2, 114],
[3, 3, 19],
[3, 4, 16],
[4, 0, 38],
[4, 1, 5],
[4, 2, 8],
[4, 3, 117],
[4, 4, 115],
[5, 0, 88],
[5, 1, 32],
[5, 2, 12],
[5, 3, 6],
[5, 4, 120],
[6, 0, 13],
[6, 1, 44],
[6, 2, 88],
[6, 3, 98],
[6, 4, 96],
[7, 0, 31],
[7, 1, 1],
[7, 2, 82],
[7, 3, 32],
[7, 4, 30],
[8, 0, 85],
[8, 1, 97],
[8, 2, 123],
[8, 3, 64],
[8, 4, 84],
[9, 0, 47],
[9, 1, 114],
[9, 2, 31],
[9, 3, 48],
[9, 4, 91]
],
dataLabels: {
enabled: true,
color: ‘black’,
style: {
textShadow: ‘none’,
HcTextStroke: null
}
}
}]
});
});
[/js]

Explanation

Now it’s time to go deeper to see what we have done. There are a few properties we have set for our chat so far. The following are what they are:

Chart: This property sets the chart type and chart styles. Here in this I am using heatmap. And you can set your own style to it.
Title: This sets the title for our chart. You can set a meaningful title related to our chart.
XAxis: Here you need to bind the series of elements that all you need to come under in X axis. You can bind that to the inner property categories.
YAxis: Here you need to bind the series of elements that all you need to come under in Y axis. You can bind that to the inner property categories.
ColorAxis: This property sets the colors for the chart. You can set the min color and max color so that we can get the shadow effect.
Legend: This is where we can set the limitation of which quadrant we need to show the data. You can set the y value to get the values as it’s multiplied one. You can also set its alignment.
Tooltip: Tooltip plays a main role in this chart, when you mouse over to the specific column you can see the small pop up that shows the exact value. You can set your own style for this J
Series: Now it’s time to apply the data. This is where we need to do that.

You can find more and do the options in this JavaScript fiddle.

Sibeeshvevenu

Output

Points of Interest

jQuery, CSS, HTML and HighChart.

History

1st Version: 08-May-2015

Create a Combo Chart and Make Your Chart Draggable

SibeeshVenu — Wed, 29 Apr 2015 20:34:03 +0000

Introduction
Hi all, this article explains how to create a Combo chart. As you all know, the word combo is short for combination, in this case it is a combination of chart types. Which means we can have multiple chart types in one chart.

Background

For the past few months I have been working in a dashboard application, so I encountered a situation to work with a Combo chart in my application. As I began working with the Combo chart, when I finished the work I got a new requirement that a Pie chart must be draggable in the chart area. So I thought of working on that and share it with you all.

What we need first

Include the necessary JavaScript files and UI elements as follows.

“http://code.highcharts.com/highcharts.js”>
“http://code.highcharts.com/modules/exporting.js”>
“container” style=“min-width: 310px; height: 400px; margin: 0 auto”>

“container2” style=“width: 150px; height: 150px; margin: 0 auto; position:absolute; top: 120px; left: 150px;”>

Combo chart configuration

Our next step is to configure the Combo chart. You can determine the configuration here.

$(function()
{
$(‘#container’).highcharts({
title: {
text: ‘Worked hours in a week’
},
xAxis: {
categories: [‘Apples’, ‘Oranges’, ‘Pears’, ‘Bananas’, ‘Plums’]
},
series: [{
type: ‘column’,
name: ‘Monday’,
data: [3, 2, 1, 3, 4]
}, {
type: ‘column’,
name: ‘Tuesday’,
data: [2, 3, 5, 7, 6]
}, {
type: ‘column’,
name: ‘Wednesday’,
data: [4, 3, 3, 9, 0]
}, {
type: ‘column’,
name: ‘Thursday’,
data: [4, 3, 3, 9, 0]
}, {
type: ‘column’,
name: ‘Friday’,
data: [4, 3, 3, 9, 0]
}, {
type: ‘spline’,
name: ‘Thursday’,
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: ‘white’
}
}]
});
$(‘#container2’).highcharts({
chart: {
backgroundColor: ‘rgba(0,0,0,0)’
},
title: {
text: null
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
type: ‘pie’,
name: ‘Total’,
data: [{
name: ‘Monday’,
y: 13,
color: Highcharts.getOptions().colors[0]
}, {
name: ‘Tuesday’,
y: 23,
color: Highcharts.getOptions().colors[1]
}, {
name: ‘Wednesday’,
y: 19,
color: Highcharts.getOptions().colors[2]
}, {
name: ‘Thursday’,
y: 19,
color: Highcharts.getOptions().colors[2]
}, {
name: ‘Friday’,
y: 19,
color: Highcharts.getOptions().colors[2]
}],
size: 90,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
$(“#container2”).draggable();
});

Please note that I have given the Pie chart as a separate chart so that we can make it draggable as follows.

$(“#container2”).draggable();

You can determine the demo here: http://jsfiddle.net/sibeeshvenu/oc1mn8ru/4/

Output

Now if you run this configuration you will get output as follows.

Now the interesting fact is, you can drag the pie to where ever you want it.

Conclusion

I hope you liked this article. Now please share your thoughts and suggestions. It matters a lot.

Kindest Regards,

Sibeesh Venu
Sibeesh Passion

Client Side Chart Widget in HTML 5: Part 8 (Pie Chart With Custom ToolTip)

SibeeshVenu — Thu, 29 Jan 2015 20:01:56 +0000

In this article we will see how to create a pie chart in HTML5 with custom tool tip. I hope you have read my first two articles in this series that explains the loading of Bar Charts, Pie Charts, Line Charts, Doughnut Charts, Polar Area Charts, Radar Charts and Line Chart with custom tooltip. Please see the following links.

Client-Side Chart Widget in HTML 5: Part 1 (Bar Chart)
Client-Side Chart Widget in HTML 5: Part 2 (Pie Chart)
Client-Side Chart Widget in HTML 5: Part 3 (Line Chart)
Client-Side Chart Widget in HTML 5: Part 4 (Doughnut Chart)
Client-Side Chart Widget in HTML 5: Part 5 (Polar Area Chart)
Client-Side Chart Widget in HTML 5: Part 6 (Radar Chart)
Client Side Chart Widget in HTML 5: Part 7 (Line Chart With Custom ToolTip)
Now we will explain a client Pie Chart widget with custom tooltip in HTML5.

Background

Please download the necessary files here.

Using the code

A simple HTML

[html]

Pie Chart widget with custom tooltip Using Chart.js

[/html]

Included JavaScript file

[html]

[/html]

Include UI Elements

[html]

[/html]

Call the Chart Function

[js]
window.onload = function () {
var ctx1 = document.getElementById("chart-area1").getContext("2d");
window.myPie = new Chart(ctx1).Pie(pieData);

var ctx2 = document.getElementById("chart-area2").getContext("2d");
window.myPie = new Chart(ctx2).Pie(pieData);
;
[/js]

Here we are loading the chart in the chart-area1 and chart-area2. As you can see in the preceding code, pieData is the data we will load into the chart.

[js]
var pieData = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Monday"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Tuesday"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Wednesday"
}, {
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Thursday"
}, {
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Friday"
}];
[/js]

Properties

Value

Color

Highlight

Label

Here you can change the properties as you want.

Now add the following style.

[css]

[/css]

Load the tool tip

You can include the tool tip as follows.

[js]
Chart.defaults.global.customTooltips = function (tooltip) {

// Tooltip Element
var tooltipEl = $(‘#chartjs-tooltip’);

// Hide if no tooltip
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}

// Set caret Position
tooltipEl.removeClass(‘above below’);
tooltipEl.addClass(tooltip.yAlign);

// Set Text
tooltipEl.html(tooltip.text);

// Find Y Location on page
var top;
if (tooltip.yAlign == ‘above’) {
top = tooltip.y – tooltip.caretHeight – tooltip.caretPadding;
} else {
top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
}

// Display, position, and set styles for font
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + ‘px’,
top: tooltip.chart.canvas.offsetTop + top + ‘px’,
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
};
[/js]

Please note that you can change your tooltip as needed.

Complete Code

[html]

Pie Chart with Custom Tooltips

Pie Chart With Custom Tooltip @ www.sibeeshpassion.com

[/html]

Output

Pie Chart In HTML5

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Client Side Chart Widget in HTML 5: Part 7 (Line Chart With Custom ToolTip)

SibeeshVenu — Thu, 29 Jan 2015 19:59:18 +0000

In this article we will see how to create a line chart in HTML5 with custom tool tip. We all works in charts right?. Charts are the most effective form of data representation. Here we will see a client side line chart. I hope you have read my first two articles in this series that explains the loading of Bar Charts, Pie Charts, Line Charts, Doughnut Charts, Polar Area Charts and Radar Charts. Please see the following links.

Now we will explain a client Line Chart widget with custom tooltip in HTML5.

Background

Please download the necessary files here.

Using the code

A simple HTML
[html]

Line Chart widget with custom tooltip Using Chart.js

[/html]

Included JavaScript file

[html]

[/html]

Call the Chart Function
[js]
window.onload = function () {
var ctx1 = document.getElementById("myChart").getContext("2d");
window.myLine = new Chart(ctx1).Line(lineChartData, {
showScale: false,
pointDot: true,
responsive: true
});
};
[/js]

Here we are loading the chart in the myChart. As you can see in the preceding code, lineChartData is the data we will load into the chart.
[js]
var lineChartData = {
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}]
};
[/js]

Properties

Labels

Datasets

label ( label for your dataset)

fillColor

strokeColor

pointColor

pointStrokeColor

pointHighlightFill

pointHighlightStroke

data

Here you can change the properties as you want. Now add the following style for our tooltip:
[css]

[/css]

Load the tooltip

You can include the tooltip as follows.
[js]
Chart.defaults.global.pointHitDetectionRadius = 1;
Chart.defaults.global.customTooltips = function (tooltip) {
var tooltipEl = $(‘#chartjs-tooltip’);

if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}

tooltipEl.removeClass(‘above below’);
tooltipEl.addClass(tooltip.yAlign);

var innerHtml = ”;
for (var i = tooltip.labels.length – 1; i >= 0; i–) {
innerHtml += [
‘

’
].join(”);
}
tooltipEl.html(innerHtml);

tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + ‘px’,
top: tooltip.chart.canvas.offsetTop + tooltip.y + ‘px’,
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
};
[/js]

Please note that you can change your tooltip as needed.

Complete Code
[html]

Line Chart with Custom Tooltips

Line Chart With Custom Tooltip @ www.sibeeshpassion.com

[/html]

Output

Line Chart With Custom Tool Tip

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Client Side Chart Widget in HTML5: Part 6 (Radar Chart)

SibeeshVenu — Thu, 29 Jan 2015 19:54:49 +0000

Introduction

I hope you have read my first two articles in this series that explains the loading of Bar Charts, Pie Charts, Line Charts, Doughnut Charts and Polar Area Charts. Please see the following links.

Now we will explain a client Radar Chart widget in HTML5.

Background

Please download the necessary files here http://www.chartjs.org/.

Using the code

A simple HTML

>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title> Radar Chart Using Chart.jstitle>
head>
<body>body>
html>

Included JavaScript file

<script src=“Chart.js”>script>

Call the Chart Function

window.onload = function () {
var canvasObject = document.getElementById(“myChart”).getContext(“2d”);
window.myRadar = new Chart(canvasObject).Radar(radarChartData, {
responsive: true
});
}

Here we are loading the chart in the myChart.

As you can see in the preceding code, radarChartData is the data we will load into the chart.

var radarChartData = {
labels: [“Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”, “Sunday”],
datasets: [
{
label: “Dataset 1”,
fillColor: “#66FFFF”,
strokeColor: “#800000”,
pointColor: “rgba(220,220,220,1)”,
pointStrokeColor: “#000”,
pointHighlightFill: “#FF1919”,
pointHighlightStroke: “rgba(220,220,220,1)”,
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: “Dataset 2”,
fillColor: “#0033CC”,
strokeColor: “#800000”,
pointColor: “rgba(151,187,205,1)”,
pointStrokeColor: “#000”,
pointHighlightFill: “#FF1919”,
pointHighlightStroke: “rgba(151,187,205,1)”,
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};

Properties

Labels
Datasets
1. label ( label for your dataset)
2. fillColor
3. strokeColor
4. pointColor
5. pointStrokeColor
6. pointHighlightFill
7. pointHighlightStroke
8. data

Here you can change the properties as you want.

Complete HTML

>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Radar Chart Using Chart.jstitle>
<script src=“Chart.js”>script>
<script>
var radarChartData = {
labels: [“Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”, “Sunday”],
datasets: [
{
label: “Dataset 1”,
fillColor: “#66FFFF”,
strokeColor: “#800000”,
pointColor: “rgba(220,220,220,1)”,
pointStrokeColor: “#000”,
pointHighlightFill: “#FF1919”,
pointHighlightStroke: “rgba(220,220,220,1)”,
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: “Dataset 2”,
fillColor: “#0033CC”,
strokeColor: “#800000”,
pointColor: “rgba(151,187,205,1)”,
pointStrokeColor: “#000”,
pointHighlightFill: “#FF1919”,
pointHighlightStroke: “rgba(151,187,205,1)”,
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
window.onload = function () {
var canvasObject = document.getElementById(“myChart”).getContext(“2d”);
window.myRadar = new Chart(canvasObject).Radar(radarChartData, {
responsive: true
});
}
script>
head>
<body>
<div>
Radar Area Chart @ <a href=“www.sibeeshpassion.com”>www.sibeeshpassion.coma>
<canvas id=“myChart”>canvas>
div>
body>
html>

Conclusion

I hope you can now create your own chart.

Output

Client-Side Chart Widget in HTML5: Part 4 (Doughnut Chart)

SibeeshVenu — Thu, 29 Jan 2015 19:52:26 +0000

Introduction

I hope you have read my first two articles in this series that explains the loading of a Bar Chart, Pie Chart and Doughnut Chart. Please see the following links.

Now we will explain a client-side Doughnut Chart widget in HTML5.

Background

Please download the necessary files from here http://www.chartjs.org/.

Using the code

A simple HTML

>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Doughnut Chart Using Chart.jstitle>
head>
<body>body>
html>

Included JavaScript file

<script src=“Chart.js”>script>

Call the Chart Function

window.onload = function () {
var canvasObject = document.getElementById(“myChart”).getContext(“2d”);
window.myDoughnut = new Chart(canvasObject).Doughnut(doughnutChartData, {
responsive: true
});
}

Here we are loading the chart into the myChart.

As you can see in the preceding code, doughnutChartData is the data we will load into the chart.

var doughnutChartData = [
{
value: 200,
color: “#F7464A”,
highlight: “#FF5A5E”,
label: “Monday”
},
{
value: 50,
color: “#46BFBD”,
highlight: “#5AD3D1”,
label: “Tuesday”
},
{
value: 150,
color: “#FDB45C”,
highlight: “#FFC870”,
label: “Wednesday”
},
{
value: 20,
color: “#949FB1”,
highlight: “#A8B3C5”,
label: “Saturday”
},
{
value: 400,
color: “#4D5360”,
highlight: “#616774”,
label: “Sunday”
}
];

Properties

value
color
highlight
label

Here you can change the properties as you want.

Complete HTML

>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Doughnut Chart Using Chart.jstitle>
<script src=“Chart.js”>script>
<script>
var doughnutChartData = [
{
value: 200,
color: “#F7464A”,
highlight: “#FF5A5E”,
label: “Monday”
},
{
value: 50,
color: “#46BFBD”,
highlight: “#5AD3D1”,
label: “Tuesday”
},
{
value: 150,
color: “#FDB45C”,
highlight: “#FFC870”,
label: “Wednesday”
},
{
value: 20,
color: “#949FB1”,
highlight: “#A8B3C5”,
label: “Saturday”
},
{
value: 400,
color: “#4D5360”,
highlight: “#616774”,
label: “Sunday”
}
];
window.onload = function () {
var canvasObject = document.getElementById(“myChart”).getContext(“2d”);
window.myDoughnut = new Chart(canvasObject).Doughnut(doughnutChartData, {
responsive: true
});
}
script>
head>
<body>
<div>
Doughnut Chart @ <a href=“www.sibeeshpassion.com”>Sibeesh Passiona>
<canvas id=“myChart”>canvas>
div>
body>
html>

Conclusion

I hope you can now create your own chart.

Output