JSon Data:
{
"identifier": "instance_name",
"items": [
{
"version_name": "16.11.0.0-b354",
"instance_name": "osvc_okcsqb990",
"site_capacity": 2,
"connected_sites": 0,
"sites_overload_factor": 0
},
{
"version_name": "16.5.4.2-b2",
"instance_name": "osvc_okcsqb1400",
"site_capacity": 2,
"connected_sites": 1,
"sites_overload_factor": 0.5
},
{
"version_name": "17.11.0.0-b269",
"instance_name": "seo_ora18i",
"site_capacity": 0,
"connected_sites": 1,
"sites_overload_factor": 1
},
{
"version_name": "17.11.0.0-b332",
"instance_name": "osvc_okcsqb1402",
"site_capacity": 4,
"connected_sites": 4,
"sites_overload_factor": 1
},
{
"version_name": "17.11.0.0-b332",
"instance_name": "osvc_okcsqb1430",
"site_capacity": 1,
"connected_sites": 0,
"sites_overload_factor": 0
},
{
"version_name": "17.11.0.0-b372",
"instance_name": "fusion_okcsqb517",
"site_capacity": 8,
"connected_sites": 6,
"sites_overload_factor": 0.75
},
{
"version_name": "17.11.0.0-b380",
"instance_name": "E2E_W05_1711GA_18800_qb1422",
"site_capacity": 8,
"connected_sites": 7,
"sites_overload_factor": 0.875
},
{
"version_name": "17.11.0.0-b380",
"instance_name": "fusion_okcsqb1141",
"site_capacity": 8,
"connected_sites": 7,
"sites_overload_factor": 0.875
},
{
"version_name": "17.11.0.0-b380",
"instance_name": "fusion_okcsqb1277",
"site_capacity": 4,
"connected_sites": 5,
"sites_overload_factor": 1.25
},
{
"version_name": "17.11.0.0-b380",
"instance_name": "fusion_okcsqb1433",
"site_capacity": 2,
"connected_sites": 3,
"sites_overload_factor": 1.5
},
{
"version_name": "17.11.0.0-b380",
"instance_name": "osvc_okcsqb1386",
"site_capacity": 8,
"connected_sites": 8,
"sites_overload_factor": 1
},
{
"version_name": "17.11.0.0-b52-int",
"instance_name": "fusion_okcsqb1348",
"site_capacity": 8,
"connected_sites": 1,
"sites_overload_factor": 0.125
},
{
"version_name": "17.2.4.0-b3",
"instance_name": "osvc_okcsqb1432",
"site_capacity": 1,
"connected_sites": 3,
"sites_overload_factor": 3
},
{
"version_name": "17.2.5.0-b67",
"instance_name": "osvc_okcsqb1440",
"site_capacity": 8,
"connected_sites": 10,
"sites_overload_factor": 1.25
},
{
"version_name": "17.5.1.0-b63",
"instance_name": "osvc_okcsqb1229",
"site_capacity": 4,
"connected_sites": 10,
"sites_overload_factor": 2.5
},
{
"version_name": "17.5.3.0-b9",
"instance_name": "okcsdata175",
"site_capacity": 8,
"connected_sites": 18,
"sites_overload_factor": 2.25
},
{
"version_name": "17.5.4.0-b11",
"instance_name": "175xiao",
"site_capacity": 8,
"connected_sites": 0,
"sites_overload_factor": 0
},
{
"version_name": "17.5.5.0-b4",
"instance_name": "osvc_okcsqb1428",
"site_capacity": 8,
"connected_sites": 0,
"sites_overload_factor": 0
},
{
"version_name": "17.5.5.0-b4",
"instance_name": "osvc_okcsqb1431",
"site_capacity": 1,
"connected_sites": 2,
"sites_overload_factor": 2
},
{
"version_name": "17.8.0.0-b238",
"instance_name": "Fusion_SD",
"site_capacity": 2,
"connected_sites": 2,
"sites_overload_factor": 1
},
{
"version_name": "17.8.0.0-b343",
"instance_name": "osvc_okcsqb1274",
"site_capacity": 1,
"connected_sites": 0,
"sites_overload_factor": 0
},
{
"version_name": "17.8.0.0-b352",
"instance_name": "osvc_okcsqb1396",
"site_capacity": 1,
"connected_sites": 1,
"sites_overload_factor": 1
},
{
"version_name": "17.8.2.0-b1schemaTest",
"instance_name": "SchemaProv",
"site_capacity": 1,
"connected_sites": 1,
"sites_overload_factor": 1
},
{
"version_name": "17.8.2.0-b21",
"instance_name": "osvc_okcsqb1373",
"site_capacity": 8,
"connected_sites": 4,
"sites_overload_factor": 0.5
},
{
"version_name": "17.8.2.0-b6",
"instance_name": "fusion_okcsqb1106",
"site_capacity": 8,
"connected_sites": 6,
"sites_overload_factor": 0.75
},
{
"version_name": "17.8.2.0-b6",
"instance_name": "fusion_okcsqb1161",
"site_capacity": 8,
"connected_sites": 4,
"sites_overload_factor": 0.5
},
{
"version_name": "17.8.2.0-b6",
"instance_name": "fusion_okcsqb1265",
"site_capacity": 8,
"connected_sites": 8,
"sites_overload_factor": 1
},
{
"version_name": "17.8.2.0-b6",
"instance_name": "fusion_okcsqb1275",
"site_capacity": 8,
"connected_sites": 7,
"sites_overload_factor": 0.875
},
{
"version_name": "17.8.2.0-b6",
"instance_name": "fusion_okcsqb1367",
"site_capacity": 1,
"connected_sites": 3,
"sites_overload_factor": 3
},
{
"version_name": "17.8.2.0-b6",
"instance_name": "fusion_okcsqb1415",
"site_capacity": 4,
"connected_sites": 3,
"sites_overload_factor": 0.75
},
{
"version_name": "17.8.2.0-b6",
"instance_name": "fusion_okcsqb518",
"site_capacity": 4,
"connected_sites": 6,
"sites_overload_factor": 1.5
},
{
"version_name": "17.8.2.0-b6",
"instance_name": "fusion_okcsqb942",
"site_capacity": 2,
"connected_sites": 6,
"sites_overload_factor": 3
},
{
"version_name": "17.8.3.0-b1",
"instance_name": "E2E_W01_178_22300_qb1441",
"site_capacity": 8,
"connected_sites": 0,
"sites_overload_factor": 0
},
{
"version_name": "17.8.3.0-b1",
"instance_name": "osvc_okcsqb1436",
"site_capacity": 8,
"connected_sites": 10,
"sites_overload_factor": 1.25
},
{
"version_name": "18.2.0.0-b100",
"instance_name": "osvc_okcsqb1390",
"site_capacity": 8,
"connected_sites": 0,
"sites_overload_factor": 0
},
{
"version_name": "18.2.0.0-b112",
"instance_name": "osvc_okcsqb1423",
"site_capacity": 8,
"connected_sites": 1,
"sites_overload_factor": 0.125
},
{
"version_name": "18.2.0.0-b130-int",
"instance_name": "idc_search_dev_182_instance",
"site_capacity": 8,
"connected_sites": 16,
"sites_overload_factor": 2
},
{
"version_name": "18.2.0.0-b143-int",
"instance_name": "osvc_okcsqb1426",
"site_capacity": 8,
"connected_sites": 9,
"sites_overload_factor": 1.125
},
{
"version_name": "18.2.0.0-b143-int",
"instance_name": "osvc_okcsqb1438",
"site_capacity": 8,
"connected_sites": 2,
"sites_overload_factor": 0.25
},
{
"version_name": "18.2.0.0-b3CleanClone",
"instance_name": "cleanclone182",
"site_capacity": 8,
"connected_sites": 4,
"sites_overload_factor": 0.5
}
]
}
require([
"dojo/dom",
"dojo/ready",
"dojo/dom-construct",
"dojo/request",
"dojo/json",
"dojo/data/ItemFileReadStore",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/Chart",
"dojox/charting/axis2d/Default",
"dojox/charting/Chart2D",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/Tooltip",
"dojox/charting/themes/MiamiNice",
"dojox/charting/widget/Legend",
"dojox/charting/action2d/Magnify",
"dojox/charting/themes/Claro",
"dojox/charting/themes/PlotKit/green"
],
function(dom, ready, domConstruct,
request, JSON, item_file_store, Memory, ObjectStore,
StackedColumns, Chart, Default, Chart2D, Highlight,
Tooltip, MiamiNice, Legend, Magnify, claroTheme, greenTheme) {
ready(function() {
request.get("data/qb/instances_in_versions.json", {
handleAs: "json"
}).then(function(data) {
objectItemStore = new ObjectStore({
objectStore: new Memory({
data: data.items
})
});
array_okcs_instance_counts = [];
array_fusion_instance_counts = [];
array_x_axis_label_names = [];
objectItemStore.fetch({
query: {
version_name: "*"
},
sort: [{
attribute: 'version_name',
descending: true
}],
onItem: function(item, request) {
var okcs_instance_count = objectItemStore.getValue(item, "OSVC_Instance_Count");
var fusion_instance_count = objectItemStore.getValue(item, "Fusion_Instance_Count");
if (okcs_instance_count === 0 && fusion_instance_count === 0) {
// do nothing
} else {
array_okcs_instance_counts.push(okcs_instance_count);
array_fusion_instance_counts.push(fusion_instance_count);
var label = objectItemStore.getValue(item, "version_name");
var obj = {};
obj.value = array_okcs_instance_counts.length;
obj.text = label;
array_x_axis_label_names.push(obj);
}
}
});
var obj1 = {};
obj1.value = array_okcs_instance_counts.length + 1;
obj1.text = "";
array_okcs_instance_counts.push(0);
array_fusion_instance_counts.push(0);
array_x_axis_label_names.push(obj1);
// identify the element in which you want to place the chart
var chartTitle = "Products Details"
var div_for_chart = document.getElementById('widget11_instances_in_versions_chart');
// create chart object in the specified html element object
var instances_in_versions_chart = new Chart2D(div_for_chart, {
title: chartTitle,
titlePos: "top",
titleGap: 25,
titleFont: "normal normal normal 15pt Arial",
titleFontColor: "blue"
})
instances_in_versions_chart.addPlot("stackedColumnsPlot", {
type: StackedColumns,
lines: true,
areas: true,
gap: 5,
markers: true,
tension: "S"
});
instances_in_versions_chart.addAxis("x", {
dropLabels: false,
includeZero: true,
microTicks: false,
majorLabel: false,
majorTicks: true,
majorTickStep: 1,
minorLabel: true,
minorTicks: false,
rotation: -30,
fixLower: "major",
fixUpper: "major",
font: "normal normal bold",
fontColor: "black",
max: array_fusion_instance_counts.length,
labels: array_x_axis_label_names
});
instances_in_versions_chart.addAxis("y", {
vertical: true,
fixLower: "major",
fixUpper: "major",
majorTickStep: 1,
includezero: false,
min: 0,
labelFunc: function(text, value, precision) {
var n = Number(text);
return n.toFixed(0);
}
});
instances_in_versions_chart.addSeries("OKCS Instances", array_okcs_instance_counts, {
plot: "stackedColumnsPlot",
stroke: {
color: "blue"
},
fill: "blue"
});
instances_in_versions_chart.addSeries("Fusion Instances", array_fusion_instance_counts, {
plot: "stackedColumnsPlot",
stroke: {
color: "green"
},
fill: "green"
});
// new Magnify(instances_in_versions_chart, "stackedColumnsPlot", {
// scale: 1.1
// });
new Highlight(instances_in_versions_chart, "stackedColumnsPlot");
new Tooltip(instances_in_versions_chart, "stackedColumnsPlot");
instances_in_versions_chart.setTheme(claroTheme);
instances_in_versions_chart.resize(490, 380);
instances_in_versions_chart.render();
});
});
});<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<!-- load Dojo -->
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
</head>
<table id="row-three-table" border="0" cellspacing="0" cellpadding="5" style="border:1px solid #fff;" width="960px">
<tr style="height:400px;">
<td style="width: 500px;border:1px solid #fff; border-width:1px 1px 0 0;">
<div id="cell-31" class="scrollable_cell">
<div id="widget31">31</div>
</div>
</td>
<td style="width: 200px;border:1px solid #ccc; border-width:1px 1px 0 0;">
<div id="cell-32" class="scrollable_cell">
<div id="widget32">33</div>
</div>
</td>
<td style="width: 200px;border:1px solid #ccc; border-width:1px 1px 0 0;">
<div id="cell-33" class="scrollable_cell">
<div id="widget33">33</div>
</div>
</td>
</tr>
</table>
Link to the sample stackedColumnsPlot chart here
