CODEWITHSUNDEEP
javascripthtmlchartsgoogle-visualization
T.C
T.C

Reputation: 311

Create combo bar chart and line chart with value "0" starting in the middle of the vertical line GOOGLE CHARTS

Is it possible to create a chart like the one below using google charts?

enter image description here

I have no idea how to go about this, so I decided to try using candlesticks chart.

with this basic starter code:

google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(candleChart);


    /*CANDEL CHART*/

function candleChart() {
var data = google.visualization.arrayToDataTable([
  ['Jan', 20, 28, 38, 45],
  ['Feb', 31, 38, 55, 66],
  ['Mar', 50, 55, 77, 80],
  ['Apr', 77, 77, 66, 50],
  ['May', 68, 66, 22, 15],
  ['jun', 68, 66, 22, 15],
  ['Jul', 68, 66, 22, 15],
  ['Aug', 68, 66, 22, 15],
  ['Sep', 68, 66, 22, 15],
  ['Oct', 68, 66, 22, 15],
  ['Nov', 68, 66, 22, 15],
  ['Dec', 68, 66, 22, 15]
  // Treat first row as data as well.
], true);




var options = {
  legend:'none'
};

var chart = new google.visualization.CandlestickChart(document.getElementById('candle_chart'));

chart.draw(data, options);
}

But this is not what I want, I don't know where to start and I couldn't find any documentation on how to make it like the chart in the image.

The vertical line needs 0 as the center like in the image with positive numbers increasing below it and positive numbers increasing above it.

The bottom blue bar would be total number of competitors that did not get accepted. The green bar being total of competitors that did get accepted.

the line will represent where the user placed in that number.

Please help I have no clue where to begin. Thank you in advance!

Upvotes: 1

Views: 921

Answers (2)

WhiteHat
WhiteHat

Reputation: 61230

use a ComboChart with 3 series / y-axis columns.

for the first two series use stacked columns. the first being the negative values, the second positive. 

isStacked: true,
seriesType: 'bars',

for the third, change the series type to line. 

series: {
  2: {
    type: 'line'
  }
},

data should look similar to following. 

['x', 'y0', 'y1', 'y2'],
['Jan', -125, 100, -10],
['Feb', -100, 125, 5],
['Mar', -200, 415, 205],

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    ['Jan', -125, 100, -10],
    ['Feb', -100, 125, 5],
    ['Mar', -200, 415, 205],
    ['Apr', -375, 180, -190],
    ['May', -180, 240, 100],
    ['Jun', -160, 100, -205],
    ['Jul', -125, 80, -12],
    ['Aug', -175, 110, -25],
    ['Sep', -100, 220, 150],
    ['Oct', -110, 390, 240],
    ['05 Nov', -10, 25, 30],
  ])

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 16,
      right: 16,
      bottom: 60,
      left: 60
    },
    colors: ['#03a9f4', '#cddc39', '#616161'],
    hAxis: {
      title: 'FY 18'
    },
    height: '100%',
    isStacked: true,
    legend: {
      position: 'none'
    },
    pointSize: 6,
    series: {
      2: {
        type: 'line'
      }
    },
    seriesType: 'bars',
    vAxis: {
      ticks: [
        {v: -400, f: '400'},
        {v: -200, f: '200'},
        0,
        200,
        400
      ],
      title: 'Amount'
    },
    width: '100%'
  }

  var chart = new google.visualization.ComboChart(document.getElementById('chart'))
  chart.draw(data, options)
});
#chart {
  height: 320px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Upvotes: 2

Andrew Ridgway
Andrew Ridgway

Reputation: 574

It's this:

var options = {vAxis: { ticks: [-80,-40,0,40,80] }}

Read through the documentation! Every page on the google charts site lists all the configuration options for that chart type: super useful stuff.

Working JS fiddle cribbed from a gcharts example here.

Upvotes: -1

Related Questions