Create a Combo Chart and Make Your Chart Draggable

This article explains how to create a Combo chart with a draggable Pie chart in the chart area.

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.

  1. <script src="http://code.highcharts.com/highcharts.js"></script>  
  2. <script src="http://code.highcharts.com/modules/exporting.js"></script>  
  3. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
  4. <div id="container2" style="width: 150px; height: 150px; margin: 0 auto; position:absolute; top: 120px; left: 150px;"></div>  

Combo chart configuration

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

  1. $(function()   
  2. {  
  3.     $('#container').highcharts({  
  4.         title: {  
  5.             text: 'Worked hours in a week'  
  6.         },  
  7.         xAxis: {  
  8.             categories: ['Apples''Oranges''Pears''Bananas''Plums']  
  9.         },  
  10.         series: [{  
  11.             type: 'column',  
  12.             name: 'Monday',  
  13.             data: [3, 2, 1, 3, 4]  
  14.         }, {  
  15.             type: 'column',  
  16.             name: 'Tuesday',  
  17.             data: [2, 3, 5, 7, 6]  
  18.         }, {  
  19.             type: 'column',  
  20.             name: 'Wednesday',  
  21.             data: [4, 3, 3, 9, 0]  
  22.         }, {  
  23.             type: 'column',  
  24.             name: 'Thursday',  
  25.             data: [4, 3, 3, 9, 0]  
  26.         }, {  
  27.             type: 'column',  
  28.             name: 'Friday',  
  29.             data: [4, 3, 3, 9, 0]  
  30.         }, {  
  31.             type: 'spline',  
  32.             name: 'Thursday',  
  33.             data: [3, 2.67, 3, 6.33, 3.33],  
  34.             marker: {  
  35.                 lineWidth: 2,  
  36.                 lineColor: Highcharts.getOptions().colors[3],  
  37.                 fillColor: 'white'  
  38.             }  
  39.         }]  
  40.     });  
  41.     $('#container2').highcharts({  
  42.         chart: {  
  43.             backgroundColor: 'rgba(0,0,0,0)'  
  44.         },  
  45.         title: {  
  46.             text: null  
  47.         },  
  48.         exporting: {  
  49.             enabled: false  
  50.         },  
  51.         credits: {  
  52.             enabled: false  
  53.         },  
  54.         series: [{  
  55.             type: 'pie',  
  56.             name: 'Total',  
  57.             data: [{  
  58.                 name: 'Monday',  
  59.                 y: 13,  
  60.                 color: Highcharts.getOptions().colors[0]  
  61.             }, {  
  62.                 name: 'Tuesday',  
  63.                 y: 23,  
  64.                 color: Highcharts.getOptions().colors[1]  
  65.             }, {  
  66.                 name: 'Wednesday',  
  67.                 y: 19,  
  68.                 color: Highcharts.getOptions().colors[2]  
  69.             }, {  
  70.                 name: 'Thursday',  
  71.                 y: 19,  
  72.                 color: Highcharts.getOptions().colors[2]  
  73.             }, {  
  74.                 name: 'Friday',  
  75.                 y: 19,  
  76.                 color: Highcharts.getOptions().colors[2]  
  77.             }],  
  78.             size: 90,  
  79.             showInLegend: false,  
  80.             dataLabels: {  
  81.                 enabled: false  
  82.             }  
  83.         }]  
  84.     });  
  85.     $("#container2").draggable();  
  86. });  

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

  1. $("#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