0

ドロップダウンリストで選択したオプションに基づいて、連結されたURLをチャートライブラリ出力(チャートの再レンダリング用)に出力する関数をJavaScriptで適切に記述しようとしています。

問題:連結されたURL(ドロップダウンでオプションが選択されるたびに送信される必要があります)を使用してグラフを再レンダリングできません。

頭の中のJavaScriptコード:

function httpGet(theUrl){var xmlHttp = null;

        xmlHttp = new XMLHttpRequest();         // instantiate request
        xmlHttp.open( "GET", theUrl, false );   // open url
        xmlHttp.send( null );                   // sending nothing
        return xmlHttp.responseText;            // return url's data as text
        };
    function selectFabric(){
            var urlString = "http://localhost:8083/tbl/sparqlmotion?id=LiabilityChart&arg1=";
            var fabrics = document.getElementById('fabrics');
            var selectedFabric = fabrics.options[fabrics.selectedIndex];
            var linkAddTogether = [urlString + selectedFabric.value];
            var linkResult = linkAddTogether[0];
            var result = httpGet(linkResult);
            if (selectedFabric.value != "nothing"){
                return linkResult;      // update begins        // document.write(linkAddTogether)
            };
        };

    function revive (key, value) {
        if (value.datatype == "http://www.w3.org/2001/XMLSchema#double" ||  // if datatype is this
        value.datatype == "http://www.w3.org/2001/XMLSchema#integer" ||     // or, this
        value.datatype == "http://www.w3.org/2001/XMLSchema#float")         // or, this
        {
            return (parseInt(value.value))      // if '#double', '#integer', or '#schema', then: 'vars' label + convert the datatype's float value to integer 
        }
        else if (value.type == 'literal')
        {
            return (value.value)        // if datatype's value is a literal: 'vars' label + return as a string
        }
        else if (value.datatype == 'http://www.w3.org/2001/XMLSchema#date') 
        {
            return value.value      // if "XMLSchema#date's" value is a literal: 'vars' label + return as a string
        }
        else 
        {
            return value        // if datatype is anything else: 'vars' label + return value as a string
        }
    };

    var scriptHead = ["YUI().use('charts',function(Y){var myDataValues=\n\n["];
    var scriptTail = ["\n];\n\nvar styleDef={series:{Stock:{line:{color:'#EEB647'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#222',alpha:0,wmode:'transparent'},over:{fill:{color:'#eee'},border:{color:'#000'},width:9,height:9}}},Liability:{line:{color:'#171944'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#222',alpha:0,wmode:'transparent'},over:{fill:{color:'#eee'},border:{color:'#000'},width:9,height:9}}},Shipment:{line:{color:'#ff0000',alpha:0,wmode:'transparent'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#ff0000',alpha:0,wmode:'transparent'},over:{fill:{color:'#ff0000',alpha:0,wmode:'transparent'},border:{color:'#000',alpha:0,wmode:'transparent'},width:16,height:16}}},Production:{line:{color:'#FFD700',alpha:0,wmode:'transparent'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#FFD700',alpha:0,wmode:'transparent'},over:{fill:{color:'#FFD700',alpha:0,wmode:'transparent'},border:{color:'#000',alpha:0,wmode:'transparent'},width:16,height:16}}},Order:{line:{color:'#006400',alpha:0,wmode:'transparent'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#006400',alpha:0,wmode:'transparent'},over:{fill:{color:'#006400',alpha:0,wmode:'transparent'},border:{color:'#000',alpha:0,wmode:'transparent'},width:16,height:16}}}}};var myAxes={dateRange:{keys:['date'],position:'bottom',type:'category',title:'Date Range',styles:{majorTicks:{display:'none'},label:{rotation:-45,margin:{top:5}},title:{fontSize:'90%'}}}};var mychart=new Y.Chart({dataProvider:myDataValues,interactionType:'planar',render:'#mychart',categoryKey:'Date',styles:styleDef,categoryType:'time',horizontalGridlines:{styles:{line:{color:'#fff'}}},verticalGridlines:{styles:{line:{color:'#fff'}}}})});\n\n"];
    var simpleHead = [scriptHead];
    var simpleTail = [scriptTail];
    var oldData = JSON.parse(result, revive);

フォームのHTMLコード(本文):

form style = "width:200px; color:#333; padding-right:5px; padding-bottom:2px; padding-left:55px; margin-top:0px; clear:none;" name = "properties" id = "properties"> select style = "width:160px; color:#333; clear:none; display:block;" name = "fabrics" id = "fabrics" onChange = "selectFabric()">

                    option value="nothing">Select Fabric END option

            option value="KOD23-4074-LV">KOD23-4074-LV END option

            option value="SGOD2-2858-LV">SGOD2-2858-LV END option

            option value="W-897-LV">W-897-LV END option

                    option value="FF-4084-LV">FF-4084-LV END option

                 END select
           END form        

チャートのJavaScriptコード(YUIチャートプラグインをレンダリングするためのスクリプトを本文に記述します):

document.write('\x3Cscript type="text/javascript" id="source">');
document.write(simpleHead[0] + '\n{Date: "' + oldData.results.bindings[0].date + '", Liability: ' + oldData.results.bindings[0].liability + ", Stock: " + oldData.results.bindings[0].stock + ", " + oldData.results.bindings[0].event + ": " + oldData.results.bindings[0].current + "}," + "\n\n");

document.write('\n{Date: "' + oldData.results.bindings[1].date + '", Liability: ' + oldData.results.bindings[1].liability + ", Stock: " + oldData.results.bindings[1].stock + ", " + oldData.results.bindings[1].event + ": " + oldData.results.bindings[1].current + "}," + "\n\n");

document.write('\n{Date: "' + oldData.results.bindings[2].date + '", Liability: ' + oldData.results.bindings[2].liability + ", Stock: " + oldData.results.bindings[2].stock + ", " + oldData.results.bindings[2].event + ": " + oldData.results.bindings[2].current + "}," + "\n\n");

document.write('\n{Date: "' + oldData.results.bindings[3].date + '", Liability: ' + oldData.results.bindings[3].liability + ", Stock: " + oldData.results.bindings[3].stock + ", " + oldData.results.bindings[3].event + ": " + oldData.results.bindings[3].current + "}," + "\n\n");

document.write('\n{Date: "' + oldData.results.bindings[4].date + '", Liability: ' + oldData.results.bindings[4].liability + ", Stock: " + oldData.results.bindings[4].stock + ", " + oldData.results.bindings[4].event + ": " + oldData.results.bindings[4].current + "}," + "\n\n");

document.write('\n{Date: "' + oldData.results.bindings[5].date + '", Liability: ' + oldData.results.bindings[5].liability + ", Stock: " + oldData.results.bindings[5].stock + ", " + oldData.results.bindings[5].event + ": " + oldData.results.bindings[5].current + "}," + "\n\n");

document.write('\n{Date: "' + oldData.results.bindings[6].date + '", Liability: ' + oldData.results.bindings[6].liability + ", Stock: " + oldData.results.bindings[6].stock + ", " + oldData.results.bindings[6].event + ": " + oldData.results.bindings[6].current + "}" + simpleTail[0] + "\n\n");

document.write('\x3C/script>');
4

0 に答える 0