json Pegar valores do json e para um arquivo javascript

[Lopes1993]

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