Vertical bar chart
Used to compare related data sets.
[
{"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS, "colorIndex": 3}
]
HTML
<div class="border border-light" style="display: flex; flex-direction: column; height: 100%;">
<div class="chart_title">
<h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
<h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
</div>
<div id="barChart_holder_with_legend" style="flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; ">
<div id="barChart_holder" style="flex-grow: 1; flex-shrink: 1;">
<div id="barChart_chart" style="width:100%; height:100%; position: relative;"></div>
</div>
<div id="barChart_legend" style="min-width: 150px;"></div>
</div>
</div>
JavaScript / ODS Charts
///////////////////////////////////////////////////
// Used data
///////////////////////////////////////////////////
// this is the data to be displayed
var dataOptions = {
"xAxis": {
"type": "category",
"data": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun"
]
},
"yAxis": {},
"series": [
{
"data": [
10,
22,
28.8956454657,
23,
19,
15
],
"type": "bar"
}
]
};
///////////////////////////////////////////////////
// ODSCharts
///////////////////////////////////////////////////
// Build the theme
var themeManager = ODSCharts.getThemeManager({
mode: ODSCharts.ODSChartsMode.LIGHT,
categoricalColors: [
{"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS, "colorIndex": 3}
],
visualMapColor: ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
lineStyle: ODSCharts.ODSChartsLineStyle.SMOOTH,
cssTheme: ODSCharts.ODSChartsCSSThemes.BOOSTED5
});
// register this theme to echarts
echarts.registerTheme(themeManager.name , themeManager.theme);
// get the chart holder and initiate it with the generated theme
var div = document.getElementById('barChart_chart');
var myChart = echarts.init(div, themeManager.name, {
renderer: 'svg',
});
// Set the data to be displayed.
themeManager.setDataOptions(dataOptions);
// Manage window size changed
themeManager.manageChartResize(myChart, 'barChart_chart');
// Register the externalization of the tooltip/popup
themeManager.externalizePopover({
enabled: true,
shared: false,
tooltip: true,
axisPointer: ODSCharts.ODSChartsPopoverAxisPointer.none,
},
ODSCharts.ODSChartsPopoverManagers.BOOSTED5
);
// Display the chart using the configured theme and data.
myChart.setOption(themeManager.getChartOptions());
Horizontal bar chart
Used to compare related data sets.
[
{"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS, "colorIndex": 1}
]
HTML
<div class="border border-light" style="display: flex; flex-direction: column; height: 100%;">
<div class="chart_title">
<h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
<h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
</div>
<div id="barChartH_holder_with_legend" style="flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; ">
<div id="barChartH_holder" style="flex-grow: 1; flex-shrink: 1;">
<div id="barChartH_chart" style="width:100%; height:100%; position: relative;"></div>
</div>
<div id="barChartH_legend" style="min-width: 150px;"></div>
</div>
</div>
JavaScript / ODS Charts
///////////////////////////////////////////////////
// Used data
///////////////////////////////////////////////////
// this is the data to be displayed
var dataOptions = {
"yAxis": {
"type": "category",
"data": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun"
]
},
"xAxis": {},
"series": [
{
"data": [
10,
22,
28.8956454657,
23,
19,
15
],
"type": "bar"
}
]
};
///////////////////////////////////////////////////
// ODSCharts
///////////////////////////////////////////////////
// Build the theme
var themeManager = ODSCharts.getThemeManager({
mode: ODSCharts.ODSChartsMode.LIGHT,
categoricalColors: [
{"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS, "colorIndex": 1}
],
visualMapColor: ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
lineStyle: ODSCharts.ODSChartsLineStyle.SMOOTH,
cssTheme: ODSCharts.ODSChartsCSSThemes.BOOSTED5
});
// register this theme to echarts
echarts.registerTheme(themeManager.name , themeManager.theme);
// get the chart holder and initiate it with the generated theme
var div = document.getElementById('barChartH_chart');
var myChart = echarts.init(div, themeManager.name, {
renderer: 'svg',
});
// Set the data to be displayed.
themeManager.setDataOptions(dataOptions);
// Manage window size changed
themeManager.manageChartResize(myChart, 'barChartH_chart');
// Register the externalization of the tooltip/popup
themeManager.externalizePopover({
enabled: true,
shared: false,
tooltip: true,
axisPointer: ODSCharts.ODSChartsPopoverAxisPointer.none,
},
ODSCharts.ODSChartsPopoverManagers.BOOSTED5
);
// Display the chart using the configured theme and data.
myChart.setOption(themeManager.getChartOptions());
Vertical grouped bar chart
A grouped bar chart is used to compare values across multiple categories.
[
{"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS, "colorIndex": 0},
{"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS, "colorIndex": 0}
]
HTML
<div class="border border-light" style="display: flex; flex-direction: column; height: 100%;">
<div class="chart_title">
<h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
<h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
</div>
<div id="barChartGV_holder_with_legend" style="flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; ">
<div id="barChartGV_holder" style="flex-grow: 1; flex-shrink: 1;">
<div id="barChartGV_chart" style="width:100%; height:100%; position: relative;"></div>
</div>
<div id="barChartGV_legend" style="min-width: 150px;"></div>
</div>
</div>
JavaScript / ODS Charts
///////////////////////////////////////////////////
// Used data
///////////////////////////////////////////////////
// this is the data to be displayed
var dataOptions = {
"xAxis": {
"type": "category",
"data": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun"
]
},
"yAxis": {},
"series": [
{
"data": [
10,
22,
28.8956454657,
23,
19,
15
],
"type": "bar"
},
{
"data": [
28.8956454657,
23,
19,
15,
18,
12
],
"type": "bar"
}
],
"legend": {
"data": [
"label 0",
"label 1"
]
}
};
///////////////////////////////////////////////////
// ODSCharts
///////////////////////////////////////////////////
// Build the theme
var themeManager = ODSCharts.getThemeManager({
mode: ODSCharts.ODSChartsMode.LIGHT,
categoricalColors: [
{"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS, "colorIndex": 0},
{"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS, "colorIndex": 0}
],
visualMapColor: ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
lineStyle: ODSCharts.ODSChartsLineStyle.SMOOTH,
cssTheme: ODSCharts.ODSChartsCSSThemes.BOOSTED5
});
// register this theme to echarts
echarts.registerTheme(themeManager.name , themeManager.theme);
// get the chart holder and initiate it with the generated theme
var div = document.getElementById('barChartGV_chart');
var myChart = echarts.init(div, themeManager.name, {
renderer: 'svg',
});
// Set the data to be displayed.
themeManager.setDataOptions(dataOptions);
// Register the externalization of the legend.
themeManager.externalizeLegends(myChart, '#barChartGV_legend');
// Manage window size changed
themeManager.manageChartResize(myChart, 'barChartGV_chart');
// Register the externalization of the tooltip/popup
themeManager.externalizePopover({
enabled: true,
shared: false,
tooltip: true,
axisPointer: ODSCharts.ODSChartsPopoverAxisPointer.none,
},
ODSCharts.ODSChartsPopoverManagers.BOOSTED5
);
// Display the chart using the configured theme and data.
myChart.setOption(themeManager.getChartOptions());
Horizontal grouped bar chart
A grouped bar chart is used to compare values across multiple categories.
[
{"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS, "colorIndex": 0},
{"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS, "colorIndex": 0}
]
HTML
<div class="border border-light" style="display: flex; flex-direction: column; height: 100%;">
<div class="chart_title">
<h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
<h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
</div>
<div id="barChartGH_holder_with_legend" style="flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; ">
<div id="barChartGH_holder" style="flex-grow: 1; flex-shrink: 1;">
<div id="barChartGH_chart" style="width:100%; height:100%; position: relative;"></div>
</div>
<div id="barChartGH_legend" style="min-width: 150px;"></div>
</div>
</div>
JavaScript / ODS Charts
///////////////////////////////////////////////////
// Used data
///////////////////////////////////////////////////
// this is the data to be displayed
var dataOptions = {
"yAxis": {
"type": "category",
"data": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun"
]
},
"xAxis": {},
"series": [
{
"data": [
10,
22,
28.8956454657,
23,
19,
15
],
"type": "bar"
},
{
"data": [
28.8956454657,
23,
19,
15,
18,
12
],
"type": "bar"
}
],
"legend": {
"data": [
"label 0",
"label 1"
]
}
};
///////////////////////////////////////////////////
// ODSCharts
///////////////////////////////////////////////////
// Build the theme
var themeManager = ODSCharts.getThemeManager({
mode: ODSCharts.ODSChartsMode.LIGHT,
categoricalColors: [
{"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS, "colorIndex": 0},
{"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS, "colorIndex": 0}
],
visualMapColor: ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
lineStyle: ODSCharts.ODSChartsLineStyle.SMOOTH,
cssTheme: ODSCharts.ODSChartsCSSThemes.BOOSTED5
});
// register this theme to echarts
echarts.registerTheme(themeManager.name , themeManager.theme);
// get the chart holder and initiate it with the generated theme
var div = document.getElementById('barChartGH_chart');
var myChart = echarts.init(div, themeManager.name, {
renderer: 'svg',
});
// Set the data to be displayed.
themeManager.setDataOptions(dataOptions);
// Register the externalization of the legend.
themeManager.externalizeLegends(myChart, '#barChartGH_legend');
// Manage window size changed
themeManager.manageChartResize(myChart, 'barChartGH_chart');
// Register the externalization of the tooltip/popup
themeManager.externalizePopover({
enabled: true,
shared: false,
tooltip: true,
axisPointer: ODSCharts.ODSChartsPopoverAxisPointer.none,
},
ODSCharts.ODSChartsPopoverManagers.BOOSTED5
);
// Display the chart using the configured theme and data.
myChart.setOption(themeManager.getChartOptions());
Grouped bar chart with dataset
A grouped bar chart is used to compare values across multiple categories.
HTML
<div class="border border-light" style="display: flex; flex-direction: column; height: 100%;">
<div class="chart_title">
<h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
<h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
</div>
<div id="barChartdataset_holder_with_legend" style="flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; ">
<div id="barChartdataset_holder" style="flex-grow: 1; flex-shrink: 1;">
<div id="barChartdataset_chart" style="width:100%; height:100%; position: relative;"></div>
</div>
<div id="barChartdataset_legend" style="min-width: 150px;"></div>
</div>
</div>
JavaScript / ODS Charts
///////////////////////////////////////////////////
// Used data
///////////////////////////////////////////////////
// this is the data to be displayed
var dataOptions = {
"legend": {},
"tooltip": {},
"dataset": {
"source": [
[
"product",
"2015",
"2016",
"2017"
],
[
"Matcha Latte",
43.3,
85.8,
93.7
],
[
"Milk Tea",
83.1,
73.4,
55.1
],
[
"Cheese Cocoa",
86.4,
65.2,
82.5
],
[
"Walnut Brownie",
72.4,
53.9,
39.1
]
]
},
"xAxis": {
"type": "category"
},
"yAxis": {},
"series": [
{
"type": "bar"
},
{
"type": "bar"
},
{
"type": "bar"
}
]
};
///////////////////////////////////////////////////
// ODSCharts
///////////////////////////////////////////////////
// Build the theme
var themeManager = ODSCharts.getThemeManager({
mode: ODSCharts.ODSChartsMode.LIGHT,
categoricalColors: ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS,
visualMapColor: ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
lineStyle: ODSCharts.ODSChartsLineStyle.SMOOTH,
cssTheme: ODSCharts.ODSChartsCSSThemes.BOOSTED5
});
// register this theme to echarts
echarts.registerTheme(themeManager.name , themeManager.theme);
// get the chart holder and initiate it with the generated theme
var div = document.getElementById('barChartdataset_chart');
var myChart = echarts.init(div, themeManager.name, {
renderer: 'svg',
});
// Set the data to be displayed.
themeManager.setDataOptions(dataOptions);
// Register the externalization of the legend.
themeManager.externalizeLegends(myChart, '#barChartdataset_legend');
// Manage window size changed
themeManager.manageChartResize(myChart, 'barChartdataset_chart');
// Register the externalization of the tooltip/popup
themeManager.externalizePopover({
enabled: true,
shared: false,
tooltip: true,
axisPointer: ODSCharts.ODSChartsPopoverAxisPointer.none,
},
ODSCharts.ODSChartsPopoverManagers.BOOSTED5
);
// Display the chart using the configured theme and data.
myChart.setOption(themeManager.getChartOptions());