Как я могу взять строку GSON обратно в Highcharts

Я довольно новичок в том, что касается JS, jQuery и JSON, поэтому любая помощь очень ценится. У меня есть проект, над которым я пытаюсь работать с Highcharts, это JSF 2.2, RichFaces 4. У меня уже есть компонент поддержки, который извлекает данные из базы данных и помещает хранилище в коллекцию. Затем я преобразовываю коллекцию в строку GSON. Образец данных из распечатки объекта GSON

{"Цена пула":[{"date":"Date.UTC(2012,5,4,1)","data":"1144.144"},{"date":"Date.UTC(2012,5,4,2)","data":"1030.421"}], "RAPP":[{"date":"Date.UTC(2012,5,4,1)","data":"11.50"},{"дата": "Date.UTC (2012,5,4,2)", "данные":"10.87"}]}

Когда дело доходит до страницы, я разработал диаграмму в JSFiddle со страницы примера HighCharts и использовал некоторые жестко запрограммированные значения, чтобы получить правильный внешний вид и дизайн.

Моя проблема сейчас - получение данных от бина-бина в верхние чарты. Моя страница сейчас выглядит так

<h:head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <script src="http://code.highcharts.com/stock/highstock.js"></script>

    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
   <script type="text/javascript">
    $(document).ready(function() {
        function chartdata() {

           console.log("Grabbing chart data");
           var data = jQuery("#chartvalue").attr('value');

             }
         });
    </script>
</h:head>
<h:body>
    <h:form prependId="false" >

<a4j:commandButton value="LoadData" oncomplete="chartdata();" action="#{dailyReportBean.loadChartData}" id="chartvalue_btn" />
<h:inputHidden value="#{dailyReportBean.json}" id="chartvalue"  />

        <div id="container">
            <script src="DR_PoolPrice_Graph.js" type="text/javascript"></script>
        </div>
    </h:form>
</h:body>

Предустановленный файл JS со значениями, закодированными, загружается нормально. Таким образом, проблема заключается только в том, что происходит доступ к данным из chartdata() в файл highcharts, и как я на это ссылаюсь.

Вот как выглядит файл highcharts

$(function() {
Highcharts.setOptions({
    colors: ['#FFFFCC','#799ECD',]
});

var chart = new Highcharts.StockChart({

    chart: {
        renderTo: 'container',
        backgroundColor: '#FCD5B5',
        borderColor: 'EBBA95',
        borderWidth: 2,
        borderRadius: 10,
        spacingLeft: 40,
        spacingRight: 20,
        zoomType: 'x',
        plotBorderColor: '#346691',
        plotBorderWidth: 1,
        plotBackgroundColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(200, 200, 255)']
                ]
        }
    },

    title: {
        text: 'Price'
    },

    rangeSelector: {
        enabled: false
    },

    yAxis: {
        labels: {
            x: -25
        }
    },

    legend: {
        enabled: true,
        floating: false,
        align: 'center',
        backgroundColor: '#FCFFC5',
        borderColor: 'black',
        borderWidth: 1,
        layout: 'horizontal',
        verticalAlign: 'bottom',
        y: 0,
        shadow: true
    },

    navigator: {
        enabled: false
    },

    scrollbar: {
        enabled: false
    },

    navigation: {
        buttonOptions: {
            align: 'right'
        }
    },

    series: [{
        name: 'RAPP',
        data: rapp,
        type: 'area'},
        {
        name: 'Pool Price',
        data: poolprice},
    ]
});
});

Я сожалею, что это довольно большой пост, я просто хотел быть тщательным, так как я пытался взглянуть на эту кучу разных способов, и он просто не для меня. Я уверен, что это что-то глупое.

Спасибо за любой вклад, который вы можете предоставить!

2 ответа

Решение
/*Ajax call to get the Chart data in JSON Format */
function getJsonChartData(str ) 
           {

    var http_request = new XMLHttpRequest();
    http_request.open("GET", "drawChart.php?client_name="+str, true);

    http_request.onreadystatechange = function() {
        var done = 4, ok = 200;
        if(http_request.readyState == done && http_request.status == ok) {
            my_JSON_object = JSON.parse(http_request.responseText);  // JS json Object to capture the returning json text 
                chart.showLoading(); // show loading image on chart

            /***************** setting data to chart dynamically *************/


            chart.series[1].setData(my_JSON_object[5]); //should be 5

            chart.series[2].setData(my_JSON_object[4]);

            chart.series[3].setData(my_JSON_object[1]);

            chart.series[4].setData(my_JSON_object[0]);

            chart.series[5].setData(my_JSON_object[2]);

                chart.series[6].setData(my_JSON_object[3]);

            chart.xAxis[0].setCategories(my_JSON_object[6]); 



        }
    };
    http_request.send(null);

}

Я разобрался с вашим вопросом, но не получил того, что вам действительно нужно, в любом случае, если вы пытаетесь динамически загружать данные старшей диаграммы из файла JS, лучше всего сделать вызов ajax и получить данные как объект JSON, а затем установить эти данные вручную, ссылаясь на приведенный выше пример объекта диаграммы highchart, - вот как я использовал их для установки данных через php-файл, надеюсь, это поможет:)

Вам необходимо обновить <h:inputHidden> по запросу ajax, чтобы jQuery получил обновленное значение.

<a4j:commandButton ... render="chartvalue" />

Проще просто передать это в качестве аргумента в oncomplete:

<a4j:commandButton ... oncomplete="chartdata(#{dailyReportBean.json})" />

с

<script type="text/javascript">
    function chartdata(data) {
        console.log("Chart data already retrieved: " + data);
    }
</script>
Другие вопросы по тегам