Javascriptカレンダ+EspressChartの連携【Javaチャート・グラフ作成ツールEspressChart】


JavaScriptで作成したカレンダーとEspressChartを連携させたもののサンプルをご紹介します。

▼カレンダーについて

カレンダーはすべてJavaScriptで作成されています。
JavaScriptはクライアントのブラウザで動作するので、サーバに負荷をかけることがありません。

※画面イメージ1

・土日、当日の体裁はCSSによって実現しています。
・カレンダー右上、左上の次月、前月をクリックすると、それぞれの月に遷移します。
・日付を茶色枠で囲ってあるのは、DBにデータがある場合です。DBのデータの取得は、カレンダーのJavaScriptからDWRというJavaScriptからJava(又はその逆)へのアクセスを可能にする技術を利用しています。

▼EspressChartについて

EspressChartは当社で販売しているチャート作成ツールです。
100%PureJavaで作られており、豊富なAPIが揃っています。
もちろんWebアプリケーションサーバでも使用することができます。

※画面イメージ2

※画面イメージ3

・カレンダー上のコードをクリックすると、EspressChartを使用したチャートが表示されます。
・チャートウィンドウはAjax技術を使用したフローティングウィンドウにより実現しています。
・カレンダー上のコードをクリックすると、その当該日付とコードをパラメータとしてチャート生成サーブレットに渡し、DBに接続してチャートを描画します。

関連するトピックス:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください