Lets see if I can explain that better. You want a stacked ColumnChart with
some number of lines in it, each representing some percentage of the total,
right? To get columns and lines together in one chart, you have to use a
ComboChart. In a ComboChart, you assign a series type to each data series
to instruct the chart to draw columns (type "bars") or a line (type "line")
for that series. In your case, since you want all of the data series in
your base data set to be columns, you have to specify those series as type
"bar", which is what this section of code does:
var series = {};
var n = 0;
while (n < data.getNumberOfColumns() - 1) {
series[n] = {
type: 'bars'
};
n++;
}
You then want to add some line series, so you can do something like this:
// make the additional data series type "line"
series[n] = {
type: 'line'
};
series[n + 1] = {
type: 'line'
};
series[n + 2] = {
type: 'line'
};
Next, we want to define the data that the chart will use, so we create an
array of columns to draw from, starting with the base data:
// define the columns to use for the chart
var columns = [];
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
}
then we want to add on extra columns of data that calculate percentage
values of the existing data for the line series:
// add a 50% series
columns.push({
label: '50%',
type: 'number',
calc: function (dt, row) {
var sum = 0;
for (var i = 1; i < dt.getNumberOfColumns(); i++) {
sum += dt.getValue(row, i);
}
return sum * 0.5;
}
});
// add a 70% series
columns.push({
label: '70%',
type: 'number',
calc: function (dt, row) {
var sum = 0;
for (var i = 1; i < dt.getNumberOfColumns(); i++) {
sum += dt.getValue(row, i);
}
return sum * 0.7;
}
});
// add an 80% series
columns.push({
label: '80%',
type: 'number',
calc: function (dt, row) {
var sum = 0;
for (var i = 1; i < dt.getNumberOfColumns(); i++) {
sum += dt.getValue(row, i);
}
return sum * 0.8;
}
});
When we create the chart, we tell it to use the series and the columns that
we defined above:
var chart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'chart_div',
options: {
height: 400,
width: 600,
isStacked: true,
series: series
},
view: {
columns: columns
}
});
You end up with a chart that looks like this:
http://jsfiddle.net/asgallant/YVmtX/12/
On Friday, May 3, 2013 2:41:14 PM UTC-4, Minh Huynh wrote:
>
> Hi
> Could you explain it in different way, like more specific or simple? say
> what if I want 3 lines instead of one?
> Thank you
>
> On Friday, April 12, 2013 3:29:52 PM UTC-7, asgallant wrote:
>>
>> You certainly can do that; just switch to a ComboChart. Specify the
>> first n series as type "bars", where n is the number of project columns in
>> the DataTable, and then add one more series of type "line". You can then
>> use the ChartWrapper's "view" parameter to specify the columns to use for
>> the chart, which allows you to create a column which auto-calculates the
>> 70% point for you. See it with <http://jsfiddle.net/asgallant/YVmtX/10/>and
>> without <http://jsfiddle.net/asgallant/YVmtX/11/> the filter.
>>
>> On Friday, April 12, 2013 5:24:46 PM UTC-4, Minh Huynh wrote:
>>>
>>> To make it even worse, say if I put a dot somewhere in each column
>>> depending on (or using) the average value of that column (in my case, the
>>> standard is 70% x the total hours of the whole column). Then we connect the
>>> dots together with 1 line. I think it is called Line chart or something.
>>> Anyway, can that achievable? I mean this chart itself is pretty complicated
>>> already.
>>> Thanks
>>>
>>>
>>> On Friday, April 12, 2013 9:24:36 AM UTC-7, Minh Huynh wrote:
>>>>
>>>> Hello everyone. First off I'm sorry I cannot post the sample of the
>>>> chart that I need your help on creating.
>>>>
>>>> Every month I update this chart. It's a bar chart showing total number
>>>> of hours that my group of 25 people work on a certain a mount of project
>>>> in
>>>> a month. Looking at a particularly column (each col is each month) chart,
>>>> we can see how many hours the group spent on ea project. We have about 7
>>>> projects that my group is working on.
>>>>
>>>> So when I came to the group I only update the chart (in Excel by the
>>>> way), what I do is just add in another Excel column then click on the
>>>> chart
>>>> and drag the hightlight grid over this month so the chart changes to this
>>>> month. Problem is this month the chart broke, for some reason it just
>>>> broke
>>>> and we decide to re-create the chart not in Excel no more but on webpage.
>>>>
>>>> I'm fascinated by google chart, especially the interactive thing when I
>>>> move my mouse onto the chart and it shows the number.
>>>>
>>>> I played with Google chart for a while but i can only created simple
>>>> chart like pie, or bar.
>>>>
>>>> I would greatly appreciate if anyone can create a sample type of this
>>>> complicated chart.
>>>> Thank you
>>>>
>>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
