TypeError: Cannot use 'in' operator to search for 'color' in '2'


#1

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>
-------------------------------------------------------------------------------------------------------------------------------------------------- end of message...

#2

Any chance you could put this in a JSFiddle or a live demo link somewhere? It’s difficult to quickly setup a reasonable debug environment based on this information. Thanks!