Issue -
dojo.js:8 TypeError: Cannot use ‘in’ operator to search for ‘color’ in '2’
at Object.addMixin (SimpleTheme.js.uncompressed.js:332)
at Object. (SimpleTheme.js.uncompressed.js:328)
at Object.forEach (dojo.js:8)
at Object.addMixin (SimpleTheme.js.uncompressed.js:327)
at Object.render (Columns.js.uncompressed.js:153)
at Chart.js.uncompressed.js:955
at Object.foldr (fold.js.uncompressed.js:88)
at Object.fullRender (Chart.js.uncompressed.js:955)
at Object.render (Chart.js.uncompressed.js:896)
at widget1_chart_instances_in_versions_json_from_file.js:103
Files here:
json file: instances_in_versions_data (no extension)
{
“identifier”: “value”,
“items”: [
{“version”: “18.2.0.0-b130-int”, “value”: “1”, “okcs_instances”: “2”, “fusion_instances”: “1”},
{“version”: “18.2.0.0-b112”, “value”: “2”, “okcs_instances”: “3”, “fusion_instances”: “1”},
{“version”: “18.2.0.0-b100”, “value”: “3”, “okcs_instances”: “2”, “fusion_instances”: “0”},
{“version”: “17.11.0.0-b380”, “value”: “4”, “okcs_instances”: “0”, “fusion_instances”: “0”},
{“version”: “17.11.0.0-b372”, “value”: “5”, “okcs_instances”: “0”, “fusion_instances”: “2”},
{“version”: “17.8.2.0-b6”, “value”: “6”, “okcs_instances”: “2”, “fusion_instances”: “2”},
{“version”: “17.8.0.0-b22”, “value”: “7”, “okcs_instances”: “1”, “fusion_instances”: “6”},
{“version”: “17.2.5.0-b4”, “value”: “8”, “okcs_instances”: “3”, “fusion_instances”: “2”},
{“version”: “16.11.0.0-b354”, “value”: “9”, “okcs_instances”: “1”, “fusion_instances”: “2”}
]
}
js_file: widget1_chart_instances_in_versions_json_from_file.js
require([
“dojox/charting/Chart”,
“dojox/charting/plot2d/Lines”,
“dojox/charting/axis2d/Default”,
“dojox/charting/plot2d/StackedColumns”,
“dojox/charting/plot2d/Columns”,
“dojox/charting/action2d/Tooltip”,
“dojo/ready”,
“dojox/charting/widget/SelectableLegend”,
“dojo/dom-construct”,
“dojo/text!data/instances_in_versions_data”,
“dojo/json”,
“dojo/data/ItemFileReadStore”],
function(
Chart, Lines,
Default,
StackedColumns,
Columns,
Tooltip,
ready,
SelectableLegend,
domConstruct,
text_content_from_file,
JSON,
item_file_store) {
ready(function() {
// identify the element in which you want to place the chart
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 Chart(div_for_chart);
var string_content = JSON.stringify(text_content_from_file)
var json_parsed_data = JSON.parse(string_content, true)
var html_object_data = JSON.parse(json_parsed_data, true)
array_values = [];
array_versions = [];
array_okcs_instances = [];
array_fusion_instances = [];
json_data_store = new dojo.data.ItemFileReadStore({data: html_object_data});
json_data_store.fetch({
query: {value: "*"},
onItem: function(item, request) {
array_values.push("'"+json_data_store.getValue(item, "value")+"'");
array_versions.push("'"+json_data_store.getValue(item, "version")+"'");
array_okcs_instances.push("'"+json_data_store.getValue(item, "okcs_instances")+"'");
array_fusion_instances.push("'"+json_data_store.getValue(item, "fusion_instances")+"'");
}
});
alert("array_values: "+array_values+"\n"+
"array_versions: "+array_versions+"\n"+
"array_okcs_instances: "+array_okcs_instances+"\n"+
"array_fusion_instances: "+array_fusion_instances+"\n");
instances_in_versions_chart.addPlot("stackedColumnsPlot", {
type: StackedColumns,
lines: true,
areas: true,
markers: true,
gap: 5,
labels: true,
labelStyle:"outside",
tension: "S"
});
instances_in_versions_chart.addAxis("x", {
majorTicks:true,
majorTickStep:1,
minorTicks:true,
rotation: -30,
labels: array_versions
});
instances_in_versions_chart.addAxis("y", {
vertical: true
});
instances_in_versions_chart.addSeries("OKCS Instances", array_okcs_instances, {
plot: "stackedColumnsPlot",
stroke: {
color: "blue"
},
fill: "lightblue"
});
instances_in_versions_chart.addSeries("Fusion Instances", array_fusion_instances, {
plot: "stackedColumnsPlot",
stroke: {
color: "green"
},
fill: "lightred"
});
new Tooltip(instances_in_versions_chart, "stackedColumnsPlot", {
text: function(chartItem) {
console.debug(chartItem);
return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: " + chartItem.y;
}
});
**instances_in_versions_chart.render();**
new SelectableLegend({
chart: instances_in_versions_chart,
horizontal: false
}, "widget11_instances_in_versions_chart_legend");
});
});
html file: index.html
<title>Snapshot</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<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>
<script src="js/widget1_chart_instances_in_versions_json_from_file.js"></script>
<div class="w3-bar w3-black" style="margin-top:20px;">
<button class="w3-bar-item w3-button tab_link w3-blue" onclick="openEnvironment(event, 'div_env_dv_tab')">DV
Env
</button>
<button class="w3-bar-item w3-button tab_link" onclick="openEnvironment(event, 'div_env_qb_tab')">QB Env
</button>
<button class="w3-bar-item w3-button tab_link" onclick="openEnvironment(event, 'div_env_do_tab')">DO Env
</button>
</div>
<div id="div_env_dv_tab" class="w3-container w3-border env">
<div id="div_label_dv">Lable - DV</div>
<div id="div_outer_table_sections_dv" class="table_div table_display">
<div id="table_div" style="width:100%; margin-top:20px;">
<div style="width:100%; background:#ccc; font-weight:900;">
<div style="padding:5px;">Table Top / Widgets</div>
</div>
<table id="table_env" width="100%" border="0" cellspacing="0" cellpadding="5"
style="border:1px solid #aaa;">
<!--<thead>-->
<!--<th style="border:1px solid #ccc; border-width:1px 1px 0 0;">Header Column 1</th>-->
<!--<th style="border:1px solid #ccc; border-width:1px 1px 0 0;">Header Column 2</th>-->
<!--<th style="border:1px solid #ccc; border-width:1px 1px 0 0;">Header Column 3</th>-->
<!--</thead>-->
<tbody>
<tr style="height:400px;">
<td style="width: 500px;border:1px solid #ccc; border-width:1px 1px 0 0;" valign="bottom" align="left">
<div id="widget11_instances_in_versions_chart" style="width: 500px; height: 350px;padding-top: 10px;"></div>
<div id="widget11_instances_in_versions_chart_legend"></div>
</td>
<td style="width: 500px;border:1px solid #ccc; border-width:1px 1px 0 0;">
<div id="widget12">12</div>
</td>
<td style="width: 500px;border:1px solid #ccc; border-width:1px 1px 0 0;">
<div id="widget13">13</div>
</td>
</tr>
<tr style="height:400px;">
<td style="width: 500px;border:1px solid #ccc; border-width:1px 1px 0 0;">
<div id="widget21">21</div>
</td>
<td style="width: 500px;border:1px solid #ccc; border-width:1px 1px 0 0;">
<div id="widget22">22</div>
</td>
<td style="width: 500px;border:1px solid #ccc; border-width:1px 1px 0 0;">
<div id="widget23">23</div>
</td>
</tr>
<tr style="height:400px;">
<td style="width: 500px;border:1px solid #ccc; border-width:1px 1px 0 0;">
<div id="widget31">31</div>
</td>
<td style="width: 500px;border:1px solid #ccc; border-width:1px 1px 0 0;">
<div id="widget32">33</div>
</td>
<td style="width: 500px;border:1px solid #ccc; border-width:1px 1px 0 0;">
<div id="widget33">33</div>
</td>
</tr>
<tr style="width: 500px;height:400px;">
<td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
<div id="widget41">41</div>
</td>
<td style="width: 500px;border:1px solid #ccc; border-width:1px 1px 0 0;">
<div id="widget42">42</div>
</td>
<td style="width: 500px;border:1px solid #ccc; border-width:1px 1px 0 0;">
<div id="widget43">43</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="div_outer_paragraph_sections_dv"><p>FYI - This is DV environment.</p></div>
</div>
<div id="div_env_qb_tab" class="w3-container w3-border env" style="display:none">
<div id="div_label_qb">Lable - QB</div>
<div id="div_outer_table_sections_qb" class="table_div"></div>
<div id="div_outer_paragraph_sections_qb"><p>FYI - This is QB environment.</p></div>
</div>
<div id="div_env_do_tab" class="w3-container w3-border env" style="display:none">
<div id="div_label_do">Lable - DO</div>
<div id="div_outer_table_sections_do" class="table_div"></div>
<div id="div_outer_paragraph_sections_do"><p>FYI - This is DO environment.</p></div>
</div>