Google 图表 - ComboChart - 条形图和烛台
Google charts - ComboChart - bars and candlesticks
我尝试创建 ComboChart，其中包含条形图和一系列瀑布（烛台）图。
我不知道如何为此创建数据输入。
烛台需要这样的格式：
['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]
我的情况是：
['name', 'value', { role: 'style' }],
['test1', 8, '#00f'],
['test2', 10,'#000'],
['test3', 19,'#f00'],
有可能做到吗？加入柱形图和烛台 ?
- 使用
series选项控制每个系列图表类型
每个系列由数据中的一列或一组列表示
从不是 x 轴或列角色的第一列开始
示例：您描述的图表的列可能类似于以下...
"cols":[
// x-axis
{"label":"Category","type":"string"},
// bar series -- 0
{"label":"Bar 0","type":"number"},
// bar series -- 1
{"label":"Bar 1","type":"number"},
// waterfall series -- 2
{"label":"WF 2 - Bottom 1","type":"number"},
{"label":"WF 2 - Bottom 2","type":"number"},
{"label":"WF 2 - Top 1","type":"number"},
{"label":"WF 2 - Top 2","type":"number"},
{"role":"style","type":"string","p":{"role":"style"}},
// bar series -- 3
{"label":"Bar 3","type":"number"}
],
K线图需要4个柱子，在上面的例子中，也用到了样式柱子的作用，
因此，所有五列都被视为系列号 2
的一部分
- 为 combochart、
构建数据时
使用 null 作为系列值，
当它们与相同的 x 轴值不重合时
示例数据：
"rows":[
// bar (series 0 & 1) data
{"c":[{"v":"YTD"},{"v":14807893.054},{"v":11684139.912},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},
{"c":[{"v":"Last Year"},{"v":16307893.054},{"v":20684139.912},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},
// waterfall (series 2) data
{"c":[{"v":"Budget"},{"v":null},{"v":null},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"},{"v":null}]},
{"c":[{"v":"Contract Labor"},{"v":null},{"v":null},{"v":22707893.613},{"v":22707893.613},{"v":22534350.429},{"v":22534350.429},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Contract Non Labor"},{"v":null},{"v":null},{"v":22534350.429},{"v":22534350.429},{"v":22930956.493},{"v":22930956.493},{"v":"#922b21"},{"v":null}]},
{"c":[{"v":"Matls & Equip"},{"v":null},{"v":null},{"v":22930956.493},{"v":22930956.493},{"v":22800059.612},{"v":22800059.612},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Other"},{"v":null},{"v":null},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Labor"},{"v":null},{"v":null},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Travel"},{"v":null},{"v":null},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Training"},{"v":null},{"v":null},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"},{"v":null}]},
{"c":[{"v":"Actual"},{"v":null},{"v":null},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"},{"v":null}]},
// bar (series 3) data
{"c":[{"v":"FCST"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":16182561.25}]}
]
- 以下是包含条形图和烛台的组合图表的工作示例
google.charts.load('current', {
callback: function () {
drawChart();
$(window).resize(drawChart);
},
packages:['corechart', 'table']
});
function drawChart() {
var dataChart = new google.visualization.DataTable({
"cols":[
// x-axis
{"label":"Category","type":"string"},
// bar series -- 0
{"label":"Bar 0","type":"number"},
// bar series -- 1
{"label":"Bar 1","type":"number"},
// waterfall series -- 2
{"label":"WF 2 - Bottom 1","type":"number"},
{"label":"WF 2 - Bottom 2","type":"number"},
{"label":"WF 2 - Top 1","type":"number"},
{"label":"WF 2 - Top 2","type":"number"},
{"role":"style","type":"string","p":{"role":"style"}},
// bar series -- 3
{"label":"Bar 3","type":"number"}
],
"rows":[
// bar (series 0 & 1) data
{"c":[{"v":"YTD"},{"v":14807893.054},{"v":11684139.912},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},
{"c":[{"v":"Last Year"},{"v":16307893.054},{"v":20684139.912},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},
// waterfall (series 2) data
{"c":[{"v":"Budget"},{"v":null},{"v":null},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"},{"v":null}]},
{"c":[{"v":"Contract Labor"},{"v":null},{"v":null},{"v":22707893.613},{"v":22707893.613},{"v":22534350.429},{"v":22534350.429},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Contract Non Labor"},{"v":null},{"v":null},{"v":22534350.429},{"v":22534350.429},{"v":22930956.493},{"v":22930956.493},{"v":"#922b21"},{"v":null}]},
{"c":[{"v":"Matls & Equip"},{"v":null},{"v":null},{"v":22930956.493},{"v":22930956.493},{"v":22800059.612},{"v":22800059.612},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Other"},{"v":null},{"v":null},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Labor"},{"v":null},{"v":null},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Travel"},{"v":null},{"v":null},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Training"},{"v":null},{"v":null},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"},{"v":null}]},
{"c":[{"v":"Actual"},{"v":null},{"v":null},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"},{"v":null}]},
// bar (series 3) data
{"c":[{"v":"FCST"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":16182561.25}]}
]
});
var comboChart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'chart_div',
dataTable: dataChart,
options: {
animation: {
duration: 1500,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'transparent',
bar: {
group: {
width: '85%'
}
},
chartArea: {
backgroundColor: 'transparent',
bottom: 42,
height: '100%',
left: 60,
top: 24,
width: '100%'
},
hAxis: {
textStyle: {
fontSize: 12
}
},
height: 400,
legend: 'none',
seriesType: 'bars',
series: {
2: {
type: 'candlesticks'
}
},
tooltip: {
isHtml: true,
trigger: 'both'
},
vAxis: {
format: 'short',
textStyle: {
color: '#616161'
},
viewWindow: {
min: 10000000,
max: 24000000
}
},
width: '100%'
}
});
comboChart.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>
注意：您会注意到 运行 片段处于 全页 模式时，
该图表在对齐 x 轴标签方面做得不是很好
您可能能够操纵选项使它们更好地对齐，
但它 将 需要一些操作...
- 您可能会得到更好的结果，并排创建三个单独的图表
只需要确保每个都有相同的 vAxis 值，
如果需要，您可以隐藏额外的 vAxis 标签，等等...
同样，需要操纵
示例：片段在整页模式下显示效果最佳...
google.charts.load('current', {
callback: function () {
drawChart();
$(window).resize(drawChart);
},
packages:['corechart', 'table']
});
function drawChart() {
var dataBar0 = new google.visualization.DataTable({
"cols":[
{"label":"Category","type":"string"},
{"label":"Bar 0","type":"number"},
{"label":"Bar 1","type":"number"}
],
"rows":[
// bar 0 data
{"c":[{"v":"YTD"},{"v":22807893.054},{"v":18684139.912}]}
]
});
var barChart0 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'bar_chart_0',
dataTable: dataBar0,
options: {
animation: {
duration: 1500,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'transparent',
bar: {
gap: 20,
width: 60
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
legend: 'none',
theme: 'maximized',
tooltip: {
isHtml: true,
trigger: 'both'
},
vAxis: {
format: 'short',
viewWindow: {
min: 10000000,
max: 24000000
}
}
}
});
barChart0.draw();
var dataWF0 = new google.visualization.DataTable({
"cols":[
{"label":"Category","type":"string"},
{"label":"WF 2 - Bottom 1","type":"number"},
{"label":"WF 2 - Bottom 2","type":"number"},
{"label":"WF 2 - Top 1","type":"number"},
{"label":"WF 2 - Top 2","type":"number"},
{"role":"style","type":"string","p":{"role":"style"}}
],
"rows":[
{"c":[{"v":"Budget"},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"}]},
{"c":[{"v":"Other"},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"}]},
{"c":[{"v":"Labor"},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"}]},
{"c":[{"v":"Travel"},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"}]},
{"c":[{"v":"Training"},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"}]},
{"c":[{"v":"Actual"},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"}]}
]
});
var wfChart0 = new google.visualization.ChartWrapper({
chartType: 'CandlestickChart',
containerId: 'wf_chart_0',
dataTable: dataWF0,
options: {
animation: {
duration: 1500,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'transparent',
bar: {
gap: 20,
width: 60
},
chartArea: {
backgroundColor: 'transparent'
},
height: 400,
legend: 'none',
theme: 'maximized',
tooltip: {
isHtml: true,
trigger: 'both'
},
vAxis: {
format: 'short',
viewWindow: {
min: 10000000,
max: 24000000
}
},
width: '100%'
}
});
wfChart0.draw();
var dataBar1 = new google.visualization.DataTable({
"cols":[
{"label":"Category","type":"string"},
{"label":"Bar 0","type":"number"},
{"label":"Bar 1","type":"number"}
],
"rows":[
// bar 0 data
{"c":[{"v":"YTD"},{"v":20807893.054},{"v":19684139.912}]}
]
});
var barChart1 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'bar_chart_1',
dataTable: dataBar1,
options: {
animation: {
duration: 1500,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'transparent',
bar: {
gap: 20,
width: 60
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
legend: 'none',
theme: 'maximized',
tooltip: {
isHtml: true,
trigger: 'both'
},
vAxis: {
format: 'short',
viewWindow: {
min: 10000000,
max: 24000000
}
}
}
});
barChart1.draw();
}
.max-chart {
display: inline-block;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="max-chart" id="bar_chart_0"></div>
<div class="max-chart" id="wf_chart_0"></div>
<div class="max-chart" id="bar_chart_1"></div>
我尝试创建 ComboChart，其中包含条形图和一系列瀑布（烛台）图。 我不知道如何为此创建数据输入。 烛台需要这样的格式：
['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]
我的情况是：
['name', 'value', { role: 'style' }],
['test1', 8, '#00f'],
['test2', 10,'#000'],
['test3', 19,'#f00'],
有可能做到吗？加入柱形图和烛台 ?
- 使用
series选项控制每个系列图表类型
每个系列由数据中的一列或一组列表示
从不是 x 轴或列角色的第一列开始
示例：您描述的图表的列可能类似于以下...
"cols":[
// x-axis
{"label":"Category","type":"string"},
// bar series -- 0
{"label":"Bar 0","type":"number"},
// bar series -- 1
{"label":"Bar 1","type":"number"},
// waterfall series -- 2
{"label":"WF 2 - Bottom 1","type":"number"},
{"label":"WF 2 - Bottom 2","type":"number"},
{"label":"WF 2 - Top 1","type":"number"},
{"label":"WF 2 - Top 2","type":"number"},
{"role":"style","type":"string","p":{"role":"style"}},
// bar series -- 3
{"label":"Bar 3","type":"number"}
],
K线图需要4个柱子，在上面的例子中，也用到了样式柱子的作用，
因此，所有五列都被视为系列号 2
- 为 combochart、
构建数据时 使用null作为系列值，
当它们与相同的 x 轴值不重合时
示例数据：
"rows":[
// bar (series 0 & 1) data
{"c":[{"v":"YTD"},{"v":14807893.054},{"v":11684139.912},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},
{"c":[{"v":"Last Year"},{"v":16307893.054},{"v":20684139.912},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},
// waterfall (series 2) data
{"c":[{"v":"Budget"},{"v":null},{"v":null},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"},{"v":null}]},
{"c":[{"v":"Contract Labor"},{"v":null},{"v":null},{"v":22707893.613},{"v":22707893.613},{"v":22534350.429},{"v":22534350.429},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Contract Non Labor"},{"v":null},{"v":null},{"v":22534350.429},{"v":22534350.429},{"v":22930956.493},{"v":22930956.493},{"v":"#922b21"},{"v":null}]},
{"c":[{"v":"Matls & Equip"},{"v":null},{"v":null},{"v":22930956.493},{"v":22930956.493},{"v":22800059.612},{"v":22800059.612},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Other"},{"v":null},{"v":null},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Labor"},{"v":null},{"v":null},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Travel"},{"v":null},{"v":null},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Training"},{"v":null},{"v":null},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"},{"v":null}]},
{"c":[{"v":"Actual"},{"v":null},{"v":null},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"},{"v":null}]},
// bar (series 3) data
{"c":[{"v":"FCST"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":16182561.25}]}
]
- 以下是包含条形图和烛台的组合图表的工作示例
google.charts.load('current', {
callback: function () {
drawChart();
$(window).resize(drawChart);
},
packages:['corechart', 'table']
});
function drawChart() {
var dataChart = new google.visualization.DataTable({
"cols":[
// x-axis
{"label":"Category","type":"string"},
// bar series -- 0
{"label":"Bar 0","type":"number"},
// bar series -- 1
{"label":"Bar 1","type":"number"},
// waterfall series -- 2
{"label":"WF 2 - Bottom 1","type":"number"},
{"label":"WF 2 - Bottom 2","type":"number"},
{"label":"WF 2 - Top 1","type":"number"},
{"label":"WF 2 - Top 2","type":"number"},
{"role":"style","type":"string","p":{"role":"style"}},
// bar series -- 3
{"label":"Bar 3","type":"number"}
],
"rows":[
// bar (series 0 & 1) data
{"c":[{"v":"YTD"},{"v":14807893.054},{"v":11684139.912},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},
{"c":[{"v":"Last Year"},{"v":16307893.054},{"v":20684139.912},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},
// waterfall (series 2) data
{"c":[{"v":"Budget"},{"v":null},{"v":null},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"},{"v":null}]},
{"c":[{"v":"Contract Labor"},{"v":null},{"v":null},{"v":22707893.613},{"v":22707893.613},{"v":22534350.429},{"v":22534350.429},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Contract Non Labor"},{"v":null},{"v":null},{"v":22534350.429},{"v":22534350.429},{"v":22930956.493},{"v":22930956.493},{"v":"#922b21"},{"v":null}]},
{"c":[{"v":"Matls & Equip"},{"v":null},{"v":null},{"v":22930956.493},{"v":22930956.493},{"v":22800059.612},{"v":22800059.612},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Other"},{"v":null},{"v":null},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Labor"},{"v":null},{"v":null},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Travel"},{"v":null},{"v":null},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"},{"v":null}]},
{"c":[{"v":"Training"},{"v":null},{"v":null},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"},{"v":null}]},
{"c":[{"v":"Actual"},{"v":null},{"v":null},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"},{"v":null}]},
// bar (series 3) data
{"c":[{"v":"FCST"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":16182561.25}]}
]
});
var comboChart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'chart_div',
dataTable: dataChart,
options: {
animation: {
duration: 1500,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'transparent',
bar: {
group: {
width: '85%'
}
},
chartArea: {
backgroundColor: 'transparent',
bottom: 42,
height: '100%',
left: 60,
top: 24,
width: '100%'
},
hAxis: {
textStyle: {
fontSize: 12
}
},
height: 400,
legend: 'none',
seriesType: 'bars',
series: {
2: {
type: 'candlesticks'
}
},
tooltip: {
isHtml: true,
trigger: 'both'
},
vAxis: {
format: 'short',
textStyle: {
color: '#616161'
},
viewWindow: {
min: 10000000,
max: 24000000
}
},
width: '100%'
}
});
comboChart.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>
注意：您会注意到 运行 片段处于 全页 模式时，
该图表在对齐 x 轴标签方面做得不是很好
您可能能够操纵选项使它们更好地对齐，
但它 将 需要一些操作...
- 您可能会得到更好的结果，并排创建三个单独的图表
只需要确保每个都有相同的vAxis值，
如果需要，您可以隐藏额外的vAxis标签，等等...
同样，需要操纵
示例：片段在整页模式下显示效果最佳...
google.charts.load('current', {
callback: function () {
drawChart();
$(window).resize(drawChart);
},
packages:['corechart', 'table']
});
function drawChart() {
var dataBar0 = new google.visualization.DataTable({
"cols":[
{"label":"Category","type":"string"},
{"label":"Bar 0","type":"number"},
{"label":"Bar 1","type":"number"}
],
"rows":[
// bar 0 data
{"c":[{"v":"YTD"},{"v":22807893.054},{"v":18684139.912}]}
]
});
var barChart0 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'bar_chart_0',
dataTable: dataBar0,
options: {
animation: {
duration: 1500,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'transparent',
bar: {
gap: 20,
width: 60
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
legend: 'none',
theme: 'maximized',
tooltip: {
isHtml: true,
trigger: 'both'
},
vAxis: {
format: 'short',
viewWindow: {
min: 10000000,
max: 24000000
}
}
}
});
barChart0.draw();
var dataWF0 = new google.visualization.DataTable({
"cols":[
{"label":"Category","type":"string"},
{"label":"WF 2 - Bottom 1","type":"number"},
{"label":"WF 2 - Bottom 2","type":"number"},
{"label":"WF 2 - Top 1","type":"number"},
{"label":"WF 2 - Top 2","type":"number"},
{"role":"style","type":"string","p":{"role":"style"}}
],
"rows":[
{"c":[{"v":"Budget"},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"}]},
{"c":[{"v":"Other"},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"}]},
{"c":[{"v":"Labor"},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"}]},
{"c":[{"v":"Travel"},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"}]},
{"c":[{"v":"Training"},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"}]},
{"c":[{"v":"Actual"},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"}]}
]
});
var wfChart0 = new google.visualization.ChartWrapper({
chartType: 'CandlestickChart',
containerId: 'wf_chart_0',
dataTable: dataWF0,
options: {
animation: {
duration: 1500,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'transparent',
bar: {
gap: 20,
width: 60
},
chartArea: {
backgroundColor: 'transparent'
},
height: 400,
legend: 'none',
theme: 'maximized',
tooltip: {
isHtml: true,
trigger: 'both'
},
vAxis: {
format: 'short',
viewWindow: {
min: 10000000,
max: 24000000
}
},
width: '100%'
}
});
wfChart0.draw();
var dataBar1 = new google.visualization.DataTable({
"cols":[
{"label":"Category","type":"string"},
{"label":"Bar 0","type":"number"},
{"label":"Bar 1","type":"number"}
],
"rows":[
// bar 0 data
{"c":[{"v":"YTD"},{"v":20807893.054},{"v":19684139.912}]}
]
});
var barChart1 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'bar_chart_1',
dataTable: dataBar1,
options: {
animation: {
duration: 1500,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'transparent',
bar: {
gap: 20,
width: 60
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
legend: 'none',
theme: 'maximized',
tooltip: {
isHtml: true,
trigger: 'both'
},
vAxis: {
format: 'short',
viewWindow: {
min: 10000000,
max: 24000000
}
}
}
});
barChart1.draw();
}
.max-chart {
display: inline-block;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="max-chart" id="bar_chart_0"></div>
<div class="max-chart" id="wf_chart_0"></div>
<div class="max-chart" id="bar_chart_1"></div>