HighChart – Sibeesh Passion

Client Side Exporting In HighChart

SibeeshVenu — Fri, 27 May 2016 10:59:54 +0000

In this post we will discuss how we can enable client side exporting in HighChart . In normal case the data of your chart is being send to the external server which is http://export.highcharts.com/. But if your product is already in production environment, none of your clients will not agree with the idea of sending their data to any third party server. Am I right? To overcome this, HighChart has given an option called offline-exporting. Here we will discuss that. I hope you will like this.

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]

[/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]

[/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

client-side-export

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

Remove Time Stamp Form Legend In HighChart

SibeeshVenu — Mon, 25 Jan 2016 06:04:08 +0000

In this code snippet we will discuss how we can remove the time stamp from the legend in high chart. Some times it will not be good if we show the the default time stamps in the legend. So to remove the time stamp you can use the labelFormatter function.

[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

Custom Events In Highcharts

SibeeshVenu — Tue, 06 Oct 2015 13:38:03 +0000

In this post we will discuss how we can handle custom events in HighChart . HighChart has already given enough events but sometimes we may need to handle some additional events. For example if we need to fire an alert if user double clicks on the points. Here I am using HighChart Drill Down Chart, So As you all know drill down chart is a chart which populate another chart according to the user action, ie if user click on a particular series, a chart with the related data of the clicked series will get loaded. Now we will go and see it in action. I hope you will like this.

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]

Fire Double Click Events In Highcharts

Fire Double Click Events In Highcharts – Sibeesh Passion (Sibeesh Passion )

[/html]

Next we will add the needed references.

[js]

[/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]

[/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]

Fire Double Click Events In Highcharts

Fire Double Click Events In Highcharts – Sibeesh Passion (Sibeesh Passion )

[/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?

Kindest Regards
Sibeesh Venu

Generate JSON According To Drill Down Drill Up Events

SibeeshVenu — Sun, 02 Aug 2015 14:53:21 +0000

In this post, we will see how we can we generate or create JSON dynamically according to users drill up and drill down event actions. We will create JSON when user clicks on a drill down chart’s series. We will also learn how we will create a Drill Down Chart. With the help of created JSON we can get the information of which are all the series have been clicked by user or which are all the drill series have been seen by the user. We can do some more things with this JSON.

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]

[/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]

Generate JSON According To Drill Down Drill Up Events – Sibeesh Passion (Sibeesh Passion )

[/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]

Generate JSON According To Drill Down Drill Up Events Demo-Sibeesh Passion

Generate JSON According To Drill Down Drill Up Events – Sibeesh Passion (Sibeesh Passion )

[/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/

Drill Down And Drill Up Events In Drill Down Highchart

SibeeshVenu — Fri, 24 Jul 2015 12:05:21 +0000

In this post, we will see how we can fire drill down and drill up events in drill down highchart. I hope you will like it.

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

Drag and Drop the Legend and Maintain the Position in Chart

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

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

Background

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

Download Source Code

Drag and Drop the Legend and Maintain the Position

Load the required files

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

[/js]

Creating UI elements

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

Legend X:

Legend X:
[/html]

Creating options of chart

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

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

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

Drag and Drop the Legend and Maintain the Position in Chart

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

Changes in draggable-legend.js

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

});
[/js]

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

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

Drag and Drop the Legend and Maintain the Position in Chart

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

Drag and Drop the Legend and Maintain the Position in Chart

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

Drag and Drop the Legend and Maintain the Position in Chart

Cool, it is updated, we are happy.

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

Maintain the legend position

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

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

Complete code
[html]

Dragable Legend – sibeeshpassion

Dragable Legend – sibeeshpassion

Legend X:

Legend X:

[/html]

Conclusion

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

Points of interest

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

Working With Charts

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

Introduction

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

Background

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

What you must know

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

Using the code

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

[js]

[/js]

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

[/html]

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

Explanation

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

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

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

Sibeeshvevenu

Output

Points of Interest

jQuery, CSS, HTML and HighChart.

History

1st Version: 08-May-2015

Create a Combo Chart and Make Your Chart Draggable

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

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

Background

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

What we need first

Include the necessary JavaScript files and UI elements as follows.

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

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

Combo chart configuration

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

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

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

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

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

Output

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

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

Conclusion

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

Kindest Regards,

Sibeesh Venu
Sibeesh Passion