How do I put JSON values on a graph in HTML5?

Asked

Viewed 988 times

1

// Classe para chamar o Json.
function json(){
	var qtd;
	var retorno;

	// Resgatar valores.
	json.prototype.resgatarValores = function(){
		$('#resultado').html('Carregando dados...');

		// Estrutura de resultado.
		$.getJSON('/webpro/webadm/lncidjson', function(data){
			this.qtd = data.usuarios.length - 1;
			this.valore = '';
			this.label = '';

			for (i = 0; i < this.qtd; i++){
				if(i == (this.qtd - 1)) {
					this.valore += data.usuarios[i].valor;
					this.label += data.usuarios[i].descr;
				} 
				else {
					this.valore += data.usuarios[i].valor + ',';
					this.label += data.usuarios[i].descr + ',';
				}
			}

			$('#valor').html(this.valore);
			$('#label').html(this.label);
		});

	}

}

// Objeto.
var obj = new json();
obj.resgatarValores();
body {
    font-family: Arial;
}

pre.code {
    padding: 5px;
    background-color: #eee;
    border: 2px dashed gray;
}
<script src="RGraph/libraries/RGraph.common.core.js" ></script>
<script src="RGraph/libraries/RGraph.common.dynamic.js" ></script>
<script src="RGraph/libraries/RGraph.common.tooltips.js" ></script>
<script src="RGraph/libraries/RGraph.line.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.3.2", {uncompressed:true});
</script>
<script type="text/javascript" src="json.class.js"></script>

<!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->

<p style="margin-left:50em;"><title>Cotação USD x BRL</title></p>

<meta name="robots" content="noindex,nofollow" />
<meta name="Descrição" content="Cotação do Dolar de Acordo com o Real" />
 
</head>
<body>

<h2></h2>

<canvas id="cvs" width="900" height="300">[No canvas support]</canvas>

  </script>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
		google.load("jquery", "1.3.2", {uncompressed:true});
	</script>
	<script type="text/javascript" src="json.class.js"></script>

    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <p style="margin-left:50em;"><title>Cotação USD x BRL</title></p>
    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="Descrição" content="Cotação do Dolar de Acordo com o Real" />
     
</head>
<body>

    <h2></h2>

    <canvas id="cvs" width="900" height="300">[No canvas support]</canvas>
    
    <script>
        $(document).ready(function ()
        {
		
            var data     =  [document.getElementById('valor').value];
            var tooltips = [];
            //var data     = [2.59,2.60,2.40,2.67,1.78];
 
				
            // Create the tooltips
            for (var i=0; i<data.length; i+=1) {
                tooltips[i] = '1 USD = ' + String(data[i] + ' Reais')
            }

            var line = new RGraph.Line({
                id: 'cvs',
                data: data,
                options: {
                    tooltips: {
                        self: tooltips,
                        highlight: false
                    },
                    colors: ['#058DC7'],
                    filled: true,
                    fillstyle: 'rgba(229,243,249,0.5)',
                    tickmarks: 'filledcircle',
                    background: {
                        grid: {
                            vlines: false,
                            border: false,
                            autofit: {
                                numhlines: 10
                            }
                        }
                    },
                    shadow: false,
                    linewidth: 3,
                    gutter: {
                        left: 50,
                        right: 20
                    },
                    numxticks: 0,
                    ylabels: {
                        count: 5
                    },
                    axis: {
                        color: '#aaa'
                    },
                    text: {
                        color: '#aaa'
                    },
                    labels: ['21/01','22/01','23/01','24/01','25/01']
                }
            })
            
            RGraph.ISOLD ? line.draw() : line.trace2();
		
        })
		
    </script>
	
	<div id="valor"></div>        
	<div id="label"></div>
	
    
</body>
</html>

javascript html html5 json

  • Could you elaborate your question a little more? What do you mean by 'send to a Javascript'? I imagine you’re referring to the collection data.usuarios, correct?

  • I have this Array and I want to get the result of it in javascript !

  • 2

    Do you want to work with the return of $.getJSON is that it? It’s a little confusing your question.

  • Elisson, JSON is nothing more than a notation based on Javascritp objects (Javascript Object Notation). If the JSON returned after the execution of the method getJSON is correct, then the parameter data contains the JSON object itself and the property data.usuarios already contains the array. Nothing needs to be done to convert this value.

  • Edit your code and keep only the parts relevant to the question.

  • Tell which library you’re using to generate the graphics, it’s hard to guess.

  • The libraries used are in the code that was edited as requested !

  • @Elisson You edited the code. But now, what is the question?

  • My problem is the following in Javascript has the variable "date" if placed the direct values in it the graph works normal, more accurate take these values from Json. But I don’t know how to take and send to the variable from Json

Show 4 more comments
No answers

Browser other questions tagged javascript html html5 json

You are not signed in. Login or sign up in order to post.