I am using google charts and am very new to the API, now the thing that will most likely work for my requirments is a Combo Chart, this chart is very good with everything but only one thing is very wierd,

When I try Lines with Candlesticks, no matter which one is in series and the other is in seriesType Candlesticks are always ontop of lines, is there any work around for this issue ?

EDIT

What I am trying to do is that I have some OHLC data and I want to draw a candlestick chart or an OHLC chart any will work, and then I want to draw a trendline on top of it.

I currently don't have an Image for that but it might look like this

I just wanted to say also that I am not stuck with the google api, if you any other api that is capable of doing this please refer me to it, but free api of course.

It would better if the api let me draw what I want on it.

I choose the google api because it was plete and supported.

I am using google charts and am very new to the API, now the thing that will most likely work for my requirments is a Combo Chart, this chart is very good with everything but only one thing is very wierd,

When I try Lines with Candlesticks, no matter which one is in series and the other is in seriesType Candlesticks are always ontop of lines, is there any work around for this issue ?

EDIT

What I am trying to do is that I have some OHLC data and I want to draw a candlestick chart or an OHLC chart any will work, and then I want to draw a trendline on top of it.

I currently don't have an Image for that but it might look like this

I just wanted to say also that I am not stuck with the google api, if you any other api that is capable of doing this please refer me to it, but free api of course.

It would better if the api let me draw what I want on it.

I choose the google api because it was plete and supported.

• javascript
• svg
• google-visualization

1 Answer 1

This can be done with a bo chart.

Here is sample code:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Day');
  data.addColumn('number', 'Dummy');
  data.addColumn('number', 'Range');
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn('number', 'Trend');
  data.addRows([
    ['Mon', 28, 10, -8, 17, 42.8],
    ['Tue', 38, 17, -7, 28, 47.5],
    ['Wed', 55, 22, -5, 25, 52.2],
    ['Thu', 66, 11, -16, 11, 56.9],
    ['Fri', 22, 44, -7, 44, 61.6],
  ]);

  // Create and draw the visualization.
  var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
  ac.draw(data, {
    title : 'Monthly Coffee Production by Country',
    width: 600,
    height: 400,
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    isStacked: true,
    seriesType: "bars",
    series: {0: {color: 'transparent'}, 2: {type: "line"}}
  });
}

This is the result:

Adjust as needed (bining with the below tactics if needed).

Pre-Edit Answer Below

Currently z-index is not supported for Google Visualization API. See this ticket from April 2012.

If you need to use a ComboChart there are potential workarounds, but there is a good chance you won't like them.

Option 1: Create custom javascript

You can edit the svg that Google Visualization creates with javascript. According to this question you can change the z-index of elements by moving their order up in the SVG. So you'd have to:

1. Find the svg representing the candlestick elements
2. Find out where the last item you want it behind is
3. Move the candlestick elements behind that item in the svg

This is obviously a headache (especially if you look at the svg formatting of the resulting chart in something like firebug).

Option 2: Creative CSS

This is a bit simpler to implement, but has its own set of pitfalls (performance, patibility across browsers, etc.).

Create two charts, one with just the candlesticks, one with the bars and candlesticks.

Make sure the scales of each chart are the same.

Use the CSS Z-index to put the chart with the candlesticks below the other chart.

Make sure the top chart is transparent, and nothing like labels, legends, or other chart junk is duplicated across the charts.

On the top chart, make the candlestick bars invisible (you want them there so that the values of the bars are displayed, but you don't want to see them as they'd be on top). There are many ways to do this (making the line width 0, making the color transparent, or something of the sort).

Create an event on the top chart that links the mouseover event to select the same series on the bottom chart, so that it looks to the user like you have one chart (since they both interact as one chart).

This will hurt performance because you are rendering two charts, and transparent backgrounds don't work on some version of IE. It also means a lot more work on the actual chart code, because you have to line up the charts and make sure that it won't break depending on how you change the data.

3) Simplest Option: Use the Candlestick Chart

You can do this with the Candlestick Chart as well. It may be a bit more limited than a ComboChart, but it does allow you to put the 'bars' in front of the 'sticks' as it were.