Ir para conteúdo
Fórum Script Brasil
  • 0

Pegar valores do json e para um arquivo javascript


Lopes1993

Pergunta

Estou começando a mexer com Json, ate então nunca tinha desenvolvido com ele

estou com o seguinte problema

estou montando um gráfico de barra em html 5 e tenho que passar os valores do gráfico por json para o script que esta responsável de montar ele  no entanto não estou tendo sucesso

Segue meu arquivo Json

{
 "espacioB": 20,
    "anchoB": 20,
    "alturaC": 220,
    "nEtiquetasY": 6,
    "offsetX": 20,
    "anchoG": 550,
    "alturaG": 200
  
}

 

e o javascript no qual passo valores para montar o grafico

 

//trecho que tento passar o Json

$(window).load(function () {
    $(document).ready(function () {
        $.getJSON('arquivo.json', function (data) {
            $('#espacioB').html(data.espacioB);
            $('#anchoB').html(data.anchoB);
            $('#alturaC').html(data.alturaC);
            $('#nEtiquetasY').html(data.nEtiquetasY);
            $('#offsetX').html(data.offsetX);
            $('#anchoG').html(data.anchoG);
            $('#alturaG').html(data.alturaG);
        });
    });

    var maxVal,
            valoresG = [],
            etiquetasX = [],
            etiquetasY = [];

    var cv, ctx;

    function obtenerValores()
    {
        // Valores   
        $("#data tr td:nth-child(2)").each(function () {
            valoresG.push($(this).text());
        });

        //Etiquetas   
        $("#data tr td:nth-child(1)").each(function () {
            etiquetasX.push($(this).text());
        });
    }

    function initCanvas()
    {

        cv = $("#canvas").get(0);
        if (!cv)
        {
            return;
        }

        ctx = cv.getContext('2d');
        if (!ctx)
        {
            return;
        }
    }

    function valorMaximo(arr)
    {
        maxVal = 0;

        for (i = 0; i < arr.length; i++)
        {
            if (maxVal < parseInt(arr))
            {
                maxVal = parseInt(arr);
            }
        }

        maxVal *= 1.1;
    }

    function escalar(param)
    {
        return  Math.round((param / maxVal) * alturaG);
    }

    function x(param)
    {
        return (param * anchoB) + ((param + 1) * espacioB) + offsetX;
    }

    function y(param)
    {
        return alturaG - escalar(param);
    }

    function ancho()
    {
        return anchoB;
    }

    function altura(param)
    {
        return escalar(param);
    }

    function dibujarEtiquetasX()
    {
        ctx.save();
        ctx.font = "10px 'arial'";
        ctx.fillStyle = "#000";
        for (index = 0; index < valoresG.length; index++)
        {
            ctx.fillText(etiquetasX[index], x(index), alturaG + 17);
        }
        ctx.restore();
    }

    function dibujarEtiquetasY()
    {
        ctx.save();
        for (index = 0; index < nEtiquetasY; index++)
        {
            etiquetasY.push(Math.round(maxVal / nEtiquetasY * (index + 1)));
            ctx.fillStyle = "#000";
            ctx.fillText(etiquetasY[index], offsetX, y(etiquetasY[index]) + 10);
        }
        ctx.fillText("0", offsetX, alturaG + 7);
        ctx.restore();
    }

    function dibujarGraficoBarras()
    {
        for (index = 0; index < valoresG.length; index++)
        {
            ctx.save();
            ctx.fillStyle = "#B7B7B7";
            ctx.fillRect(x(index), y(valoresG[index]), ancho(), altura(valoresG[index]));
            ctx.restore();
        }
        $("#data").hide();
    }

    obtenerValores();
    initCanvas();
    valorMaximo(valoresG);
    dibujarEtiquetasX();
    dibujarEtiquetasY();
    dibujarGraficoBarras();
})

 

 

 

alguém teria alguma dica para me ajudar ? 

obrigado

 

 

 

 

 

 

 

 

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...