Background

As you all know, charts are the graphical representations of our data. It is much easier to understand our data if it is in a graphical form. Am I right? It is easy to create a static chart, but what about a dynamic one? It will be bit tough right? But by using Spire.XLS, we can create any kind of charts easily. In this post, we will see those implementations.

Download the files

You can always get the needed files from here: Download Spire.XLS

Install Spire.XLS

I am using evaluation version with one month temporary license. There are free versions also available for spire.xls with some limitation. You can try that. Now click on the exe file after you extract the downloaded file. The installation will get started then.

Using the code

Before starting with coding you need to add the needed namespaces as follows.

[csharp]
using Spire.Xls;
using System.Drawing;
[/csharp]

First of all create a form and then a button, in the button click add the following lines of codes.

C# Code

[csharp]
private void button1_Click(object sender, EventArgs e)
{
try
{
//Create a new workbook
Workbook workbook = new Workbook();
//Initialize worksheet
workbook.CreateEmptySheets(1);
Worksheet sheet = workbook.Worksheets[0];
//Set sheet name
sheet.Name = "Chart data";
//Set the grid lines invisible
sheet.GridLinesVisible = false;
//Create a chart
Chart chart = sheet.Charts.Add(ExcelChartType.Pie3D);
//Set region of chart data
chart.DataRange = sheet.Range["B2:B5"];
chart.SeriesDataFromRange = false;
//Set position of chart
chart.LeftColumn = 1;
chart.TopRow = 6;
chart.RightColumn = 9;
chart.BottomRow = 25;
//Chart title
chart.ChartTitle = "Sales by year";
chart.ChartTitleArea.IsBold = true;
chart.ChartTitleArea.Size = 12;
//Initialize the chart series
Spire.Xls.Charts.ChartSerie cs = chart.Series[0];
//Chart Labels resource
cs.CategoryLabels = sheet.Range["A2:A5"];
//Chart value resource
cs.Values = sheet.Range["B2:B5"];
//Set the value visible in the chart
cs.DataPoints.DefaultDataPoint.DataLabels.HasValue = true;
//Year
sheet.Range["A1"].Value = "Year";
sheet.Range["A2"].Value = "2002";
sheet.Range["A3"].Value = "2003";
sheet.Range["A4"].Value = "2004";
sheet.Range["A5"].Value = "2005";
//Sales
sheet.Range["B1"].Value = "Sales";
sheet.Range["B2"].NumberValue = 4000;
sheet.Range["B3"].NumberValue = 6000;
sheet.Range["B4"].NumberValue = 7000;
sheet.Range["B5"].NumberValue = 8500;
//Style
sheet.Range["A1:B1"].Style.Font.IsBold = true;
sheet.Range["A2:B2"].Style.KnownColor = ExcelColors.LightYellow;
sheet.Range["A3:B3"].Style.KnownColor = ExcelColors.LightGreen1;
sheet.Range["A4:B4"].Style.KnownColor = ExcelColors.LightOrange;
sheet.Range["A5:B5"].Style.KnownColor = ExcelColors.LightTurquoise;
//Border
sheet.Range["A1:B5"].Style.Borders[BordersLineType.EdgeTop].Color = Color.FromArgb(0, 0, 128);
sheet.Range["A1:B5"].Style.Borders[BordersLineType.EdgeTop].LineStyle = LineStyleType.Thin;
sheet.Range["A1:B5"].Style.Borders[BordersLineType.EdgeBottom].Color = Color.FromArgb(0, 0, 128);
sheet.Range["A1:B5"].Style.Borders[BordersLineType.EdgeBottom].LineStyle = LineStyleType.Thin;
sheet.Range["A1:B5"].Style.Borders[BordersLineType.EdgeLeft].Color = Color.FromArgb(0, 0, 128);
sheet.Range["A1:B5"].Style.Borders[BordersLineType.EdgeLeft].LineStyle = LineStyleType.Thin;
sheet.Range["A1:B5"].Style.Borders[BordersLineType.EdgeRight].Color = Color.FromArgb(0, 0, 128);
sheet.Range["A1:B5"].Style.Borders[BordersLineType.EdgeRight].LineStyle = LineStyleType.Thin;
//Number format
sheet.Range["B2:C5"].Style.NumberFormat = "\"$\"#,##0";
chart.PlotArea.Fill.Visible = false;
//Save the file
workbook.SaveToFile("Sample.xls");
//Launch the file
System.Diagnostics.Process.Start("Sample.xls");
}
catch (Exception)
{

throw;
}
}
[/csharp]

