Area and scatter chart on a single graph

[cd2012]

I need to plot an area chart and a scatter chart on the single graph.
Each chart will have its own axes. Is there any support for this in
the Google Visualization API?

[asgallant]

I'm afraid that this is not (yet?) possible.  Using the ScatterCharts, you can have some series represented by lines (not areas), but they don't support multiple vertical axes.  Area charts do support multiple veritical axes, but there is no way to combine them with ScatterCharts as of yet.  ComboCharts have started us down this road, though, so hopefully this will be available at some point in the future.

[Jinji]

Mixing ScatterChart and AreaChart isn't currently possible, and also isn't planed, and I want to take this opportunity to explain the rationale behind it.

Area/Line/Column/Bar/SteppedArea/Candlestick charts are all "function charts". "Function" as in "mathematical function" - something that maps values from some domain to target values. The domain can be either discrete or continuous, and each domain value has exactly one target value (or null). Each function chart can have multiple series, where each series is a single mathematical function, configured by the series option, and all series in the chart share the same domain. ComboChart is a function chart where each series can be of different type, from the above types (yes, all of the above types, the docs are out-dated).

ScatterChart, on the other hand, is not a function chart. Each "domain" value can have multiple "target" values, even within the same series (and therefor the terms "domain" and "target" aren't really accurate for scatter chart). That's why scatter chart and function charts don't mix, at least not easily.

That said, you can try a ComboChart with 2 series, one of them configured with {type: 'area'} and the other configured with {type: 'line', lineWidth: 0, pointSize: 7}. This might be good enough for you.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/MhNys9U3NMMJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[cd2012]

Thanks. Those responses were very helpful.
To give you some insight of what I'm trying to do.. I'm plotting an
area chart that defines the good region in my graph. And then I need
to trace points that fall inside/outside the good region which will
end up becoming a scatter chart. That is where combining the two is
needed for my purposes.

I do think that your suggestion on using area+line as a ComboChart
might work for me, so I will certainly give that a try.

Thanks!

On Mar 29, 9:16 am, Jinji <ji...@google.com> wrote:
> Mixing ScatterChart and AreaChart isn't currently possible, and also isn't
> planed, and I want to take this opportunity to explain the rationale behind
> it.
>
> Area/Line/Column/Bar/SteppedArea/Candlestick charts are all "function
> charts". "Function" as in "mathematical function" - something that maps
> values from some domain to target values. The domain can be either discrete

> or continuous<http://code.google.com/apis/chart/interactive/docs/customizing_axes.h...>,

> and each domain value has exactly one target value (or null). Each function
> chart can have multiple series, where each series is a single mathematical
> function, configured by the series option, and all series in the chart
> share the same domain. ComboChart is a function chart where each series can
> be of different type, from the above types (yes, all of the above types,
> the docs are out-dated).
>
> ScatterChart, on the other hand, is not a function chart. Each "domain"
> value can have multiple "target" values, even within the same series (and
> therefor the terms "domain" and "target" aren't really accurate for scatter
> chart). That's why scatter chart and function charts don't mix, at least
> not easily.
>
> That said, you can try a ComboChart with 2 series, one of them configured
> with {type: 'area'} and the other configured with {type: 'line', lineWidth:
> 0, pointSize: 7}. This might be good enough for you.
>

[asgallant]

Y'know, I hadn't thought of that, but I suppose its a pretty good reason.  How would the Bar charts work with the others in a combo, though, given that they work on a different axis?

[Jinji]

Ah, yes. When I said "ComboChart supports all of the above types" I forgot bar chart is also on that list :) By "all" I meant "including stepped-area and candlestick". Anyway, column chart is supported, and that's what makes sense.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/Cj07tOYyNZYJ.

[asgallant]

D'oh!  I answered the other thread a bit too soon >;o)

Now I remember this one.  You need to fix two things in your code:

1) You need a fifth column of data in your dataTable, as the candlesticks use 4 columns.

2) The series are zero-indexed, so there is no series "2" if you want one candlestick series and one line series.

Your code might look like this when done:

function drawVisualization() {
    // Populate the data table.
    var dataTable = google.visualization.arrayToDataTable([
        ['Mon', 20, 28, 38, 45, 30],
        ['Tue', 31, 38, 55, 66, 50],
        ['Wed', 50, 55, 77, 80, 45],
        ['Thu', 77, 77, 66, 50, 65],
        ['Fri', 68, 66, 22, 15, 80]
    // Treat first row as data as well.
    ], true);

    // Draw the chart.
    var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
    chart.draw(dataTable, {
        legend:'none',
        width:600,
        height:400,
        seriesType: 'candlesticks',
        series: {
            1: {
                type: 'line'
            }
        }
    });
}

On Tuesday, June 12, 2012 6:30:28 AM UTC-4, mallaravi wrote:

Hi...

   I tried creating line chart on candle stick chart.. in combo chart.. i have coded as given below.. but the output coming is only candlestick chart ...it is ignoring line chart series.. please help me to draw line chart on candle stick.. chart...

      function drawVisualization() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
                ['Mon', 20, 28, 38, 45],
                ['Tue', 31, 38, 55, 66],
                ['Wed', 50, 55, 77, 80],
                ['Thu', 77, 77, 66, 50],
                ['Fri', 68, 66, 22, 15],       
                ['Sat', 68, 66, 22, 15],       
                ['Sun', 69, 69, 29, 18]       
        ], true);
      
        // 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,
          seriesType: "candlesticks",
          series: {2: {type: "line"}}
        });
      }
      google.setOnLoadCallback(drawVisualization); 

Thanks and Regards,

Ravi Kumar Malla

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[mallaravi]

Hi Asgallant,

   Thanks a lot for the reply.. it worked :)...Thanks a ton again... Nice replies.. ":)..

Thanks and Regards,

Ravi Kumar Malla

[asgallant]

If you want to display only points, then you have two options:

1) use a LineChart and set the "lineWidth" option to 0 and the "pointSize" option to something larger than 0.

2) use a ScatterChart instead of a LineChart

On Tuesday, August 7, 2012 3:58:36 AM UTC-4, Lei WANG wrote:

gonna need a slight alter version of Line charts:

1.just print the point when there exits one ,don't  print anything if the corresponding data is null or "".

2. don't plot lines which connects these printed points

在 2012年3月29日星期四UTC+8下午9时16分14秒，Yuval Ronen写道：

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.