JavaScriptで作成したカレンダーとEspressChartを連携させたもののサンプルをご紹介します。
▼カレンダーについて
カレンダーはすべてJavaScriptで作成されています。
JavaScriptはクライアントのブラウザで動作するので、サーバに負荷をかけることがありません。
※画面イメージ1
・土日、当日の体裁はCSSによって実現しています。
・カレンダー右上、左上の次月、前月をクリックすると、それぞれの月に遷移します。
・日付を茶色枠で囲ってあるのは、DBにデータがある場合です。DBのデータの取得は、カレンダーのJavaScriptからDWRというJavaScriptからJava(又はその逆)へのアクセスを可能にする技術を利用しています。
▼EspressChartについて
EspressChartは当社で販売しているチャート作成ツールです。
100%PureJavaで作られており、豊富なAPIが揃っています。
もちろんWebアプリケーションサーバでも使用することができます。
※画面イメージ2
※画面イメージ3
・カレンダー上のコードをクリックすると、EspressChartを使用したチャートが表示されます。
・チャートウィンドウはAjax技術を使用したフローティングウィンドウにより実現しています。
・カレンダー上のコードをクリックすると、その当該日付とコードをパラメータとしてチャート生成サーブレットに渡し、DBに接続してチャートを描画します。
関連するトピックス:
- レーダーチャートを円で表示する方法【Javaチャート・グラフ作成ツールEspressChart】
- ExcelチャートからWebチャートへの移行【Javaチャート・グラフ作成ツールEspressChart】
- サンプル・チャート集(特別編)【Javaチャート・グラフ作成ツールEspressChart】
- レーダーチャートの形として多角形ではなく、円表示オプション【Javaグラフ作成ツールEspressChart】
- 【新機能】 チャート、グラフに対してのグラデーション機能の向上【Javaグラフ作成ツールEspressChart】
- Espress 6.6 update 28 リリースノート
- EspressChartサンプル集サイト: 2006年版【Javaチャート・グラフ作成ツールEspressChart】
- 豊富な3Dチャートを、2Dチャート同様にサポート
- Espressシリーズ Ver7.0 update 4 リリースノート
- シリーズ別で分散チャートの色を変える【Javaチャート・グラフ作成ツールEspressChart】