VB.NET Code

[vb]
‘Create a new workbook
Dim workbook As New Workbook()
‘Initialize worksheet
workbook.CreateEmptySheets(1)
Dim sheet As Worksheet = workbook.Worksheets(0)
‘Set sheet name
sheet.Name = "Chart data"
‘Set the grid lines invisible
sheet.GridLinesVisible = False
‘Create a chart
Dim chart As Chart = sheet.Charts.Add(ExcelChartType.Pie3D)
‘Set region of chart data
chart.DataRange = sheet.Range("B2:B5")
chart.SeriesDataFromRange = False
‘Set position of chart
chart.LeftColumn = 1
chart.TopRow = 6
chart.RightColumn = 9
chart.BottomRow = 25
‘Chart title
chart.ChartTitle = "Sales by year"
chart.ChartTitleArea.IsBold = True
chart.ChartTitleArea.Size = 12
‘Set the chart
Dim cs As Spire.Xls.Charts.ChartSerie = chart.Series(0)
‘Chart Labels resource
cs.CategoryLabels = sheet.Range("A2:A5")
‘Chart value resource
cs.Values = sheet.Range("B2:B5")
‘Set the value visible in the chart
cs.DataPoints.DefaultDataPoint.DataLabels.HasValue = True
‘Year
sheet.Range("A1").Value = "Year"
sheet.Range("A2").Value = "2002"
sheet.Range("A3").Value = "2003"
sheet.Range("A4").Value = "2004"
sheet.Range("A5").Value = "2005"
‘Sales
sheet.Range("B1").Value = "Sales"
sheet.Range("B2").NumberValue = 4000
sheet.Range("B3").NumberValue = 6000
sheet.Range("B4").NumberValue = 7000
sheet.Range("B5").NumberValue = 8500
‘Style
sheet.Range("A1:B1").Style.Font.IsBold = True
sheet.Range("A2:B2").Style.KnownColor = ExcelColors.LightYellow
sheet.Range("A3:B3").Style.KnownColor = ExcelColors.LightGreen1
sheet.Range("A4:B4").Style.KnownColor = ExcelColors.LightOrange
sheet.Range("A5:B5").Style.KnownColor = ExcelColors.LightTurquoise
‘Border
sheet.Range("A1:B5").Style.Borders(BordersLineType.EdgeTop).Color = Color.FromArgb(0, 0, 128)
sheet.Range("A1:B5").Style.Borders(BordersLineType.EdgeTop).LineStyle = LineStyleType.Thin
sheet.Range("A1:B5").Style.Borders(BordersLineType.EdgeBottom).Color = Color.FromArgb(0, 0, 128)
sheet.Range("A1:B5").Style.Borders(BordersLineType.EdgeBottom).LineStyle = LineStyleType.Thin
sheet.Range("A1:B5").Style.Borders(BordersLineType.EdgeLeft).Color = Color.FromArgb(0, 0, 128)
sheet.Range("A1:B5").Style.Borders(BordersLineType.EdgeLeft).LineStyle = LineStyleType.Thin
sheet.Range("A1:B5").Style.Borders(BordersLineType.EdgeRight).Color = Color.FromArgb(0, 0, 128)
sheet.Range("A1:B5").Style.Borders(BordersLineType.EdgeRight).LineStyle = LineStyleType.Thin
‘Number format
sheet.Range("B2:C5").Style.NumberFormat = """$""#,##0"
chart.PlotArea.Fill.Visible = False
‘Save doc file.
workbook.SaveToFile("Sample.xls")
‘Launch the MS Word file.
System.Diagnostics.Process.Start("Sample.xls")
[/vb]

In the above lines code, we are creating a pie chart by giving some settings and data and load it. Now if you run you will get an output as follows.

In the above mentioned lines of codes, we are doing so many processes, those processes are listed below.

Wow!. That’s cool right?

Not yet finished!. There are so many things you can try with your sheet object. I suggest you to try those. You will get surprised.

Working With Charts Using Spire XLS Sheet Object

Working With Charts Using Spire XLS Sheet Object

If you want you can set different chart types too, it will give you a great design in your chart. The most useful chart types which I uses is Bar3DClustered, 3DBubble, Bubble, Column3D and many more.

Working_With_Charts_Using_Spire_XLS_Chart_Object

This product gives you many ways to make your chart in the way you like. There are plenty of options available to so so like you can set the Legend Position by using LegendPositionType property.

Next we will see how we can implement Column chart, what ever we have discusses will be same for every charts, but it may have some different properties which is strictly depends on the chart type.

Column Chart

Now we will create an another button and name it Column Chart. And in the button click you need to add the following codes.

C# Code

[csharp]
private void button2_Click(object sender, EventArgs e)
{
try
{
//Load Workbook
Workbook workbook = new Workbook();
workbook.LoadFromFile(@"D:\Sample.xlsx");
Worksheet sheet = workbook.Worksheets[0];
//Add Chart and Set Chart Data Range
Chart chart = sheet.Charts.Add(ExcelChartType.ColumnClustered);
chart.DataRange = sheet.Range["D1:E17"];
chart.SeriesDataFromRange = false;
//Chart Position
chart.LeftColumn = 1;
chart.TopRow = 19;
chart.RightColumn = 8;
chart.BottomRow = 33;
//Chart Border
chart.ChartArea.Border.Weight = ChartLineWeightType.Medium;
chart.ChartArea.Border.Color = Color.SandyBrown;
//Chart Title
chart.ChartTitle = "Parts Sales Info";
chart.ChartTitleArea.Font.FontName = "Calibri";
chart.ChartTitleArea.Font.Size = 13;
chart.ChartTitleArea.Font.IsBold = true;
//Chart Axes
chart.PrimaryCategoryAxis.Title = "Parts";
chart.PrimaryCategoryAxis.Font.Color = Color.Blue;
chart.PrimaryValueAxis.Title = "Amounts";
chart.PrimaryValueAxis.HasMajorGridLines = false;
chart.PrimaryValueAxis.MaxValue = 350;
chart.PrimaryValueAxis.TitleArea.TextRotationAngle = 90;
//Chart Legend
chart.Legend.Position = LegendPositionType.Right;
//Save and Launch
workbook.SaveToFile("ExcelColumnChart.xlsx", ExcelVersion.Version2010);
System.Diagnostics.Process.Start("ExcelColumnChart.xlsx");

}
catch (Exception)
{

throw;
}
}
[/csharp]

VB.NET Code

[vb]
‘Load Workbook
Dim workbook As New Workbook()
workbook.LoadFromFile("E:\Sample.xlsx")
Dim sheet As Worksheet = workbook.Worksheets(0)
‘Add Chart and Set Chart Data Range
Dim chart As Chart = sheet.Charts.Add(ExcelChartType.ColumnClustered)
chart.DataRange = sheet.Range("D1:E17")
chart.SeriesDataFromRange = False
‘Chart Position
chart.LeftColumn = 1
chart.TopRow = 19
chart.RightColumn = 8
chart.BottomRow = 33
‘Chart Border
chart.ChartArea.Border.Weight = ChartLineWeightType.Medium
chart.ChartArea.Border.Color = Color.SandyBrown
‘Chart Title
chart.ChartTitle = "Parts Sales Info"
chart.ChartTitleArea.Font.FontName = "Calibri"
chart.ChartTitleArea.Font.Size = 13
chart.ChartTitleArea.Font.IsBold = True
‘Chart Axes
chart.PrimaryCategoryAxis.Title = "Parts"
chart.PrimaryCategoryAxis.Font.Color = Color.Blue
chart.PrimaryValueAxis.Title = "Amounts"
chart.PrimaryValueAxis.HasMajorGridLines = False
chart.PrimaryValueAxis.MaxValue = 350
chart.PrimaryValueAxis.TitleArea.TextRotationAngle = 90
‘Chart Legend
chart.Legend.Position = LegendPositionType.Right
‘Save and Launch
workbook.SaveToFile("ExcelColumnChart.xlsx", ExcelVersion.Version2010)
System.Diagnostics.Process.Start("ExcelColumnChart.xlsx")

[/vb]

Now if you run the code, you can see an output as follows.

Excel Bar Chart

Before going through you must add an new namespace as follows.

[csharp]
using Spire.Xls.Charts;
[/csharp]
Now we will create an another button in our form and in the click event we will write the receding lines of codes.

[csharp]
private void button1_Click(object sender, EventArgs e)
{
try
{
Workbook workbook = new Workbook();
//Initailize worksheet
workbook.CreateEmptySheets(1);
Worksheet sheet = workbook.Worksheets[0];
sheet.Name = "Chart data";
sheet.GridLinesVisible = false;
//Writes chart data
CreateChartData(sheet);
//Add a new chart worsheet to workbook
Chart chart = sheet.Charts.Add();
//Set region of chart data
chart.DataRange = sheet.Range["A1:C5"];
chart.SeriesDataFromRange = false;
//Set position of chart
chart.LeftColumn = 1;
chart.TopRow = 6;
chart.RightColumn = 11;
chart.BottomRow = 29;
chart.ChartType = ExcelChartType.Bar3DClustered;
//Chart title
chart.ChartTitle = "Sales market by country";
chart.ChartTitleArea.IsBold = true;
chart.ChartTitleArea.Size = 12;
chart.PrimaryCategoryAxis.Title = "Country";
chart.PrimaryCategoryAxis.Font.IsBold = true;
chart.PrimaryCategoryAxis.TitleArea.IsBold = true;
chart.PrimaryCategoryAxis.TitleArea.TextRotationAngle = 90;
chart.PrimaryValueAxis.Title = "Sales(in Dollars)";
chart.PrimaryValueAxis.HasMajorGridLines = false;
chart.PrimaryValueAxis.MinValue = 1000;
chart.PrimaryValueAxis.TitleArea.IsBold = true;
foreach (ChartSerie cs in chart.Series)
{
cs.Format.Options.IsVaryColor = true;
cs.DataPoints.DefaultDataPoint.DataLabels.HasValue = true;
}
chart.Legend.Position = LegendPositionType.Top;
workbook.SaveToFile("Sample.xls");
ExcelDocViewer(workbook.FileName);

}
catch (Exception)
{
throw;
}
}
[/csharp]

As you can see we are calling a function CreateChartData to generate the data, so now we will write the function body.

[csharp]
private void CreateChartData(Worksheet sheet)
{
//Country
sheet.Range["A1"].Value = "Country";
sheet.Range["A2"].Value = "Cuba";
sheet.Range["A3"].Value = "Mexico";
sheet.Range["A4"].Value = "France";
sheet.Range["A5"].Value = "German";
//Jun
sheet.Range["B1"].Value = "Jun";
sheet.Range["B2"].NumberValue = 6000;
sheet.Range["B3"].NumberValue = 8000;
sheet.Range["B4"].NumberValue = 9000;
sheet.Range["B5"].NumberValue = 8500;
//Jun
sheet.Range["C1"].Value = "Aug";
sheet.Range["C2"].NumberValue = 3000;
sheet.Range["C3"].NumberValue = 2000;
sheet.Range["C4"].NumberValue = 2300;
sheet.Range["C5"].NumberValue = 4200;
//Style
sheet.Range["A1:C1"].Style.Font.IsBold = true;
sheet.Range["A2:C2"].Style.KnownColor = ExcelColors.LightYellow;
sheet.Range["A3:C3"].Style.KnownColor = ExcelColors.LightGreen1;
sheet.Range["A4:C4"].Style.KnownColor = ExcelColors.LightOrange;
sheet.Range["A5:C5"].Style.KnownColor = ExcelColors.LightTurquoise;
//Border
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeTop].Color = Color.FromArgb(0, 0, 128);
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeTop].LineStyle = LineStyleType.Thin;
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeBottom].Color = Color.FromArgb(0, 0, 128);
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeBottom].LineStyle = LineStyleType.Thin;
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeLeft].Color = Color.FromArgb(0, 0, 128);
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeLeft].LineStyle = LineStyleType.Thin;
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeRight].Color = Color.FromArgb(0, 0, 128);
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeRight].LineStyle = LineStyleType.Thin;
sheet.Range["B2:C5"].Style.NumberFormat = "\"$\"#,##0";
}
[/csharp]

And we will use the preceding function for viewing our chart created.

[csharp]
private void ExcelDocViewer(string fileName)
{
try
{
System.Diagnostics.Process.Start(fileName);
}
catch { }
}
[/csharp]

Now it is time to run our program. You will see the output as follows.

Excel Bar Chart

Excel Bar Chart

As you can see it is very easy to give styles and border to our chart.

[csharp]
//Style
sheet.Range["A1:C1"].Style.Font.IsBold = true;
sheet.Range["A2:C2"].Style.KnownColor = ExcelColors.LightYellow;
sheet.Range["A3:C3"].Style.KnownColor = ExcelColors.LightGreen1;
sheet.Range["A4:C4"].Style.KnownColor = ExcelColors.LightOrange;
sheet.Range["A5:C5"].Style.KnownColor = ExcelColors.LightTurquoise;
//Border
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeTop].Color = Color.FromArgb(0, 0, 128);
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeTop].LineStyle = LineStyleType.Thin;
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeBottom].Color = Color.FromArgb(0, 0, 128);
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeBottom].LineStyle = LineStyleType.Thin;
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeLeft].Color = Color.FromArgb(0, 0, 128);
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeLeft].LineStyle = LineStyleType.Thin;
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeRight].Color = Color.FromArgb(0, 0, 128);
sheet.Range["A1:C5"].Style.Borders[BordersLineType.EdgeRight].LineStyle = LineStyleType.Thin;
sheet.Range["B2:C5"].Style.NumberFormat = "\"$\"#,##0";
[/csharp]

Like this we can crate Line Chart, Radar Chart and many more. Please try those too. Now we will see How to Save Excel Charts as Images.

How to Save Excel Charts as Images

Create another button and write the preceding codes in button click.

[csharp]
private void button2_Click(object sender, EventArgs e)
{
Workbook workbook = new Workbook();
workbook.LoadFromFile("D:\\Sample.xlsx", ExcelVersion.Version2010);
Worksheet sheet = workbook.Worksheets[0];
Image[] imgs = workbook.SaveChartAsImage(sheet);
for (int i = 0; i < imgs.Length; i++)
{
imgs[i].Save(string.Format("img-{0}.png", i), System.Drawing.Imaging.ImageFormat.Png);
}

}
[/csharp]

Here we are taking a file called Sample.xlsx and loop through the charts inside the file and save those as images with few lines codes. Sounds good right?

VB.Net Code
[vb]
Dim workbook As New Workbook()
workbook.LoadFromFile("D:\\Sample.xlsx", ExcelVersion.Version2010)
Dim sheet As Worksheet = workbook.Worksheets(0)
Dim imgs As Image() = workbook.SaveChartAsImage(sheet)
For i As Integer = 0 To imgs.Length – 1
imgs(i).Save(String.Format("img-{0}.png", i), ImageFormat.Png)
Next
[/vb]

Conclusion

I hope you liked this article. Please share me your valuable suggestions and feedback.

Kindest Regards
Sibeesh Venu

• 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 HTML5: Part 4 (Doughnut Chart)

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

Included JavaScript file

Call the Chart Function

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.

Properties

• value
• color
• highlight
• label

Here you can change the properties as you want.

Complete HTML

Conclusion

I hope you can now create your own chart.

Output

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

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

Included JavaScript file

Call the Chart Function

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.

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

Complete HTML

Conclusion

I hope you have created your own chart.

Output

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

Included JavaScript file

Call the Chart Function

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.

Properties

• value
• color
• highlight
• label

Here you can change the properties as you want.

Complete HTML

Conclusion

I hope you can now create your own chart.

Output

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]
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/highcharts.js"></script>
<script src="Scripts/highcharts-more.js"></script>
<script src="Scripts/draggable-legend.js"></script>
[/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]
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Legend X: <input id="txtLegendX" type="number" /> <br />
Legend X: <input id="txtLegendY" type="number" />
[/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]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dragable Legend – sibeeshpassion</title>
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/highcharts.js"></script>
<script src="Scripts/highcharts-more.js"></script>
<script src="Scripts/draggable-legend.js"></script>
<script>
$(function () {
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
}
};
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);

});
</script>
</head>
<body>
Dragable Legend – sibeeshpassion
<br />
<br />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Legend X: <input id="txtLegendX" type="number" /> <br />
Legend X: <input id="txtLegendY" type="number" />
</body>
</html>
[/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.

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

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

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]
<script src=“http://code.highcharts.com/highcharts.js”></script>
<script src=“http://code.highcharts.com/modules/heatmap.js”></script>
<script src=“http://code.highcharts.com/modules/exporting.js”></script>
[/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]
<div id=“container” style=“height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto”></div>
[/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 ‘<b>’
this.series.xAxis.categories[this.point.x]
‘</b> sold <br><b>’
this.point.value ‘</b> items on <br><b>’
this.series.yAxis.categories[this.point.y]
‘</b>’;
}
},
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:

Output

Points of Interest

jQuery, CSS, HTML and HighChart.

History

1st Version: 08-May-2015

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.

Combo chart configuration

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

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

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 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]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Pie Chart widget with custom tooltip Using Chart.js</title>
</head>
<body></body>
</html>
[/html]

Included JavaScript file

[html]
<script src="Chart.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
[/html]

Include UI Elements

[html]
<div id="canvas-holder">
<canvas id="chart-area1" width="50" height="50" />
</div>
<div id="canvas-holder">
<canvas id="chart-area2" width="300" height="300" />
</div>
<div id="chartjs-tooltip"></div>
[/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

Here you can change the properties as you want.

Now add the following style.

[css]
<style>
#canvas-holder {
width: 100%;
margin-top: 50px;
text-align: center;
}

#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

#chartjs-tooltip.below {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

#chartjs-tooltip.below:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 0 8px 8px 8px;
bottom: 1em;
content: "";
display: block;
left: 50%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}

#chartjs-tooltip.above {
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}

#chartjs-tooltip.above:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 8px 8px 0 8px;
bottom: 1em;
content: "";
display: block;
left: 50%;
top: 100%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
</style>
[/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]
<!doctype html>
<html>
<head>
<title>Pie Chart with Custom Tooltips</title>
<script src="Chart.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#canvas-holder {
width: 100%;
margin-top: 50px;
text-align: center;
}

#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

#chartjs-tooltip.below {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

#chartjs-tooltip.below:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 0 8px 8px 8px;
bottom: 1em;
content: "";
display: block;
left: 50%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}

#chartjs-tooltip.above {
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}

#chartjs-tooltip.above:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 8px 8px 0 8px;
bottom: 1em;
content: "";
display: block;
left: 50%;
top: 100%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
</style>
</head>
<body>
Pie Chart With Custom Tooltip @ <a href="www.sibeeshpassion.com">www.sibeeshpassion.com</a>
<div id="canvas-holder">
<canvas id="chart-area1" width="50" height="50" />
</div>
<div id="canvas-holder">
<canvas id="chart-area2" width="300" height="300" />
</div>
<div id="chartjs-tooltip"></div>

<script>
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,
});
};

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

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);
};
</script>
</body>
</html>
[/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 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)

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]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Line Chart widget with custom tooltip Using Chart.js</title>
</head>
<body></body>
</html>
[/html]

Included JavaScript file

[html]
<script src="Chart.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
[/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

Here you can change the properties as you want. Now add the following style for our tooltip:
[css]
<style>
#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

.chartjs-tooltip-key {
display: inline-block;
width: 10px;
height: 10px;
}
</style>
[/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 += [
‘<div class="chartjs-tooltip-section">’,
‘ <span class="chartjs-tooltip-key" style="background-color:’ + tooltip.legendColors[i].fill + ‘"></span>’,
‘ <span class="chartjs-tooltip-value">’ + ‘My Custom Tooltip : ‘+ tooltip.labels[i] + ‘</span>’,
‘</div>’
].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]
<!doctype html>
<html>
<head>
<title>Line Chart with Custom Tooltips</title>
<script src="Chart.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#canvas-holder1 {
width: 300px;
margin: 20px auto;
}

#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

.chartjs-tooltip-key {
display: inline-block;
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<div>
Line Chart With Custom Tooltip @ <a href="www.sibeeshpassion.com">www.sibeeshpassion.com</a>
<canvas id="myChart"></canvas>
</div>
<div id="chartjs-tooltip"></div>

<script>

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 += [
‘<div class="chartjs-tooltip-section">’,
‘ <span class="chartjs-tooltip-key" style="background-color:’ + tooltip.legendColors[i].fill + ‘"></span>’,
‘ <span class="chartjs-tooltip-value">’ + ‘My Custom Tooltip : ‘+ tooltip.labels[i] + ‘</span>’,
‘</div>’
].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,
});
};
var randomScalingFactor = function () {
return Math.round(Math.random() * 100);
};
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()]
}]
};

window.onload = function () {
var ctx1 = document.getElementById("myChart").getContext("2d");
window.myLine = new Chart(ctx1).Line(lineChartData, {
showScale: false,
pointDot: true,
responsive: true
});
};
</script>
</body>
</html>
[/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?

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 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 HTML5: Part 4 (Doughnut Chart)
• Client-Side Chart Widget in HTML5: Part 5 (Polar Area Chart)

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

Included JavaScript file

Call the Chart Function

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.

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

Conclusion

I hope you can now create your own chart.

Output