Site icon Sibeesh Passion

Create a Combo Chart and Make Your Chart Draggable

SibeeshVenu

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

Exit mobile version