#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    6
    Rep Power
    0

    Function in JavaScript that outputs concat url to Chart Library Output


    I'm trying to properly write a function in JavaScript that outputs a concat'd url to Chart Library Output (for chart re-rendering)... based on selected options in dropdown list.

    Problem: I am not getting the chart to re-render with the concatenated url (which should be sent each time an option is selected in the dropdown).

    JavaScript code in head:

    Code:
    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 code for form (in body):

    Code:
    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 code for chart (write script in body to render YUI chart plug-in):

    Code:
    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>');
    Last edited by jacob22berk; October 22nd, 2012 at 06:14 PM. Reason: Clearly state the problem (more clearly) in the beginning
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    6
    Rep Power
    0

    Any js experts out there?


    Can somebody please have a look?

IMN logo majestic logo threadwatch logo seochat tools logo