Demo

Please see the demo here.

Background

For the past few months, I am working with a project where I use HighChart to manipulate the data and shows as Charts. Now the problem is, while exporting the data, the entire data was going to the HighChart server that is http://export.highcharts.com/. I wanted to get rid of this. So I used the option client side exporting by adding one extra JavaScript file https://code.highcharts.com/modules/offline-exporting.js.

Using the code

First we will populate the chart. For that you must add the needed references as follows.

[html]
<script src="https://code.jquery.com/jquery-2.2.4.min.js""></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
[/html]

Now add the chart configuration as follows

[js]
$(function () {
$(‘#myChart’).highcharts({
credits: {
enabled: false
},
exporting: {
chartOptions: {
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
scale: 3
},
title: {
text: ‘My blog vistor count for a week’
},
subtitle: {
text: ‘Monday to Sunday’
},
chart: {
type: ‘area’
},
xAxis: {
categories: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’,
‘Sun’]
},
series: [{
name:’Visitor Count’,
data: [1005, 558, 1467, 707, 1289, 867, 543]
}]
});
});
[/js]

Now if you run your application, you can see a chart as follows.

High Chart

Now it is time to check the exporting. If you click on export icon on the right top corner, you will given options to choose like on which format you need to export the data. Just click on anything you wish. You can see that the data is being send to the server http://export.highcharts.com/ in the top left side. To overcome this, you need to add a reference of the file called offline-exporting.js.

[html]
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
[/html]

That’s all. You are done.

Please be noted this feature is not supported in browser IE 8, So if you load this chart in any unsupported browser, the module will fall back to the export server. This can be handled with the option fallbackToExportServer: false. You need to set this option in your exporting settings as follows.

[js]
exporting: {
chartOptions: {
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
scale: 3,
fallbackToExportServer: false
}
[/js]

In Internet Explorer, it requires canvg library to export the chart to PNG format. But you don’t need to worry about this file. This will be automatically downloaded on demand by the system.

Reference

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

Now we will go and create our application. I hope you will like this.

Download the source code

You can always download the source code here.

Background

I am working now in a personal dashboard application in which I uses HighChart products for the chart integration. We can always load the chart widgets with server side data and Angular JS right? Here we will discuss that. We are going to create the preceding charts for our dashboard.

Once we are done, this is how our applications output will be.

Chart Widgets With Server Side Data In MVC Using Angular JS And Web API Output

Create a MVC application

Click File-> New-> Project then select MVC application. From the following pop up we will select the template as empty and select the core references and folders for MVC.

MVC Project With Empty Template

Once you click OK, a project with MVC like folder structure with core references will be created for you.

Folder Structure And References For Empty MVC Project

Before going to start the coding part, make sure that all the required extensions/references are installed. Below are the required things to start with.

You can all the items mentioned above from NuGet. Right click on your project name and select Manage NuGet packages.

Manage NuGet Package Window

Once you have installed those items, please make sure that all the items(jQuery, Angular JS files) are loaded in your scripts folder.

Using the code

As I have said before, we are going to use Angular JS for our client side operations, so it is better to create the Angular JS script files first right? Just to make sure that we have got all the required things :). For that, create a folder named Widget in script folder and right click -> Add -> New Item -> Select AngularJS Module and enter the module name -> Click Add.

Creating Angular JS Modue In MVC Application

Follow the same procedure to create Angular JS factory and Angular JS controller. Yes, we have set everything to get started our coding. Now we will create a Web API controller and get the data from database in JSON format. Let’s start then.

Create Web API Controller

To create a Web API controller, just right click on your controller folder and click Add -> Controller -> Select Web API controller – Empty ( We will create our own actions later) -> Name the controller (Here I am giving the controller name as Widget).

So our controller is ready, now we need to set up our database so that we can create Entity Model for our application later.

Create a database

The following query can be used to create a database in your SQL Server.

[sql]
USE [master]
GO

