2012-03-05 3 views
1

Я стараюсь следовать советам @BalusC here. (Я пишу здесь сейчас, потому что он не связан с предыдущим вопросом).Как использовать базу данных в Javascript и JSF?

Так что мне нужно получить данные из моей базы данных и показать в диаграмме с помощью JavaScript, this is an example. Я просто делаю этот образец, поэтому я могу понять, как показать некоторые данные с серверной стороны на стороне клиента.

Мой боб:

@ManagedBean(name="reportc") 
@ViewScoped 
public class ReportControl implements Serializable { 
    private static final long serialVersionUID = 3269125738504434502L; 

    private String[] dataAsJson = {"1.3", "2.1", "1.3", "2.2", "1.4", "2.7", "1.5", "2.1", "1.6", "2.4", "1.9", "2.1"}; 

    public String getDataAsJson() { 
     Gson gson = new Gson(); 
     return gson.toJson(dataAsJson); 
    } 
} 

Чтобы понять файл spline-plot-bands.js.

<!DOCTYPE html> 
<html lang="en" 
    xmlns="http://www.w3.org/1999/xhtml" 
    ... 

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

     <h:outputScript>var data = ${reportc.dataAsJson};</h:outputScript> 
     <h:outputScript name="javascript/highchart/spline-plot-bands.js" /> 
    </h:head> 
    <h:body> 

    <h:outputScript name="javascript/highchart/highcharts.js" /> 
    <h:outputScript name="javascript/highchart/modules/exporting.js" /> 

    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> 

    </h:body> 
</html> 

Как вы можете увидеть в файле spline-plot-bands.js.

Все, что имеет значение для меня эта часть (я думаю):

series: [{ 
    name: 'Hestavollane', 
    data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1, 
     7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4, 
     8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5, 
     7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2, 
     3.0, 3.0] 

    }, { 
    name: 'Voll', 
    data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0, 
     0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 
     0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3, 
     3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4] 
    }] 

Как я мог послать что-то вроде этого с моей стороны сервера к этому JavaScript?

Я думаю, что я близок к тому, чтобы узнать, как использовать gson, javascript с jsf, но я до сих пор не понимаю, как это закончить. Может ли кто-нибудь помочь мне в этом?

ответ

1

JS ожидает double[], но Вы кормите String[]. Исправить это соответственно:

private double[] hestavollane = { 
    4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1, 
    7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4, 
    8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5, 
    7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2, 
    3.0, 3.0 
}; 

private double[] voll = { 
    0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0, 
    0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 
    0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3, 
    3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4 
}; 

public String getDataAsJson() { 
    Map<String, Object> data = new HashMap<String, Object>(); 
    data.put("hestavollane", hestavollane); 
    data.put("voll", voll); 
    return new Gson().toJson(data); 
} 

и редактировать файл spline-plot-bands.js использовать его вместо закодированных значений:

series: [{ 
    name: 'Hestavollane', 
    data: data.hestavollane 
}, { 
    name: 'Voll', 
    data: data.voll 
}] 
+0

WOW! Awesome Bauke, спасибо за то, что так поддерживаю моего друга. Он работает! Спасибо. –

+0

Добро пожаловать. – BalusC

1

Ключевая часть связанной статье, что вам нужно это:

<h:outputScript>var data = ${reportc.dataAsJson};</h:outputScript>