/****** Object: Database [TrialsDB] Script Date: 16-Mar-16 4:08:15 PM ******/
CREATE DATABASE [TrialsDB]
CONTAINMENT = NONE
ON PRIMARY
( NAME = N’TrialsDB’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB.mdf’ , SIZE = 3072KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
LOG ON
( NAME = N’TrialsDB_log’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB_log.ldf’ , SIZE = 1024KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO

ALTER DATABASE [TrialsDB] SET COMPATIBILITY_LEVEL = 110
GO

IF (1 = FULLTEXTSERVICEPROPERTY(‘IsFullTextInstalled’))
begin
EXEC [TrialsDB].[dbo].[sp_fulltext_database] @action = ‘enable’
end
GO

ALTER DATABASE [TrialsDB] SET ANSI_NULL_DEFAULT OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_NULLS OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_PADDING OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_WARNINGS OFF
GO

ALTER DATABASE [TrialsDB] SET ARITHABORT OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_CLOSE OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_CREATE_STATISTICS ON
GO

ALTER DATABASE [TrialsDB] SET AUTO_SHRINK OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS ON
GO

ALTER DATABASE [TrialsDB] SET CURSOR_CLOSE_ON_COMMIT OFF
GO

ALTER DATABASE [TrialsDB] SET CURSOR_DEFAULT GLOBAL
GO

ALTER DATABASE [TrialsDB] SET CONCAT_NULL_YIELDS_NULL OFF
GO

ALTER DATABASE [TrialsDB] SET NUMERIC_ROUNDABORT OFF
GO

ALTER DATABASE [TrialsDB] SET QUOTED_IDENTIFIER OFF
GO

ALTER DATABASE [TrialsDB] SET RECURSIVE_TRIGGERS OFF
GO

ALTER DATABASE [TrialsDB] SET DISABLE_BROKER
GO

ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO

ALTER DATABASE [TrialsDB] SET DATE_CORRELATION_OPTIMIZATION OFF
GO

ALTER DATABASE [TrialsDB] SET TRUSTWORTHY OFF
GO

ALTER DATABASE [TrialsDB] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO

ALTER DATABASE [TrialsDB] SET PARAMETERIZATION SIMPLE
GO

ALTER DATABASE [TrialsDB] SET READ_COMMITTED_SNAPSHOT OFF
GO

ALTER DATABASE [TrialsDB] SET HONOR_BROKER_PRIORITY OFF
GO

ALTER DATABASE [TrialsDB] SET RECOVERY FULL
GO

ALTER DATABASE [TrialsDB] SET MULTI_USER
GO

ALTER DATABASE [TrialsDB] SET PAGE_VERIFY CHECKSUM
GO

ALTER DATABASE [TrialsDB] SET DB_CHAINING OFF
GO

ALTER DATABASE [TrialsDB] SET FILESTREAM( NON_TRANSACTED_ACCESS = OFF )
GO

ALTER DATABASE [TrialsDB] SET TARGET_RECOVERY_TIME = 0 SECONDS
GO

ALTER DATABASE [TrialsDB] SET READ_WRITE
GO
[/sql]

Now we will create the tables we needed. As of now I am going to create two tables.

These tables are having relationship by the key ProductID.

Create tables in database

Below is the query to create SalesOrderDetail table in database.

[sql]
USE [TrialsDB]
GO

/****** Object: Table [dbo].[SalesOrderDetail] Script Date: 16-Mar-16 4:10:22 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[SalesOrderDetail](
[SalesOrderID] [int] NOT NULL,
[SalesOrderDetailID] [int] IDENTITY(1,1) NOT NULL,
[CarrierTrackingNumber] [nvarchar](25) NULL,
[OrderQty] [smallint] NOT NULL,
[ProductID] [int] NOT NULL,
[SpecialOfferID] [int] NOT NULL,
[UnitPrice] [money] NOT NULL,
[UnitPriceDiscount] [money] NOT NULL,
[LineTotal] AS (isnull(([UnitPrice]*((1.0)-[UnitPriceDiscount]))*[OrderQty],(0.0))),
[rowguid] [uniqueidentifier] ROWGUIDCOL NOT NULL,
[ModifiedDate] [datetime] NOT NULL,
CONSTRAINT [PK_SalesOrderDetail_SalesOrderID_SalesOrderDetailID] PRIMARY KEY CLUSTERED
(
[SalesOrderID] ASC,
[SalesOrderDetailID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
[/sql]

Now we will create the table Product.

[sql]
USE [TrialsDB]
GO

/****** Object: Table [dbo].[Product] Script Date: 16-Mar-16 4:11:29 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Product](
[ProductID] [int] NOT NULL,
[Name] [nvarchar](max) NOT NULL,
[ProductNumber] [nvarchar](25) NOT NULL,
[MakeFlag] [bit] NOT NULL,
[FinishedGoodsFlag] [bit] NOT NULL,
[Color] [nvarchar](15) NULL,
[SafetyStockLevel] [smallint] NOT NULL,
[ReorderPoint] [smallint] NOT NULL,
[StandardCost] [money] NOT NULL,
[ListPrice] [money] NOT NULL,
[Size] [nvarchar](5) NULL,
[SizeUnitMeasureCode] [nchar](3) NULL,
[WeightUnitMeasureCode] [nchar](3) NULL,
[Weight] [decimal](8, 2) NULL,
[DaysToManufacture] [int] NOT NULL,
[ProductLine] [nchar](2) NULL,
[Class] [nchar](2) NULL,
[Style] [nchar](2) NULL,
[ProductSubcategoryID] [int] NULL,
[ProductModelID] [int] NULL,
[SellStartDate] [datetime] NOT NULL,
[SellEndDate] [datetime] NULL,
[DiscontinuedDate] [datetime] NULL,
[rowguid] [uniqueidentifier] ROWGUIDCOL NOT NULL,
[ModifiedDate] [datetime] NOT NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO
[/sql]

Can we insert some data to the tables now?

Insert data to table

You can use the below query to insert the data to SalesOrderDetail.

[sql]
USE [TrialsDB]
GO

INSERT INTO [dbo].[SalesOrderDetail]
([SalesOrderID]
,[CarrierTrackingNumber]
,[OrderQty]
,[ProductID]
,[SpecialOfferID]
,[UnitPrice]
,[UnitPriceDiscount]
,[rowguid]
,[ModifiedDate])
VALUES
(<SalesOrderID, int,>
,<CarrierTrackingNumber, nvarchar(25),>
,<OrderQty, smallint,>
,<ProductID, int,>
,<SpecialOfferID, int,>
,<UnitPrice, money,>
,<UnitPriceDiscount, money,>
,<rowguid, uniqueidentifier,>
,<ModifiedDate, datetime,>)
GO
[/sql]

and the following query can be used for the table Product

[sql]
USE [TrialsDB]
GO

INSERT INTO [dbo].[Product]
([ProductID]
,[Name]
,[ProductNumber]
,[MakeFlag]
,[FinishedGoodsFlag]
,[Color]
,[SafetyStockLevel]
,[ReorderPoint]
,[StandardCost]
,[ListPrice]
,[Size]
,[SizeUnitMeasureCode]
,[WeightUnitMeasureCode]
,[Weight]
,[DaysToManufacture]
,[ProductLine]
,[Class]
,[Style]
,[ProductSubcategoryID]
,[ProductModelID]
,[SellStartDate]
,[SellEndDate]
,[DiscontinuedDate]
,[rowguid]
,[ModifiedDate])
VALUES
(<ProductID, int,>
,<Name, nvarchar(max),>
,<ProductNumber, nvarchar(25),>
,<MakeFlag, bit,>
,<FinishedGoodsFlag, bit,>
,<Color, nvarchar(15),>
,<SafetyStockLevel, smallint,>
,<ReorderPoint, smallint,>
,<StandardCost, money,>
,<ListPrice, money,>
,<Size, nvarchar(5),>
,<SizeUnitMeasureCode, nchar(3),>
,<WeightUnitMeasureCode, nchar(3),>
,<Weight, decimal(8,2),>
,<DaysToManufacture, int,>
,<ProductLine, nchar(2),>
,<Class, nchar(2),>
,<Style, nchar(2),>
,<ProductSubcategoryID, int,>
,<ProductModelID, int,>
,<SellStartDate, datetime,>
,<SellEndDate, datetime,>
,<DiscontinuedDate, datetime,>
,<rowguid, uniqueidentifier,>
,<ModifiedDate, datetime,>)
GO
[/sql]

So let us say, we have inserted the data as follows. If you feel bored of inserting data manually, you can always tun the SQL script file attached which has the insertion queries. Just run that, you will be all OK. If you don’t know how to generate SQL scripts with data, I strongly recommend you to have a read here

Next thing we are going to do is creating a ADO.NET Entity Data Model.

Create Entity Data Model

Right click on your model folder and click new, select ADO.NET Entity Data Model. Follow the steps given. Once you have done the processes, you can see the edmx file and other files in your model folder. Here I gave Dashboard for our Entity data model name. Now you can see a file with edmx extension have been created. If you open that file, you can see as below.

Entity Data Model

Now go back our Web API controller. Please change the code as below.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MyDashboard.Models;
using Newtonsoft.Json;
namespace MyDashboard.Controllers
{
public class WidgetController : ApiController
{
public DashboardEntities de = new DashboardEntities();
Retriever ret = new Retriever();
public string getWidgetData()
{
var dataList = ret.GetWidgetData(de);
return dataList;
}
}
}
[/csharp]

Here we have created a new model class Retriever and we have added a method GetWidgetData in that class. Now let us see what I have coded in that.

[csharp]
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MyDashboard.Models
{
public class Retriever
{
public string GetWidgetData(DashboardEntities de)
{
try
{
using (de)
{
var resList = (from sales in de.SalesOrderDetails
join prod in de.Products
on sales.ProductID equals prod.ProductID
select new
{
ProductName = prod.Name,
QuantityOrdered = sales.OrderQty
});
var res = resList.GroupBy(d => d.ProductName).Select(g => new
{
name = g.FirstOrDefault().ProductName,
y = g.Sum(s => s.QuantityOrdered)
});
return JsonConvert.SerializeObject(res, Formatting.None, new JsonSerializerSettings()
{
ReferenceLoopHandling = ReferenceLoopHandling.Ignore
});
}
}
catch (Exception)
{
throw new NotImplementedException();
}

}
}
}
[/csharp]

Here we are using LINQ to fetch the data, We uses JOIN in the query to find the Name from the table Products. Once the data is ready, we are just do group by the column ProductName and sum of QuantityOrdered.

[csharp]
var res = resList.GroupBy(d => d.ProductName).Select(g => new
{
name = g.FirstOrDefault().ProductName,
y = g.Sum(s => s.QuantityOrdered)
});
[/csharp]

So the coding part to fetch the data from database is read, now we need to check whether our Web API is ready for action!. To check that, you just need to run the URL http://localhost:1646/Api/Widget. Here Widget is our Web API controller name. I hope you get the data as a result. If you are getting the error Server Error in ‘/’ Application The resource cannot be found, you need to configure your Web API in Global.asax.cs. You got this error just because you created an Empty project with only needed references. So here we need to do his step by our own. No worries, we will do it now. Just change the Global.asax.cs as follows.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Routing;

namespace MyDashboard
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);//This is for setting the configuration
RouteConfig.RegisterRoutes(RouteTable.Routes);
}
}
}
[/csharp]

Now build your application and run the same URL again, you will get the output as follows.

Web API Output

Now we will go back to our angular JS files and consume this Web API. You need to change the scripts in the app.js, controller.js, factory.js as follows.

app.js

[js]
(function () {
‘use strict’;
angular.module(‘WidgetsApp’, []);
})();
[/js]

controller.js

[js]
(function () {
‘use strict’;
angular
.module(‘WidgetsApp’)
.controller(‘WidgetsController’, function ($scope, factory) {
var res = factory.getData();
var options;
if (res != undefined) {
res.then(function (d) {
var data = JSON.parse(d.data);

}, function (error) {
console.log(‘Oops! Something went wrong while fetching the data.’);
});
}
});
})();

[/js]

Once our service is called, we will get the data in return. We will parse the same and store it in a variable for future use.

[js]
var data = JSON.parse(d.data);
[/js]

factory.js

[js]
(function () {
‘use strict’;
angular
.module(‘WidgetsApp’)
.service(‘factory’, function ($http) {
this.getData = function () {
var url = ‘Api/Widget’;
return $http({
type: ‘get’,
url: url
});
}
});
})();
[/js]

AS you can see we are just calling our Web API Api/Widget with the help of Angular $http.

Now we a view to show our data right? Yes, we need a controller too!.

Create a MVC controller

To create a controller, we need to right click on the controller folder, Add – Controller. I hope you will be given a controller as follows.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyDashboard.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
[/csharp]

Here Home is our controller name.

Now we need a view right?

Creating a view

To create a view, just right click on your controller name -> Add View -> Add.

Creating a view

Now in your view add the needed references.

[html]
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/jquery-ui-1.11.4.min.js"></script>
<script src="~/scripts/angular.min.js"></script>
<script src="~/scripts/angular-aria.js"></script>
<script src="~/scripts/angular-route.js"></script>
<script src="~/scripts/Widgets/app.js"></script>
<script src="~/scripts/Widgets/controller.js"></script>
<script src="~/scripts/Widgets/factory.js"></script>
[/html]

Once we add the references, we can call our Angular JS controller as follows.

[html]
<div ng-app="WidgetsApp">
<div ng-controller="WidgetsController">
</div>
</div>
[/html]

Now if you run your application, you can see our Web API call works fine and successfully get the data. Next thing we need to do is creating charts with the data we get.

Create chart widgets with the data

As I said, we are going to to create HighChart chart widgets, we need to add a reference to use that plug in.

[html]
<script src="https://code.highcharts.com/highcharts.js"></script>
[/html]

Now create elements where we can load our chart.

[html]
<div ng-app="WidgetsApp">
<div ng-controller="WidgetsController">
<div id="widgetPie" class="widget">Placeholder for chart</div>
<div id="widgetspline" class="widget">Placeholder for chart</div>
<div id="widgetBar" class="widget">Placeholder for chart</div>
<div id="widgetLine" class="widget">Placeholder for chart</div>
<div id="widgetScatter" class="widget">Placeholder for chart</div>
<div id="widgetColumn" class="widget">Placeholder for chart</div>
</div>
</div>
[/html]

You can style your elements as follows if you want, but this is optional.

[css]
<style>
.widget {
width: 30%;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
border-radius: 3px;
transition: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
cursor: move;
display: inline-block;
float:left;
}
</style>
[/css]

Go back to our Angular JS controller and add the below codes right after we get the data from server.

Pie Chart

[js]
var data = JSON.parse(d.data);
var categories = [];
for (var i = 0; i < data.length; i++) {
categories.push(data[i].name)
}
options = new Highcharts.chart(‘widgetPie’, {
credits: {
enabled: false
},
chart: {
type: ‘pie’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Pie Chart’
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: ‘pointer’,
dataLabels: {
enabled: false,
format: ‘<b>{point.name}</b>: {point.y:,.0f}’
}
}
},
series: [{
name:’Quantity’,
data: data
}]
});
[/js]

Now run your application, you can see a pie chart with the data given.

Pie Chart In MVC With Angular JS And Web API

Column Chart

[js]
options = new Highcharts.chart(‘widgetColumn’, {
credits: {
enabled: false
},
chart: {
type: ‘column’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Column Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
[/js]

Now run your application, you can see a column chart with the data given.

Column Chart In MVC With Angular JS And Web API

Bar Chart

[js]
options = new Highcharts.chart(‘widgetBar’, {
credits: {
enabled: false
},
chart: {
type: ‘bar’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Bar Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
[/js]

Now run your application, you can see a Bar chart with the data given.

Bar Chart In MVC With Angular JS And Web API

Line Chart

[js]
options = new Highcharts.chart(‘widgetLine’, {
credits: {
enabled: false
},
chart: {
type: ‘line’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Line Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
[/js]

Now run your application, you can see a Line chart with the data given.

Line Chart In MVC With Angular JS And Web API

Spline Chart

[js]
options = new Highcharts.chart(‘widgetspline’, {
credits: {
enabled: false
},
chart: {
type: ‘spline’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Spline Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
[/js]

Now run your application, you can see a Spline chart with the data given.

Spline Chart In MVC With Angular JS And Web API

Scatter Chart

[js]
options = new Highcharts.chart(‘widgetScatter’, {
credits: {
enabled: false
},
chart: {
type: ‘scatter’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Scatter Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
[/js]

Now run your application, you can see a Scatter chart with the data given.

Scatter Chart In MVC With Angular JS And Web API

Now this is how complete code for our controller.js file looks like.

[js]
(function () {
‘use strict’;
angular
.module(‘WidgetsApp’)
.controller(‘WidgetsController’, function ($scope, factory) {
var res = factory.getData();
var options;
if (res != undefined) {
res.then(function (d) {
var data = JSON.parse(d.data);
var categories = [];
for (var i = 0; i < data.length; i++) {
categories.push(data[i].name)
}
options = new Highcharts.chart(‘widgetPie’, {
credits: {
enabled: false
},
chart: {
type: ‘pie’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Pie Chart’
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: ‘pointer’,
dataLabels: {
enabled: false,
format: ‘<b>{point.name}</b>: {point.y:,.0f}’
}
}
},
series: [{
name:’Quantity’,
data: data
}]
});
options = new Highcharts.chart(‘widgetColumn’, {
credits: {
enabled: false
},
chart: {
type: ‘column’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Column Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
options = new Highcharts.chart(‘widgetBar’, {
credits: {
enabled: false
},
chart: {
type: ‘bar’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Bar Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
options = new Highcharts.chart(‘widgetLine’, {
credits: {
enabled: false
},
chart: {
type: ‘line’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Line Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
options = new Highcharts.chart(‘widgetspline’, {
credits: {
enabled: false
},
chart: {
type: ‘spline’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Spline Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
options = new Highcharts.chart(‘widgetScatter’, {
credits: {
enabled: false
},
chart: {
type: ‘scatter’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Scatter Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
}, function (error) {
console.log(‘Oops! Something went wrong while fetching the data.’);
});
}
});
})();
[/js]

If you have configured all the chart types, we can see the output now 🙂

We have done everything!. That’s fantastic right? Have a happy coding.

Conclusion

Did I miss anything that you may think which is needed? Did you try Web API yet? Have you ever wanted to do this requirement? 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

[js]
labelFormatter: function () {
return this.name.toString().replace(‘ 00:00:00.000’, ”).replace(‘ 00:00:00.00’, ”).replace(‘ 00:00:00’, ”);
}
[/js]

Just add that function in your legend settings will do the remaining. Happy Coding!.

Please see my other posts code snippets here: Code Snippets

Kindest Regards
Sibeesh Venu

Background

I am working in a BI dashboard application, thus recently I got a requirement of giving an alert if user clicks on the chart point. Here I will explain the same with an example of high chart drill down type.

Please see the demo here: Custom Events in Drill Down Chart

Using the code

First of all we will create a page as follows.

[html]
<!DOCTYPE html>
<html>
<head>
<title>Fire Double Click Events In Highcharts</title>
</head>
<body>
Fire Double Click Events In Highcharts – Sibeesh Passion (<a href="http://sibeeshpassion.com">Sibeesh Passion </a>)
<br />
<br />
<br />
<div id="container" style="height: 300px"></div>
</body>
</html>

[/html]

Next we will add the needed references.

[js]
<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
<script src="http://sibeeshpassion.com/content/scripts/highcharts.js"></script>
<script src="http://sibeeshpassion.com/content/scripts/drilldown.js"></script>
<script src="http://blacklabel.github.io/custom_events/customEvents.js"></script>
[/js]

Here you can see we have added a file customEvents.js, please do not forget to add this file. This is much important.

The next step is to load the chart, We can create a chart as follows.

[js]
<script>
$(document).ready(function () {
// Internationalization
Highcharts.setOptions({
lang: {
drillUpText: ‘? Back to {series.name}’
}
});

var options = {
chart: {
height: 300,
events: {
}
},

title: {
text: ‘Highcharts Drilldown Plugin’
},

xAxis: {
categories: true
},

drilldown: {
series: [{
id: ‘fruits’,
name: ‘Fruits’,
data: [
[‘Apples’, 4],
[‘Pears’, 6],
[‘Oranges’, 2],
[‘Grapes’, 8]
]
}, {
id: ‘cars’,
name: ‘Cars’,
data: [{
name: ‘Toyota’,
y: 4,
drilldown: ‘toyota’
},
[‘Volkswagen’, 3],
[‘Opel’, 5]
]
}, {
id: ‘toyota’,
name: ‘Toyota’,
data: [
[‘RAV4’, 3],
[‘Corolla’, 1],
[‘Carina’, 4],
[‘Land Cruiser’, 5]
]
}]
},

legend: {
enabled: false
},
series: [{
name: ‘Overview’,
colorByPoint: true,
data: [{
name: ‘Fruits’,
y: 10,
drilldown: ‘fruits’
}, {
name: ‘Cars’,
y: 12,
drilldown: ‘cars’
}, {
name: ‘Countries’,
y: 8
}]
}]
};

// Drill Down Chart Implementation
options.chart.renderTo = ‘container’;
options.chart.type = ‘column’;
var chart1 = new Highcharts.Chart(options);

});
</script>
[/js]

Now if you run your page you can see a drill down chart as follows.

Fire Double Click Events In Highcharts

Now here is the main part, we need to add a plot option to the chart option so that we can track the events. Please add the preceding lines of code.

[js]
plotOptions: {
series: {
point: {
events: {
dblclick: function () {
setTimeout(function () {
alert(‘Double Click Is Not Permitted’);
}, 1000);
return false;
}
}
}
}
}
[/js]

We have created a custom double click event dblclick successfully. In this way you can create custom events in highchart wherever you want, like create click and double click event in axis and label and data labels so on…

That’s all, we did it. Now please find the complete code.

Complete Code

[html]
<!DOCTYPE html>
<html>
<head>
<title>Fire Double Click Events In Highcharts</title>
<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
<script src="http://sibeeshpassion.com/content/scripts/highcharts.js"></script>
<script src="http://sibeeshpassion.com/content/scripts/drilldown.js"></script>
<script src="http://blacklabel.github.io/custom_events/customEvents.js"></script>
<script>
$(document).ready(function () {
// Internationalization
Highcharts.setOptions({
lang: {
drillUpText: ‘? Back to {series.name}’
}
});

var options = {
chart: {
height: 300,
events: {
}
},

title: {
text: ‘Highcharts Drilldown Plugin’
},

xAxis: {
categories: true
},

drilldown: {
series: [{
id: ‘fruits’,
name: ‘Fruits’,
data: [
[‘Apples’, 4],
[‘Pears’, 6],
[‘Oranges’, 2],
[‘Grapes’, 8]
]
}, {
id: ‘cars’,
name: ‘Cars’,
data: [{
name: ‘Toyota’,
y: 4,
drilldown: ‘toyota’
},
[‘Volkswagen’, 3],
[‘Opel’, 5]
]
}, {
id: ‘toyota’,
name: ‘Toyota’,
data: [
[‘RAV4’, 3],
[‘Corolla’, 1],
[‘Carina’, 4],
[‘Land Cruiser’, 5]
]
}]
},

legend: {
enabled: false
},

plotOptions: {
series: {
point: {
events: {
dblclick: function () {
setTimeout(function () {
alert(‘Double Click Is Not Permitted’);
}, 1000);
return false;
}
}
}
}
},
series: [{
name: ‘Overview’,
colorByPoint: true,
data: [{
name: ‘Fruits’,
y: 10,
drilldown: ‘fruits’
}, {
name: ‘Cars’,
y: 12,
drilldown: ‘cars’
}, {
name: ‘Countries’,
y: 8
}]
}]
};

// Drill Down Chart Implementation
options.chart.renderTo = ‘container’;
options.chart.type = ‘column’;
var chart1 = new Highcharts.Chart(options);

});
</script>
</head>
<body>
Fire Double Click Events In Highcharts – Sibeesh Passion (<a href="http://sibeeshpassion.com">Sibeesh Passion </a>)
<br />
<br />
<br />
<div id="container" style="height: 300px"></div>
</body>
</html>

[/html]

Now if you run and double click on any series, you will get an output as follows.

Fire Double Click Events In Highcharts

Please see the JSFiddle link here: Fire Double Click Events In Highcharts

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted this requirement while you play with highchart? 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 am able to.

Kindest Regards
Sibeesh Venu

Background

For the past few weeks, I have been working with the High Chart. And I have got a chance to work with Drill Down chart in High Chart. After implement a drill down chart in my application successfully , I have got an another requirement of creating JSON dynamically according to the user’s drill down and drill up event action.

Practical Usage

Hereby I am going to share the practical usage of the dynamically crated JSON. We have used this approach in our application. The task was simple but tough though. We have implemented a zooming functionality for each chart we have created. So we placed a zoom button above the chart. When user clicks the zoom button, a dialogue box will be opened with the drill down chart with maximum width and height. The problem we faced is, when user drill the chart to some level and click the zoom button, we were unable to maintain the same drill level in the the chart which is loaded in the dialogue box. Since this functionality was not available in the HighChart itself, We thought to do this our own. For this, we needed the drill level information in which user clicked. So we maintained the information in the format of JSON. And we take the values from this JSON while the new dialogue opens,and apply this to the chart.

Demo

You can see the demo here: Generate JSON According To Drill Down Drill Up Events – Sibeesh Passion

Using the code

The first thing we need to do is to load the required files.

[js]
<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
<script src="http://sibeeshpassion.com/content/scripts/highcharts.js"></script>
<script src="http://sibeeshpassion.com/content/scripts/drilldown.js"></script>
[/js]

Now we need the data for the chart right?

[js]
data: [{
name: ‘Fruits’,
y: 10,
drilldown: ‘fruits’
}, {
name: ‘Cars’,
y: 12,
drilldown: ‘cars’
}, {
name: ‘Countries’,
y: 8
}]
[/js]

Since we are creating a drill down chart, we need to set the drill down data also for the chart.

[js]
drilldown: {
series: [{
id: ‘fruits’,
name: ‘Fruits’,
data: [
[‘Apples’, 4],
[‘Pears’, 6],
[‘Oranges’, 2],
[‘Grapes’, 8]
]
}, {
id: ‘cars’,
name: ‘Cars’,
data: [{
name: ‘Toyota’,
y: 4,
drilldown: ‘toyota’
},
[‘Volkswagen’, 3],
[‘Opel’, 5]
]
}, {
id: ‘toyota’,
name: ‘Toyota’,
data: [
[‘RAV4’, 3],
[‘Corolla’, 1],
[‘Carina’, 4],
[‘Land Cruiser’, 5]
]
}]
}
[/js]

So we have set the data, now we need to set the complete options for our chart, we will set this in a variable.

[js]
var options = {
chart: {
height: 300,
events: {
drilldown: function (e) {
},
drillup: function (e) {
}
}
},

title: {
text: ‘Highcharts Drilldown Plugin’
},

xAxis: {
categories: true
},

drilldown: {
series: [{
id: ‘fruits’,
name: ‘Fruits’,
data: [
[‘Apples’, 4],
[‘Pears’, 6],
[‘Oranges’, 2],
[‘Grapes’, 8]
]
}, {
id: ‘cars’,
name: ‘Cars’,
data: [{
name: ‘Toyota’,
y: 4,
drilldown: ‘toyota’
},
[‘Volkswagen’, 3],
[‘Opel’, 5]
]
}, {
id: ‘toyota’,
name: ‘Toyota’,
data: [
[‘RAV4’, 3],
[‘Corolla’, 1],
[‘Carina’, 4],
[‘Land Cruiser’, 5]
]
}]
},

legend: {
enabled: false
},

plotOptions: {
series: {
dataLabels: {
enabled: true
},
shadow: false
},
pie: {
size: ‘80%’
}
},

series: [{
name: ‘Overview’,
colorByPoint: true,
data: [{
name: ‘Fruits’,
y: 10,
drilldown: ‘fruits’
}, {
name: ‘Cars’,
y: 12,
drilldown: ‘cars’
}, {
name: ‘Countries’,
y: 8
}]
}]
};
[/js]

Everything is set now, what else we need then? Yes we need to assign this option to our chart!.

[js]
// Drill Down Chart Implementation
options.chart.renderTo = ‘container’;
options.chart.type = ‘column’;
var chart1 = new Highcharts.Chart(options);
[/js]

As you can see in the above code, we are rendering the chart to a div called container. So we need to create a dv right?

[html]
<body>
Generate JSON According To Drill Down Drill Up Events – Sibeesh Passion (<a href="http://sibeeshpassion.com">Sibeesh Passion </a>)
<br/>
<br/>
<br/>
<div id="container" style="height: 300px"></div>
<div id="jsonContent"></div>
</body>
[/html]

Now we are ready to run our chart. Shall we run it? If you run, you will get the output as follows.

Now if you drill down to Cars you will get the below output.

It is time to create the JSON now. We will save the JSON value to sessionStorage. If you are new to sessionStorage and localStorage you can read it here: Storage Mechanism in HTML5

Once we assign the value to the storage, you can see that in browser console. We will also set this value to a div called jsonContent.

We will create a function for creating this JSON first.

[js]
function generateDrillDownJSON(e, isDrillUp) {
try {
if (isDrillUp) {
if (myJSON != null && myJSON.length > 0) {
removeArrayElementByIndex(myJSON, myJSON.length – 1);
}
sessionStorage.setItem(‘DrillDownJSON’, JSON.stringify(myJSON));
$("#jsonContent").html(‘JSON content is: ‘).append(JSON.stringify(myJSON));
} else {
myJSON.push({
name: e.point.name,
level: myJSON.length + 1,
});
sessionStorage.setItem(‘DrillDownJSON’, JSON.stringify(myJSON));
$("#jsonContent").html(‘JSON content is: ‘).append(JSON.stringify(myJSON));
}

} catch (e) {
console.log(‘generateHierarchyJSON :’ + e.message);
}
}
[/js]

As you can see we are handling the drill events in this function. If it is drill up event, we are removing the values from the JSON created. To remove, we are creating an another function.

[js]
function removeArrayElementByIndex(myArray, index) {
myArray.splice(index, 1);
}
[/js]

We will call our function generateDrillDownJSON in both drill down and drill up event.

[js]
events: {
drilldown: function (e) {
generateDrillDownJSON(e, false);
},
drillup: function (e) {
generateDrillDownJSON(e, true);
}
}
[/js]

It is time to see our implementation and check whether it is working fine or not. So run your application now and click on the Cars series. You can see the JSON created in our div.

If you need to see the JSON value in the session storage, please click F12 and check in session storage.

Now we will try the drill up event and check the JSON value.

You can see that while drill up, we are deleting those values from JSON.

Complete Code

[html]
<!DOCTYPE html>
<html>
<head>
<title>Generate JSON According To Drill Down Drill Up Events Demo-Sibeesh Passion</title>
<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
<script src="http://sibeeshpassion.com/content/scripts/highcharts.js"></script>
<script src="http://sibeeshpassion.com/content/scripts/drilldown.js"></script>
<script>
var myJSON = [];
$(document).ready(function () {
// Internationalization
Highcharts.setOptions({
lang: {
drillUpText: ‘◁ Back to {series.name}’
}
});

var options = {
chart: {
height: 300,
events: {
drilldown: function (e) {
generateDrillDownJSON(e, false);
},
drillup: function (e) {
generateDrillDownJSON(e, true);
}
}
},

title: {
text: ‘Highcharts Drilldown Plugin’
},

xAxis: {
categories: true
},

drilldown: {
series: [{
id: ‘fruits’,
name: ‘Fruits’,
data: [
[‘Apples’, 4],
[‘Pears’, 6],
[‘Oranges’, 2],
[‘Grapes’, 8]
]
}, {
id: ‘cars’,
name: ‘Cars’,
data: [{
name: ‘Toyota’,
y: 4,
drilldown: ‘toyota’
},
[‘Volkswagen’, 3],
[‘Opel’, 5]
]
}, {
id: ‘toyota’,
name: ‘Toyota’,
data: [
[‘RAV4’, 3],
[‘Corolla’, 1],
[‘Carina’, 4],
[‘Land Cruiser’, 5]
]
}]
},

legend: {
enabled: false
},

plotOptions: {
series: {
dataLabels: {
enabled: true
},
shadow: false
},
pie: {
size: ‘80%’
}
},

series: [{
name: ‘Overview’,
colorByPoint: true,
data: [{
name: ‘Fruits’,
y: 10,
drilldown: ‘fruits’
}, {
name: ‘Cars’,
y: 12,
drilldown: ‘cars’
}, {
name: ‘Countries’,
y: 8
}]
}]
};

// Drill Down Chart Implementation
options.chart.renderTo = ‘container’;
options.chart.type = ‘column’;
var chart1 = new Highcharts.Chart(options);
});
function generateDrillDownJSON(e, isDrillUp) {
try {
if (isDrillUp) {
if (myJSON != null && myJSON.length > 0) {
removeArrayElementByIndex(myJSON, myJSON.length – 1);
}
sessionStorage.setItem(‘DrillDownJSON’, JSON.stringify(myJSON));
$("#jsonContent").html(‘JSON content is: ‘).append(JSON.stringify(myJSON));
} else {
myJSON.push({
name: e.point.name,
level: myJSON.length + 1,
});
sessionStorage.setItem(‘DrillDownJSON’, JSON.stringify(myJSON));
$("#jsonContent").html(‘JSON content is: ‘).append(JSON.stringify(myJSON));
}

} catch (e) {
console.log(‘generateHierarchyJSON :’ + e.message);
}
}
function removeArrayElementByIndex(myArray, index) {
myArray.splice(index, 1);
}
</script>
</head>
<body>
Generate JSON According To Drill Down Drill Up Events – Sibeesh Passion (<a href="http://sibeeshpassion.com">Sibeesh Passion </a>)
<br/>
<br/>
<br/>
<div id="container" style="height: 300px"></div>
<div id="jsonContent"></div>
</body>
</html>
[/html]

Conclusion

I hope you liked my article. Please share me your valuable feedback and suggestions. Thanks in advance.

Kindest Regards
Sibeesh Venu
http://sibeeshpassion.com/

Using The Code

[js]
chart: {
type: ‘column’,
events: {
drillup: function (e) {
alert(‘drill Up’);
},
drilldown: function (e) {
alert(‘drill down’);
}
}
}

[/js]

Here chart is my chart property.

Please see other code snippets here: Code-Snippets

Kindest Regards
Sibeesh Venu

Background

A few weeks ago I got the requirement to save the zoom level of the map. If you are new to the Bubble Map, please see here: Working with Bubble Map

Download Source Code

Using the code

I hope you have configured a Bubble Map in your application now. Now it is time to complete our new requirement. Now what we will do is to introduce a new function that retains the zoom level from the session storage and applies it to the map. You must call this function at the end of the map configuration.

The following is the function code.
[js]
var curMax = ”
var curMin = ”
var curMaxY = ”;
var curMinY = ”;
function updateZoom(chart) {
if (sessionStorage.getItem("curMaxZoomMap") != null && typeof sessionStorage.getItem("curMaxZoomMap") != ‘undefined’ && sessionStorage.getItem("curMinZoomMap") != null && typeof sessionStorage.getItem("curMinZoomMap") != ‘undefined’) {
chart.xAxis[0].setExtremes(parseInt(sessionStorage.getItem("curMinZoomMap")), parseInt(sessionStorage.getItem("curMaxZoomMap")));
}
if (sessionStorage.getItem("curMaxZoomMapY") != null && typeof sessionStorage.getItem("curMaxZoomMapY") != ‘undefined’ && sessionStorage.getItem("curMinZoomMapY") != null && typeof sessionStorage.getItem("curMinZoomMapY") != ‘undefined’) {
chart.yAxis[0].setExtremes(parseInt(sessionStorage.getItem("curMinZoomMapY")), parseInt(sessionStorage.getItem("curMaxZoomMapY")));
}
}
[/js]

Now we have seen how to apply the zoom level to the map. Next is how to set the value to the session storage. The fact is that whenever the user does zooming in the map, it fires events in xAxis and yAxis. So we need to crate that events in both axis.

Let’s look at that code now.

[js]
xAxis: {
events: {
afterSetExtremes: function (e) {
curMax = e.max;
curMin = e.min;
sessionStorage.setItem("curMaxZoomMap", curMax);
sessionStorage.setItem("curMinZoomMap", curMin);
}
}
},
yAxis: {
events: {
afterSetExtremes: function (e) {
curMaxY = e.max;
curMinY = e.min;
sessionStorage.setItem("curMaxZoomMapY", curMaxY);
sessionStorage.setItem("curMinZoomMapY", curMinY);
}
}
}
[/js]

Once you have included this event you can see the values in session storage in your browser whenever the user zooms the map.

Save Zoomed View Of Bubble Map

Our next step is to include the zoomTo even in the series of our map.
[js]
events: {
click: function (e) {
e.point.zoomTo();
}
}
[/js]

So your series configuration will be as follows.
[js]
series: [{
mapData: map,
borderColor: ‘#E0E0E0’,
colour: ‘#E0E0E0’,
showInLegend: false,
enableMouseTracking: true,
cursor: ‘pointer’,
dataLabels: {
enabled: true,
format: ‘{point.properties.postal-code}’,
textDecoration: ‘none’,
style: { "color": "darkgrey", "fontWeight": "bold", "HcTextStroke": "0px rgba(0,0,0,0.5)" }
},
events: {
click: function (e) {
e.point.zoomTo();
}
},
}
[/js]

That is all guys, you can retain the zoom level of your map even if you reload. Cool!

Complete Code
[html]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bubble Map Demo – sibeeshpassion</title>
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/highmaps.js"></script>
<script src="Scripts/proj4.js"></script>
<script src="Scripts/us-all.js"></script>
<script src="Scripts/world.js"></script>

<script>
var curMax = ”
var curMin = ”
var curMaxY = ”;
var curMinY = ”;
function updateZoom(chart) {
if (sessionStorage.getItem("curMaxZoomMap") != null && typeof sessionStorage.getItem("curMaxZoomMap") != ‘undefined’ && sessionStorage.getItem("curMinZoomMap") != null && typeof sessionStorage.getItem("curMinZoomMap") != ‘undefined’) {
chart.xAxis[0].setExtremes(parseInt(sessionStorage.getItem("curMinZoomMap")), parseInt(sessionStorage.getItem("curMaxZoomMap")));
}
if (sessionStorage.getItem("curMaxZoomMapY") != null && typeof sessionStorage.getItem("curMaxZoomMapY") != ‘undefined’ && sessionStorage.getItem("curMinZoomMapY") != null && typeof sessionStorage.getItem("curMinZoomMapY") != ‘undefined’) {
chart.yAxis[0].setExtremes(parseInt(sessionStorage.getItem("curMinZoomMapY")), parseInt(sessionStorage.getItem("curMaxZoomMapY")));
}
}
$(function () {
loadMap();
$(‘#apply’).click(function () {
loadMap();
});
});
function loadMap() {
var selectMap = $.trim($("#mapSelectMap").val());
var zPoint = "Quantity";
var jsdata = [{ "State": "Arizona", "lat": "32.8796", "lon": "-111.7282", "Quantity": "29,248" }, { "State": "Arizona", "lat": "33.3197", "lon": "-111.9837", "Quantity": "102,928" }, { "State": "Arizona", "lat": "33.3939", "lon": "-111.6965", "Quantity": "108,863" }, { "State": "Arizona", "lat": "33.4495", "lon": "-112.3410", "Quantity": "67,218" }, { "State": "Arizona", "lat": "33.6155", "lon": "-111.9263", "Quantity": "66,556" }, { "State": "Arizona", "lat": "33.6384", "lon": "-112.2073", "Quantity": "147,552" }, { "State": "California", "lat": "33.6145", "lon": "-117.7101", "Quantity": "26,053" }, { "State": "California", "lat": "33.7008", "lon": "-117.9362", "Quantity": "26,057" }, { "State": "California", "lat": "33.7963", "lon": "-116.3845", "Quantity": "497,249" }, { "State": "California", "lat": "33.8274", "lon": "-118.0868", "Quantity": "32,052" }, { "State": "California", "lat": "33.8763", "lon": "-117.7418", "Quantity": "23,521" }, { "State": "California", "lat": "33.8996", "lon": "-118.3669", "Quantity": "26,169" }, { "State": "California", "lat": "34.0302", "lon": "-118.3865", "Quantity": "21,996" }, { "State": "California", "lat": "34.0569", "lon": "-117.2995", "Quantity": "59,135" }, { "State": "California", "lat": "34.0737", "lon": "-117.8859", "Quantity": "4,757" }, { "State": "California", "lat": "34.1820", "lon": "-118.3140", "Quantity": "28,909" }, { "State": "California", "lat": "34.2257", "lon": "-119.1551", "Quantity": "22,569" }, { "State": "California", "lat": "34.2300", "lon": "-118.5500", "Quantity": "22,413" }, { "State": "California", "lat": "34.4130", "lon": "-118.5036", "Quantity": "18,399" }, { "State": "California", "lat": "34.4813", "lon": "-117.3389", "Quantity": "23,268" }, { "State": "California", "lat": "34.6029", "lon": "-118.1464", "Quantity": "24,651" }, { "State": "California", "lat": "37.5038", "lon": "-121.9762", "Quantity": "4" }, { "State": "California", "lat": "38.3525", "lon": "-122.7148", "Quantity": "2" }, { "State": "Colorado", "lat": "38.4766", "lon": "-107.8812", "Quantity": "3,294" }, { "State": "Colorado", "lat": "39.0730", "lon": "-108.5710", "Quantity": "8,704" }, { "State": "Florida", "lat": "27.8400", "lon": "-82.6800", "Quantity": "75,066" }, { "State": "Florida", "lat": "27.9400", "lon": "-82.3200", "Quantity": "135,365" }, { "State": "Florida", "lat": "27.9600", "lon": "-82.3200", "Quantity": "-6" }, { "State": "Florida", "lat": "27.9925", "lon": "-82.7296", "Quantity": "27,274" }, { "State": "Florida", "lat": "28.0661", "lon": "-82.5688", "Quantity": "261" }, { "State": "Florida", "lat": "28.0790", "lon": "-80.6984", "Quantity": "15,720" }, { "State": "Florida", "lat": "28.0941", "lon": "-81.9738", "Quantity": "85,437" }, { "State": "Florida", "lat": "28.1918", "lon": "-82.3812", "Quantity": "97,233" }, { "State": "Florida", "lat": "28.3027", "lon": "-81.4216", "Quantity": "135,193" }, { "State": "Florida", "lat": "28.5622", "lon": "-81.2074", "Quantity": "120,424" }, { "State": "Florida", "lat": "28.6629", "lon": "-81.4176", "Quantity": "110,185" }, { "State": "Florida", "lat": "29.1800", "lon": "-81.0800", "Quantity": "66,725" }, { "State": "Georgia", "lat": "32.8100", "lon": "-83.7100", "Quantity": "3" }, { "State": "Georgia", "lat": "33.3671", "lon": "-84.7647", "Quantity": "87,508" }, { "State": "Georgia", "lat": "33.4600", "lon": "-84.2100", "Quantity": "155,811" }, { "State": "Georgia", "lat": "33.4759", "lon": "-82.0709", "Quantity": "10,875" }, { "State": "Georgia", "lat": "33.5600", "lon": "-84.5400", "Quantity": "17,937" }, { "State": "Georgia", "lat": "33.5610", "lon": "-84.3223", "Quantity": "203,297" }, { "State": "Georgia", "lat": "33.6810", "lon": "-84.1604", "Quantity": "134,700" }, { "State": "Georgia", "lat": "33.8200", "lon": "-84.3600", "Quantity": "122,120" }, { "State": "Georgia", "lat": "33.9168", "lon": "-83.4439", "Quantity": "84,648" }, { "State": "Georgia", "lat": "33.9522", "lon": "-84.1343", "Quantity": "105,862" }, { "State": "Georgia", "lat": "34.0051", "lon": "-84.5752", "Quantity": "-14" }, { "State": "Georgia", "lat": "34.0076", "lon": "-84.5769", "Quantity": "204,888" }, { "State": "Georgia", "lat": "34.0600", "lon": "-83.9800", "Quantity": "104,291" }, { "State": "Georgia", "lat": "34.1900", "lon": "-84.1200", "Quantity": "186,459" }, { "State": "Idaho", "lat": "42.9101", "lon": "-112.4605", "Quantity": "5,524" }, { "State": "Idaho", "lat": "43.6048", "lon": "-116.3496", "Quantity": "14,476" }, { "State": "Illinois", "lat": "41.5300", "lon": "-87.8500", "Quantity": "54,989" }, { "State": "Illinois", "lat": "41.7200", "lon": "-88.0300", "Quantity": "72,366" }, { "State": "Illinois", "lat": "42.0500", "lon": "-87.8300", "Quantity": "59,164" }, { "State": "Illinois", "lat": "42.1000", "lon": "-87.9700", "Quantity": "49,074" }, { "State": "Illinois", "lat": "42.1300", "lon": "-88.3300", "Quantity": "77,454" }, { "State": "Illinois", "lat": "42.2300", "lon": "-87.9300", "Quantity": "51,251" }, { "State": "Illinois", "lat": "42.2600", "lon": "-88.9700", "Quantity": "57,571" }, { "State": "Indiana", "lat": "39.6292", "lon": "-86.1252", "Quantity": "24,227" }, { "State": "Indiana", "lat": "39.6303", "lon": "-86.1249", "Quantity": "1,074" }, { "State": "Indiana", "lat": "39.7613", "lon": "-86.3488", "Quantity": "12,319" }, { "State": "Indiana", "lat": "39.7634", "lon": "-86.3489", "Quantity": "1,027" }, { "State": "Indiana", "lat": "40.0028", "lon": "-86.1227", "Quantity": "901" }, { "State": "Indiana", "lat": "41.4900", "lon": "-87.4700", "Quantity": "83,677" }, { "State": "Kentucky", "lat": "38.1438", "lon": "-85.6751", "Quantity": "-85" }];
var data1 = [];
var tmp = ”;
var formatedVal = 0;
if (selectMap == "0") {
var H = Highcharts,
map = H.maps[‘countries/us/us-all’],
chart;
}
else {
var H = Highcharts,
map = H.maps[selectMap],
chart;
}
$.each(jsdata, function (ix, entry) {
if (Object.keys(entry).length >= 4) {
tmp = entry[zPoint].replace(/\,/g, ”).replace(/\$/g, ”).replace(/\%/g, ”).replace(/\(/g, ”).replace(/\)/g, ”);
if (isNaN(tmp)) {
entry.z = entry[zPoint];
}
else {

}
data1.push(entry);
}
});
chart = $(‘#container’).highcharts(‘Map’, {
chart: {
borderWidth: 1
},
title: {
text: ‘Bubble map’
},
subtitle: {
text: ‘Bubble map sub title’
},

tooltip: {
pointFormat: ‘{point.State}: {point.Quantity}’
},

mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: ‘bottom’
}
},
xAxis: {
events: {
afterSetExtremes: function (e) {
curMax = e.max;
curMin = e.min;
sessionStorage.setItem("curMaxZoomMap", curMax);
sessionStorage.setItem("curMinZoomMap", curMin);
}
}
},
yAxis: {
events: {
afterSetExtremes: function (e) {
curMaxY = e.max;
curMinY = e.min;
sessionStorage.setItem("curMaxZoomMapY", curMaxY);
sessionStorage.setItem("curMinZoomMapY", curMinY);
}
}
},
legend: {
enabled: true,
title: {
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || ‘black’
}
},
layout: ‘vertical’,
align: ‘right’,
verticalAlign: ‘bottom’,
floating: true,
valueDecimals: 0,
valueSuffix: ‘$’,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘rgba(255, 255, 255, 0.85)’,
symbolRadius: 0,
symbolHeight: 14
},
series: [{
mapData: map,
borderColor: ‘#E0E0E0’,
colour: ‘#E0E0E0’,
showInLegend: false,
enableMouseTracking: true,
cursor: ‘pointer’,
dataLabels: {
enabled: true,
format: ‘{point.properties.postal-code}’,
textDecoration: ‘none’,
style: { "color": "darkgrey", "fontWeight": "bold", "HcTextStroke": "0px rgba(0,0,0,0.5)" }
},
events: {
click: function (e) {
e.point.zoomTo();
}
},
},
{
type: ‘mapbubble’,
color: ‘#E0E0E0’,
dataLabels: {
enabled: true,
formatter: function () {
}
},
enableMouseTracking: true,
joinBy: [‘iso-a2’, ‘code’],
name: zPoint,
data: data1,
minSize: $("#mapMinBubSize").val(),
maxSize: $("#mapMaxBubSize").val(),
color: $("#mapColor").val(),
displayNegative: true,
sizeBy: ‘width’,
cursor: ‘pointer’,
negativeColor: Highcharts.getOptions().colors[0]
}
],
chart: {
marginRight: 50
},
exporting: {
enabled: false
}
}, function (chart) {
updateZoom(chart);
});
}

</script>
</head>
<body>
Bubble Map Demo – sibeeshpassion
<br />
<br />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<label>Min Bubble Size</label>
<input type="number" value="8" min="1" id="mapMinBubSize" title="Type Bubble Min Size." />
<label>Max Bubble Size</label>
<input type="number" min="1" value="40" id="mapMaxBubSize" title="Type Bubble Max Size." />
<label>Color</label>
<input type="color" value="#BAD6F2" id="mapColor" title="Select Bubble Color." />
<label>Select Map</label>
<select name="tech" id="mapSelectMap" class="tech" title="Select Map.">
<option value="0">Select Map</option>
<option value="countries/us/us-all" selected="selected">US alone</option>
<option value="custom/world">Custom World</option>
</select>
<div id="apply" style="cursor: pointer; background-color: red; color: white; width: 100px; padding: 5px; float: right;">Apply Settings</div>
</body>
</html>
[/html]

Conclusion

Please download the source code for more details. I hope you liked this article. Now please share your thoughts and suggestions. It matters a lot.

Kindest Regards
Sibeesh Venu

Background

A few days ago I got a requirement to implement a Bubble Map in my application. So I thought of sharing that with you all. Here we will see how to implement it in an easy way.

So Let Us Start. What you need first is to include the necessary JavaScript files. The required files are listed below.
[js]
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/highmaps.js"></script>
<script src="Scripts/proj4.js"></script>
<script src="Scripts/us-all.js"></script>
<script src="Scripts/world.js"></script>
[/js]

Once you are downloaded the files and provide the references, you are ready to go further. Now it is time to get our data that we need to populate in the Bubble Map. In this example I am using the following data.
[js]
var jsdata = [{ "State": "Arizona", "lat": "32.8796", "lon": "-111.7282", "Quantity": "29,248" }, { "State": "Arizona", "lat": "33.3197", "lon": "-111.9837", "Quantity": "102,928" }, { "State": "Arizona", "lat": "33.3939", "lon": "-111.6965", "Quantity": "108,863" }, { "State": "Arizona", "lat": "33.4495", "lon": "-112.3410", "Quantity": "67,218" }, { "State": "Arizona", "lat": "33.6155", "lon": "-111.9263", "Quantity": "66,556" }, { "State": "Arizona", "lat": "33.6384", "lon": "-112.2073", "Quantity": "147,552" }, { "State": "California", "lat": "33.6145", "lon": "-117.7101", "Quantity": "26,053" }, { "State": "California", "lat": "33.7008", "lon": "-117.9362", "Quantity": "26,057" }, { "State": "California", "lat": "33.7963", "lon": "-116.3845", "Quantity": "497,249" }, { "State": "California", "lat": "33.8274", "lon": "-118.0868", "Quantity": "32,052" }, { "State": "California", "lat": "33.8763", "lon": "-117.7418", "Quantity": "23,521" }, { "State": "California", "lat": "33.8996", "lon": "-118.3669", "Quantity": "26,169" }, { "State": "California", "lat": "34.0302", "lon": "-118.3865", "Quantity": "21,996" }, { "State": "California", "lat": "34.0569", "lon": "-117.2995", "Quantity": "59,135" }, { "State": "California", "lat": "34.0737", "lon": "-117.8859", "Quantity": "4,757" }, { "State": "California", "lat": "34.1820", "lon": "-118.3140", "Quantity": "28,909" }, { "State": "California", "lat": "34.2257", "lon": "-119.1551", "Quantity": "22,569" }, { "State": "California", "lat": "34.2300", "lon": "-118.5500", "Quantity": "22,413" }, { "State": "California", "lat": "34.4130", "lon": "-118.5036", "Quantity": "18,399" }, { "State": "California", "lat": "34.4813", "lon": "-117.3389", "Quantity": "23,268" }, { "State": "California", "lat": "34.6029", "lon": "-118.1464", "Quantity": "24,651" }, { "State": "California", "lat": "37.5038", "lon": "-121.9762", "Quantity": "4" }, { "State": "California", "lat": "38.3525", "lon": "-122.7148", "Quantity": "2" }, { "State": "Colorado", "lat": "38.4766", "lon": "-107.8812", "Quantity": "3,294" }, { "State": "Colorado", "lat": "39.0730", "lon": "-108.5710", "Quantity": "8,704" }, { "State": "Florida", "lat": "27.8400", "lon": "-82.6800", "Quantity": "75,066" }, { "State": "Florida", "lat": "27.9400", "lon": "-82.3200", "Quantity": "135,365" }, { "State": "Florida", "lat": "27.9600", "lon": "-82.3200", "Quantity": "-6" }, { "State": "Florida", "lat": "27.9925", "lon": "-82.7296", "Quantity": "27,274" }, { "State": "Florida", "lat": "28.0661", "lon": "-82.5688", "Quantity": "261" }, { "State": "Florida", "lat": "28.0790", "lon": "-80.6984", "Quantity": "15,720" }, { "State": "Florida", "lat": "28.0941", "lon": "-81.9738", "Quantity": "85,437" }, { "State": "Florida", "lat": "28.1918", "lon": "-82.3812", "Quantity": "97,233" }, { "State": "Florida", "lat": "28.3027", "lon": "-81.4216", "Quantity": "135,193" }, { "State": "Florida", "lat": "28.5622", "lon": "-81.2074", "Quantity": "120,424" }, { "State": "Florida", "lat": "28.6629", "lon": "-81.4176", "Quantity": "110,185" }, { "State": "Florida", "lat": "29.1800", "lon": "-81.0800", "Quantity": "66,725" }, { "State": "Georgia", "lat": "32.8100", "lon": "-83.7100", "Quantity": "3" }, { "State": "Georgia", "lat": "33.3671", "lon": "-84.7647", "Quantity": "87,508" }, { "State": "Georgia", "lat": "33.4600", "lon": "-84.2100", "Quantity": "155,811" }, { "State": "Georgia", "lat": "33.4759", "lon": "-82.0709", "Quantity": "10,875" }, { "State": "Georgia", "lat": "33.5600", "lon": "-84.5400", "Quantity": "17,937" }, { "State": "Georgia", "lat": "33.5610", "lon": "-84.3223", "Quantity": "203,297" }, { "State": "Georgia", "lat": "33.6810", "lon": "-84.1604", "Quantity": "134,700" }, { "State": "Georgia", "lat": "33.8200", "lon": "-84.3600", "Quantity": "122,120" }, { "State": "Georgia", "lat": "33.9168", "lon": "-83.4439", "Quantity": "84,648" }, { "State": "Georgia", "lat": "33.9522", "lon": "-84.1343", "Quantity": "105,862" }, { "State": "Georgia", "lat": "34.0051", "lon": "-84.5752", "Quantity": "-14" }, { "State": "Georgia", "lat": "34.0076", "lon": "-84.5769", "Quantity": "204,888" }, { "State": "Georgia", "lat": "34.0600", "lon": "-83.9800", "Quantity": "104,291" }, { "State": "Georgia", "lat": "34.1900", "lon": "-84.1200", "Quantity": "186,459" }, { "State": "Idaho", "lat": "42.9101", "lon": "-112.4605", "Quantity": "5,524" }, { "State": "Idaho", "lat": "43.6048", "lon": "-116.3496", "Quantity": "14,476" }, { "State": "Illinois", "lat": "41.5300", "lon": "-87.8500", "Quantity": "54,989" }, { "State": "Illinois", "lat": "41.7200", "lon": "-88.0300", "Quantity": "72,366" }, { "State": "Illinois", "lat": "42.0500", "lon": "-87.8300", "Quantity": "59,164" }, { "State": "Illinois", "lat": "42.1000", "lon": "-87.9700", "Quantity": "49,074" }, { "State": "Illinois", "lat": "42.1300", "lon": "-88.3300", "Quantity": "77,454" }, { "State": "Illinois", "lat": "42.2300", "lon": "-87.9300", "Quantity": "51,251" }, { "State": "Illinois", "lat": "42.2600", "lon": "-88.9700", "Quantity": "57,571" }, { "State": "Indiana", "lat": "39.6292", "lon": "-86.1252", "Quantity": "24,227" }, { "State": "Indiana", "lat": "39.6303", "lon": "-86.1249", "Quantity": "1,074" }, { "State": "Indiana", "lat": "39.7613", "lon": "-86.3488", "Quantity": "12,319" }, { "State": "Indiana", "lat": "39.7634", "lon": "-86.3489", "Quantity": "1,027" }, { "State": "Indiana", "lat": "40.0028", "lon": "-86.1227", "Quantity": "901" }, { "State": "Indiana", "lat": "41.4900", "lon": "-87.4700", "Quantity": "83,677" }, { "State": "Kentucky", "lat": "38.1438", "lon": "-85.6751", "Quantity": "-85" }];
[/js]

So our data is also ready now. Now we can check whether the populated data is correct or not. According to the Bubble Map, if any of the data is incorect then the map itself won’t load correctly. So it is always better to provide a check. I encountered many issues when doing this (because I was creating my data dynamically in my application), so I do not want it to happen in your case. You can use the following code for the check process.
[js]
$.each(jsdata, function (ix, entry)
{
if (Object.keys(entry).length >= 4)
{
tmp = entry[zPoint].replace(/\,/g, ”).replace(/\$/g, ”).replace(/\%/g, ”).replace(/\(/g, ”).replace(/\)/g, ”);
if (isNaN(tmp)) {
entry.z = entry[zPoint];
}
else {

}
data1.push(entry);
}
});
[/js]

Here what I am doing is checking whether all the data has the necessary properties. In our case it is 4 (State, Quantity, lat and lon) .

Now we will load the map as follows.
[js]
chart = $(‘#container’).highcharts(‘Map’, {
chart: {
borderWidth: 1
},
title: {
text: ‘Bubble map’
},
subtitle: {
text: ‘Bubble map sub title’
},

tooltip: {
pointFormat: ‘{point.State}: {point.Quantity}’
},

mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: ‘bottom’
}
},
xAxis: {
},
yAxis: {
},
legend: {
enabled: true,
title: {
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || ‘black’
}
},
layout: ‘vertical’,
align: ‘right’,
verticalAlign: ‘bottom’,
floating: true,
valueDecimals: 0,
valueSuffix: ‘$’,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘rgba(255, 255, 255, 0.85)’,
symbolRadius: 0,
symbolHeight: 14
},
series: [{
mapData: map,
borderColor: ‘#E0E0E0’,
colour: ‘#E0E0E0’,
showInLegend: false,
enableMouseTracking: true,
cursor: ‘pointer’,
dataLabels: {
enabled: true,
format: ‘{point.properties.postal-code}’,
textDecoration: ‘none’,
style: { "color": "darkgrey", "fontWeight": "bold", "HcTextStroke": "0px rgba(0,0,0,0.5)" }
},
events: {
click: function (e) {
e.point.zoomTo();
}
},
},
{
type: ‘mapbubble’,
color: ‘#E0E0E0’,
dataLabels: {
enabled: true,
formatter: function () {
}
},
enableMouseTracking: true,
joinBy: [‘iso-a2’, ‘code’],
name: zPoint,
data: data1,
minSize: $("#mapMinBubSize").val(),
maxSize: $("#mapMaxBubSize").val(),
color: $("#mapColor").val(),
displayNegative: true,
sizeBy: ‘width’,
cursor: ‘pointer’,
negativeColor: Highcharts.getOptions().colors[0]
}
],
chart: {
marginRight: 50
},
exporting: {
enabled: false
}
}
[/js]

In the preceding codes you can see we are taking the values from some UI elements (for examle $(“#mapMinBubSize”).val()). Don’t worry, we will see the settings option later. One more important thing is you can find a variable called zPoint in the preceding code, this is the value of our bubble. That is, according to the value of the zPoint the Map Bubble will increase or decrease.
[js]
var zPoint = "Quantity";
[/js]

In the next part , we will create a function for loading the map.
[js]
$(function () {
loadMap();
});
[/js]

Now it is time to write our complete code in that function.
[js]
function loadMap() {
var selectMap = $.trim($("#mapSelectMap").val());
var zPoint = "Quantity";
var jsdata = [{ "State": "Arizona", "lat": "32.8796", "lon": "-111.7282", "Quantity": "29,248" }, { "State": "Arizona", "lat": "33.3197", "lon": "-111.9837", "Quantity": "102,928" }, { "State": "Arizona", "lat": "33.3939", "lon": "-111.6965", "Quantity": "108,863" }, { "State": "Arizona", "lat": "33.4495", "lon": "-112.3410", "Quantity": "67,218" }, { "State": "Arizona", "lat": "33.6155", "lon": "-111.9263", "Quantity": "66,556" }, { "State": "Arizona", "lat": "33.6384", "lon": "-112.2073", "Quantity": "147,552" }, { "State": "California", "lat": "33.6145", "lon": "-117.7101", "Quantity": "26,053" }, { "State": "California", "lat": "33.7008", "lon": "-117.9362", "Quantity": "26,057" }, { "State": "California", "lat": "33.7963", "lon": "-116.3845", "Quantity": "497,249" }, { "State": "California", "lat": "33.8274", "lon": "-118.0868", "Quantity": "32,052" }, { "State": "California", "lat": "33.8763", "lon": "-117.7418", "Quantity": "23,521" }, { "State": "California", "lat": "33.8996", "lon": "-118.3669", "Quantity": "26,169" }, { "State": "California", "lat": "34.0302", "lon": "-118.3865", "Quantity": "21,996" }, { "State": "California", "lat": "34.0569", "lon": "-117.2995", "Quantity": "59,135" }, { "State": "California", "lat": "34.0737", "lon": "-117.8859", "Quantity": "4,757" }, { "State": "California", "lat": "34.1820", "lon": "-118.3140", "Quantity": "28,909" }, { "State": "California", "lat": "34.2257", "lon": "-119.1551", "Quantity": "22,569" }, { "State": "California", "lat": "34.2300", "lon": "-118.5500", "Quantity": "22,413" }, { "State": "California", "lat": "34.4130", "lon": "-118.5036", "Quantity": "18,399" }, { "State": "California", "lat": "34.4813", "lon": "-117.3389", "Quantity": "23,268" }, { "State": "California", "lat": "34.6029", "lon": "-118.1464", "Quantity": "24,651" }, { "State": "California", "lat": "37.5038", "lon": "-121.9762", "Quantity": "4" }, { "State": "California", "lat": "38.3525", "lon": "-122.7148", "Quantity": "2" }, { "State": "Colorado", "lat": "38.4766", "lon": "-107.8812", "Quantity": "3,294" }, { "State": "Colorado", "lat": "39.0730", "lon": "-108.5710", "Quantity": "8,704" }, { "State": "Florida", "lat": "27.8400", "lon": "-82.6800", "Quantity": "75,066" }, { "State": "Florida", "lat": "27.9400", "lon": "-82.3200", "Quantity": "135,365" }, { "State": "Florida", "lat": "27.9600", "lon": "-82.3200", "Quantity": "-6" }, { "State": "Florida", "lat": "27.9925", "lon": "-82.7296", "Quantity": "27,274" }, { "State": "Florida", "lat": "28.0661", "lon": "-82.5688", "Quantity": "261" }, { "State": "Florida", "lat": "28.0790", "lon": "-80.6984", "Quantity": "15,720" }, { "State": "Florida", "lat": "28.0941", "lon": "-81.9738", "Quantity": "85,437" }, { "State": "Florida", "lat": "28.1918", "lon": "-82.3812", "Quantity": "97,233" }, { "State": "Florida", "lat": "28.3027", "lon": "-81.4216", "Quantity": "135,193" }, { "State": "Florida", "lat": "28.5622", "lon": "-81.2074", "Quantity": "120,424" }, { "State": "Florida", "lat": "28.6629", "lon": "-81.4176", "Quantity": "110,185" }, { "State": "Florida", "lat": "29.1800", "lon": "-81.0800", "Quantity": "66,725" }, { "State": "Georgia", "lat": "32.8100", "lon": "-83.7100", "Quantity": "3" }, { "State": "Georgia", "lat": "33.3671", "lon": "-84.7647", "Quantity": "87,508" }, { "State": "Georgia", "lat": "33.4600", "lon": "-84.2100", "Quantity": "155,811" }, { "State": "Georgia", "lat": "33.4759", "lon": "-82.0709", "Quantity": "10,875" }, { "State": "Georgia", "lat": "33.5600", "lon": "-84.5400", "Quantity": "17,937" }, { "State": "Georgia", "lat": "33.5610", "lon": "-84.3223", "Quantity": "203,297" }, { "State": "Georgia", "lat": "33.6810", "lon": "-84.1604", "Quantity": "134,700" }, { "State": "Georgia", "lat": "33.8200", "lon": "-84.3600", "Quantity": "122,120" }, { "State": "Georgia", "lat": "33.9168", "lon": "-83.4439", "Quantity": "84,648" }, { "State": "Georgia", "lat": "33.9522", "lon": "-84.1343", "Quantity": "105,862" }, { "State": "Georgia", "lat": "34.0051", "lon": "-84.5752", "Quantity": "-14" }, { "State": "Georgia", "lat": "34.0076", "lon": "-84.5769", "Quantity": "204,888" }, { "State": "Georgia", "lat": "34.0600", "lon": "-83.9800", "Quantity": "104,291" }, { "State": "Georgia", "lat": "34.1900", "lon": "-84.1200", "Quantity": "186,459" }, { "State": "Idaho", "lat": "42.9101", "lon": "-112.4605", "Quantity": "5,524" }, { "State": "Idaho", "lat": "43.6048", "lon": "-116.3496", "Quantity": "14,476" }, { "State": "Illinois", "lat": "41.5300", "lon": "-87.8500", "Quantity": "54,989" }, { "State": "Illinois", "lat": "41.7200", "lon": "-88.0300", "Quantity": "72,366" }, { "State": "Illinois", "lat": "42.0500", "lon": "-87.8300", "Quantity": "59,164" }, { "State": "Illinois", "lat": "42.1000", "lon": "-87.9700", "Quantity": "49,074" }, { "State": "Illinois", "lat": "42.1300", "lon": "-88.3300", "Quantity": "77,454" }, { "State": "Illinois", "lat": "42.2300", "lon": "-87.9300", "Quantity": "51,251" }, { "State": "Illinois", "lat": "42.2600", "lon": "-88.9700", "Quantity": "57,571" }, { "State": "Indiana", "lat": "39.6292", "lon": "-86.1252", "Quantity": "24,227" }, { "State": "Indiana", "lat": "39.6303", "lon": "-86.1249", "Quantity": "1,074" }, { "State": "Indiana", "lat": "39.7613", "lon": "-86.3488", "Quantity": "12,319" }, { "State": "Indiana", "lat": "39.7634", "lon": "-86.3489", "Quantity": "1,027" }, { "State": "Indiana", "lat": "40.0028", "lon": "-86.1227", "Quantity": "901" }, { "State": "Indiana", "lat": "41.4900", "lon": "-87.4700", "Quantity": "83,677" }, { "State": "Kentucky", "lat": "38.1438", "lon": "-85.6751", "Quantity": "-85" }];
var data1 = [];
var tmp = ”;
var formatedVal = 0;
if (selectMap == "0") {
var H = Highcharts,
map = H.maps[‘countries/us/us-all’],
chart;
}
else {
var H = Highcharts,
map = H.maps[selectMap],
chart;
}
$.each(jsdata, function (ix, entry) {
if (Object.keys(entry).length >= 4) {
tmp = entry[zPoint].replace(/\,/g, ”).replace(/\$/g, ”).replace(/\%/g, ”).replace(/\(/g, ”).replace(/\)/g, ”);
if (isNaN(tmp)) {
entry.z = entry[zPoint];
}
else {

}
data1.push(entry);
}
});
chart = $(‘#container’).highcharts(‘Map’, {
chart: {
borderWidth: 1
},
title: {
text: ‘Bubble map’
},
subtitle: {
text: ‘Bubble map sub title’
},

tooltip: {
pointFormat: ‘{point.State}: {point.Quantity}’
},

mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: ‘bottom’
}
},
xAxis: {
},
yAxis: {
},
legend: {
enabled: true,
title: {
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || ‘black’
}
},
layout: ‘vertical’,
align: ‘right’,
verticalAlign: ‘bottom’,
floating: true,
valueDecimals: 0,
valueSuffix: ‘$’,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘rgba(255, 255, 255, 0.85)’,
symbolRadius: 0,
symbolHeight: 14
},
series: [{
mapData: map,
borderColor: ‘#E0E0E0’,
colour: ‘#E0E0E0’,
showInLegend: false,
enableMouseTracking: true,
cursor: ‘pointer’,
dataLabels: {
enabled: true,
format: ‘{point.properties.postal-code}’,
textDecoration: ‘none’,
style: { "color": "darkgrey", "fontWeight": "bold", "HcTextStroke": "0px rgba(0,0,0,0.5)" }
},
events: {
click: function (e) {
e.point.zoomTo();
}
},
},
{
type: ‘mapbubble’,
color: ‘#E0E0E0’,
dataLabels: {
enabled: true,
formatter: function () {
}
},
enableMouseTracking: true,
joinBy: [‘iso-a2’, ‘code’],
name: zPoint,
data: data1,
minSize: $("#mapMinBubSize").val(),
maxSize: $("#mapMaxBubSize").val(),
color: $("#mapColor").val(),
displayNegative: true,
sizeBy: ‘width’,
cursor: ‘pointer’,
negativeColor: Highcharts.getOptions().colors[0]
}
],
chart: {
marginRight: 50
},
exporting: {
enabled: false
}
});
}
[/js]

You can try giving a different setting or property to all the settings said above. Now if you run your code, you will get output as follows.

Create_Bubble_Map

I hope you got the output. In the preceding implementation, I have given my tooltip as:
[js]
tooltip: {
pointFormat: ‘{point.State}: {point.Quantity}’
},
[/js]

You can try various options there too. Here I am taking the values State and Quantity from the relevant point.

The next thing we will do is to create some UI elements. We will set the map bubble color, bubble size, background map and so on in these elements so that our application will be user-friendly.
Please add some UI elements as follows.
[html]
Bubble Map Demo – sibeeshpassion
<br />
<br />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<label>Min Bubble Size</label>
<input type="number" value="8" min="1" id="mapMinBubSize" title="Type Bubble Min Size." />
<label>Max Bubble Size</label>
<input type="number" min="1" value="40" id="mapMaxBubSize" title="Type Bubble Max Size." />
<label>Color</label>
<input type="color" value="#BAD6F2" id="mapColor" title="Select Bubble Color." />
<label>Select Map</label>
<select name="tech" id="mapSelectMap" class="tech" title="Select Map.">
<option value="0">Select Map</option>
<option value="countries/us/us-all" selected="selected">US alone</option>
<option value="custom/world">Custom World</option>
</select>
<div id="apply" style="cursor: pointer; background-color: red; color: white; width: 100px; padding: 5px; float: right;">Apply Settings</div>
[/html]

Now you can see those elements in your screen, right?

Create_Bubble_Map

So we need to fire an event whenever the user clicks the apply settings button, right? Include the following code in your document ready function.

[js]
$(‘#apply’).click(function () {
loadMap();
});
[/js]

Now we will check whether our given settings are being applid to the map. Please see the following screenshot.

Now we have changed the bubble colour, bubble size and the map loaded in the background. Before the map was US alone one. Now it is the complete world.

Whenever the user changes the map we are checking it as follows.
[js]
var selectMap = $.trim($("#mapSelectMap").val());
if (selectMap == "0") {
var H = Highcharts,
map = H.maps[‘countries/us/us-all’],
chart;
}
else {
var H = Highcharts,
map = H.maps[selectMap],
chart;
}
[/js]

Can you find the differences?

Complete HTML

[html]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bubble Map Demo – sibeeshpassion</title>
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/highmaps.js"></script>
<script src="Scripts/proj4.js"></script>
<script src="Scripts/us-all.js"></script>
<script src="Scripts/world.js"></script>

<script>
$(function () {
loadMap();
$(‘#apply’).click(function () {
loadMap();
});
});
function loadMap() {
var selectMap = $.trim($("#mapSelectMap").val());
var zPoint = "Quantity";
var jsdata = [{ "State": "Arizona", "lat": "32.8796", "lon": "-111.7282", "Quantity": "29,248" }, { "State": "Arizona", "lat": "33.3197", "lon": "-111.9837", "Quantity": "102,928" }, { "State": "Arizona", "lat": "33.3939", "lon": "-111.6965", "Quantity": "108,863" }, { "State": "Arizona", "lat": "33.4495", "lon": "-112.3410", "Quantity": "67,218" }, { "State": "Arizona", "lat": "33.6155", "lon": "-111.9263", "Quantity": "66,556" }, { "State": "Arizona", "lat": "33.6384", "lon": "-112.2073", "Quantity": "147,552" }, { "State": "California", "lat": "33.6145", "lon": "-117.7101", "Quantity": "26,053" }, { "State": "California", "lat": "33.7008", "lon": "-117.9362", "Quantity": "26,057" }, { "State": "California", "lat": "33.7963", "lon": "-116.3845", "Quantity": "497,249" }, { "State": "California", "lat": "33.8274", "lon": "-118.0868", "Quantity": "32,052" }, { "State": "California", "lat": "33.8763", "lon": "-117.7418", "Quantity": "23,521" }, { "State": "California", "lat": "33.8996", "lon": "-118.3669", "Quantity": "26,169" }, { "State": "California", "lat": "34.0302", "lon": "-118.3865", "Quantity": "21,996" }, { "State": "California", "lat": "34.0569", "lon": "-117.2995", "Quantity": "59,135" }, { "State": "California", "lat": "34.0737", "lon": "-117.8859", "Quantity": "4,757" }, { "State": "California", "lat": "34.1820", "lon": "-118.3140", "Quantity": "28,909" }, { "State": "California", "lat": "34.2257", "lon": "-119.1551", "Quantity": "22,569" }, { "State": "California", "lat": "34.2300", "lon": "-118.5500", "Quantity": "22,413" }, { "State": "California", "lat": "34.4130", "lon": "-118.5036", "Quantity": "18,399" }, { "State": "California", "lat": "34.4813", "lon": "-117.3389", "Quantity": "23,268" }, { "State": "California", "lat": "34.6029", "lon": "-118.1464", "Quantity": "24,651" }, { "State": "California", "lat": "37.5038", "lon": "-121.9762", "Quantity": "4" }, { "State": "California", "lat": "38.3525", "lon": "-122.7148", "Quantity": "2" }, { "State": "Colorado", "lat": "38.4766", "lon": "-107.8812", "Quantity": "3,294" }, { "State": "Colorado", "lat": "39.0730", "lon": "-108.5710", "Quantity": "8,704" }, { "State": "Florida", "lat": "27.8400", "lon": "-82.6800", "Quantity": "75,066" }, { "State": "Florida", "lat": "27.9400", "lon": "-82.3200", "Quantity": "135,365" }, { "State": "Florida", "lat": "27.9600", "lon": "-82.3200", "Quantity": "-6" }, { "State": "Florida", "lat": "27.9925", "lon": "-82.7296", "Quantity": "27,274" }, { "State": "Florida", "lat": "28.0661", "lon": "-82.5688", "Quantity": "261" }, { "State": "Florida", "lat": "28.0790", "lon": "-80.6984", "Quantity": "15,720" }, { "State": "Florida", "lat": "28.0941", "lon": "-81.9738", "Quantity": "85,437" }, { "State": "Florida", "lat": "28.1918", "lon": "-82.3812", "Quantity": "97,233" }, { "State": "Florida", "lat": "28.3027", "lon": "-81.4216", "Quantity": "135,193" }, { "State": "Florida", "lat": "28.5622", "lon": "-81.2074", "Quantity": "120,424" }, { "State": "Florida", "lat": "28.6629", "lon": "-81.4176", "Quantity": "110,185" }, { "State": "Florida", "lat": "29.1800", "lon": "-81.0800", "Quantity": "66,725" }, { "State": "Georgia", "lat": "32.8100", "lon": "-83.7100", "Quantity": "3" }, { "State": "Georgia", "lat": "33.3671", "lon": "-84.7647", "Quantity": "87,508" }, { "State": "Georgia", "lat": "33.4600", "lon": "-84.2100", "Quantity": "155,811" }, { "State": "Georgia", "lat": "33.4759", "lon": "-82.0709", "Quantity": "10,875" }, { "State": "Georgia", "lat": "33.5600", "lon": "-84.5400", "Quantity": "17,937" }, { "State": "Georgia", "lat": "33.5610", "lon": "-84.3223", "Quantity": "203,297" }, { "State": "Georgia", "lat": "33.6810", "lon": "-84.1604", "Quantity": "134,700" }, { "State": "Georgia", "lat": "33.8200", "lon": "-84.3600", "Quantity": "122,120" }, { "State": "Georgia", "lat": "33.9168", "lon": "-83.4439", "Quantity": "84,648" }, { "State": "Georgia", "lat": "33.9522", "lon": "-84.1343", "Quantity": "105,862" }, { "State": "Georgia", "lat": "34.0051", "lon": "-84.5752", "Quantity": "-14" }, { "State": "Georgia", "lat": "34.0076", "lon": "-84.5769", "Quantity": "204,888" }, { "State": "Georgia", "lat": "34.0600", "lon": "-83.9800", "Quantity": "104,291" }, { "State": "Georgia", "lat": "34.1900", "lon": "-84.1200", "Quantity": "186,459" }, { "State": "Idaho", "lat": "42.9101", "lon": "-112.4605", "Quantity": "5,524" }, { "State": "Idaho", "lat": "43.6048", "lon": "-116.3496", "Quantity": "14,476" }, { "State": "Illinois", "lat": "41.5300", "lon": "-87.8500", "Quantity": "54,989" }, { "State": "Illinois", "lat": "41.7200", "lon": "-88.0300", "Quantity": "72,366" }, { "State": "Illinois", "lat": "42.0500", "lon": "-87.8300", "Quantity": "59,164" }, { "State": "Illinois", "lat": "42.1000", "lon": "-87.9700", "Quantity": "49,074" }, { "State": "Illinois", "lat": "42.1300", "lon": "-88.3300", "Quantity": "77,454" }, { "State": "Illinois", "lat": "42.2300", "lon": "-87.9300", "Quantity": "51,251" }, { "State": "Illinois", "lat": "42.2600", "lon": "-88.9700", "Quantity": "57,571" }, { "State": "Indiana", "lat": "39.6292", "lon": "-86.1252", "Quantity": "24,227" }, { "State": "Indiana", "lat": "39.6303", "lon": "-86.1249", "Quantity": "1,074" }, { "State": "Indiana", "lat": "39.7613", "lon": "-86.3488", "Quantity": "12,319" }, { "State": "Indiana", "lat": "39.7634", "lon": "-86.3489", "Quantity": "1,027" }, { "State": "Indiana", "lat": "40.0028", "lon": "-86.1227", "Quantity": "901" }, { "State": "Indiana", "lat": "41.4900", "lon": "-87.4700", "Quantity": "83,677" }, { "State": "Kentucky", "lat": "38.1438", "lon": "-85.6751", "Quantity": "-85" }];
var data1 = [];
var tmp = ”;
var formatedVal = 0;
if (selectMap == "0") {
var H = Highcharts,
map = H.maps[‘countries/us/us-all’],
chart;
}
else {
var H = Highcharts,
map = H.maps[selectMap],
chart;
}
$.each(jsdata, function (ix, entry) {
if (Object.keys(entry).length >= 4) {
tmp = entry[zPoint].replace(/\,/g, ”).replace(/\$/g, ”).replace(/\%/g, ”).replace(/\(/g, ”).replace(/\)/g, ”);
if (isNaN(tmp)) {
entry.z = entry[zPoint];
}
else {

}
data1.push(entry);
}
});
chart = $(‘#container’).highcharts(‘Map’, {
chart: {
borderWidth: 1
},
title: {
text: ‘Bubble map’
},
subtitle: {
text: ‘Bubble map sub title’
},

tooltip: {
pointFormat: ‘{point.State}: {point.Quantity}’
},

mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: ‘bottom’
}
},
xAxis: {
},
yAxis: {
},
legend: {
enabled: true,
title: {
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || ‘black’
}
},
layout: ‘vertical’,
align: ‘right’,
verticalAlign: ‘bottom’,
floating: true,
valueDecimals: 0,
valueSuffix: ‘$’,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘rgba(255, 255, 255, 0.85)’,
symbolRadius: 0,
symbolHeight: 14
},
series: [{
mapData: map,
borderColor: ‘#E0E0E0’,
colour: ‘#E0E0E0’,
showInLegend: false,
enableMouseTracking: true,
cursor: ‘pointer’,
dataLabels: {
enabled: true,
format: ‘{point.properties.postal-code}’,
textDecoration: ‘none’,
style: { "color": "darkgrey", "fontWeight": "bold", "HcTextStroke": "0px rgba(0,0,0,0.5)" }
},
events: {
click: function (e) {
e.point.zoomTo();
}
},
},
{
type: ‘mapbubble’,
color: ‘#E0E0E0’,
dataLabels: {
enabled: true,
formatter: function () {
}
},
enableMouseTracking: true,
joinBy: [‘iso-a2’, ‘code’],
name: zPoint,
data: data1,
minSize: $("#mapMinBubSize").val(),
maxSize: $("#mapMaxBubSize").val(),
color: $("#mapColor").val(),
displayNegative: true,
sizeBy: ‘width’,
cursor: ‘pointer’,
negativeColor: Highcharts.getOptions().colors[0]
}
],
chart: {
marginRight: 50
},
exporting: {
enabled: false
}
});
}

</script>
</head>
<body>
Bubble Map Demo – sibeeshpassion
<br />
<br />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<label>Min Bubble Size</label>
<input type="number" value="8" min="1" id="mapMinBubSize" title="Type Bubble Min Size." />
<label>Max Bubble Size</label>
<input type="number" min="1" value="40" id="mapMaxBubSize" title="Type Bubble Max Size." />
<label>Color</label>
<input type="color" value="#BAD6F2" id="mapColor" title="Select Bubble Color." />
<label>Select Map</label>
<select name="tech" id="mapSelectMap" class="tech" title="Select Map.">
<option value="0">Select Map</option>
<option value="countries/us/us-all" selected="selected">US alone</option>
<option value="custom/world">Custom World</option>
</select>
<div id="apply" style="cursor: pointer; background-color: red; color: white; width: 100px; padding: 5px; float: right;">Apply Settings</div>
</body>
</html>
[/html]

Conclusion

Please download the source code for more details. I hope you liked this article. Now please share your thoughts and suggestions. It matters a lot.

Kindest Regards
Sibeesh Venu

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