Fancy AreaChart
JAVAFX CURVED AREACHART
I came a cross this post from fxexperience ,and got inspired to build a chart that's feminine so to speak.This the graph.
I used the class CurvedFittedAreaChart from the netbeans project i downloded from fxexperience .
The styling/css is the only work i did.
chart_background
.chart {
-fx-background-color: linear-gradient(to left, black,grey);
-fx-padding: 15 25 15 15;
}
chart-plot-background
.chart-plot-background {
-fx-effect: dropshadow( gaussian , red , 10, 0.0 , 0 , 2 );
-fx-background-image: url("pink.png");
-fx-background-size: cover, auto;
-fx-background-position: 0% 0%, 0% 100%;
-fx-background-repeat: no-repeat, repeat;
-fx-background-position: 0% 0%, 0% 100%;
}
chart_area_symbol
The svg path was a png file downloaded from the web.I edited with inkscape and produce the svg path. quite simple.
.default-color0.chart-area-symbol {
-fx-shape:"M 345.53125 205.34375 C 340.19713 205.44942 334.75675 206.68212 329.59375 209.09375 C 315.79834 215.53757 307.0572 229.3149 307 244.65625 C 306.97267 251.98524 308.97951 258.58454 313.28125 265.25 C 315.78991 269.13713 322.47628 276.00507 325.09375 277.375 C 327.39419 278.579 327.29712 278.59382 331.15625 277.28125 C 336.34712 275.51572 340.47967 275.02678 348.21875 275.3125 C 353.15563 275.49477 356.16854 275.83595 358.59375 276.5 C 360.47389 277.01481 362.13937 277.46475 362.28125 277.46875 C 362.42314 277.47305 363.0121 276.28519 363.59375 274.84375 C 365.20006 270.863 368.88609 264.31316 371.4375 260.90625 C 373.43247 258.24235 377.08986 254.63857 383.40625 249.09375 C 384.98332 247.70932 385.19987 247.24982 385.375 245.0625 C 385.78086 239.99367 383.17214 230.81389 379.5 224.46875 C 372.2871 212.00547 359.16288 205.07371 345.53125 205.34375 z M 415.03125 255.40625 C 409.5893 255.40617 404.16281 256.6713 398.8125 259.21875 C 394.15446 261.43659 391.75995 263.10775 388 266.625 C 382.82407 271.46683 379.10903 277.53832 377.4375 283.9375 L 376.65625 286.96875 L 378.4375 289.53125 C 384.77444 298.50817 388.25539 308.0214 388.375 316.75 L 388.4375 320.71875 L 391.875 321 C 402.20979 321.85337 412.25247 325.21079 420.3125 330.53125 C 422.0418 331.67277 423.70038 332.625 424 332.625 C 426.14057 332.625 434.03255 328.92869 438.15625 326 C 449.77223 317.75022 456.33873 301.62969 453.6875 287.875 C 451.22593 275.10426 443.15128 264.71036 431.40625 259.21875 C 425.95763 256.67115 420.4732 255.40633 415.03125 255.40625 z M 275.9375 255.65625 C 273.71715 255.69103 271.57187 255.876 269.71875 256.25 C 254.76735 259.26753 243.32284 269.86569 239.09375 284.625 C 237.66506 289.61086 237.65913 299.27964 239.09375 304.5 C 241.04184 311.58885 244.83542 317.81799 250.46875 323.125 C 255.63491 327.99189 262.17805 331.368 269.28125 332.875 C 273.41272 333.75153 282.54703 333.40099 287.21875 332.1875 C 291.26939 331.13533 296.48341 328.53002 300.78125 325.375 L 303.6875 323.21875 L 303.75 317.3125 C 303.84367 308.54477 306.1003 301.14063 311.0625 293.28125 L 313.59375 289.25 L 308.90625 284.625 C 301.96722 277.75835 298.09189 272.10505 294.34375 263.34375 C 293.53941 261.4636 292.41317 259.43251 291.84375 258.84375 C 289.90541 256.83959 282.59854 255.55192 275.9375 255.65625 z M 346.78125 290.9375 C 345.36334 290.92323 343.87723 290.99052 342.28125 291.15625 C 336.33046 291.77419 333.64891 293.12275 328.3125 298.09375 C 322.56213 303.45036 319.8949 309.29557 319.875 316.6875 C 319.86774 319.37703 320.14504 322.00456 320.59375 323.53125 C 323.51792 333.4806 332.24884 341.45804 341.90625 343.03125 C 346.48625 343.77734 352.87714 342.75579 357.59375 340.5 C 361.06498 338.83984 367.47291 332.44478 369.4375 328.6875 C 373.08136 321.71858 373.2132 313.49232 369.8125 306.40625 C 367.72785 302.06245 366.0135 299.85224 362.375 296.8125 C 357.58929 292.81433 352.92553 290.99933 346.78125 290.9375 z M 389.375 336.59375 C 386.8755 336.55542 384.8714 336.75305 384.25 337.09375 C 383.68909 337.40129 382.49432 338.81093 381.59375 340.21875 C 377.06405 347.29981 368.36785 353.89343 359.1875 357.21875 C 357.62072 357.78628 356.34375 358.50494 356.34375 358.8125 C 356.34375 359.12005 356.75128 362.01888 357.25 365.25 C 358.76512 375.06633 358.33957 383.9616 356.03125 391.53125 L 354.8125 395.5 L 356.03125 397.28125 C 358.90688 401.62662 365.15694 407.39631 370.0625 410.21875 C 372.68797 411.72933 378.33042 413.64694 381.75 414.1875 C 383.17808 414.4132 387.2404 414.525 390.75 414.4375 C 395.81498 414.31124 397.71871 414.07467 400.0625 413.28125 C 417.14197 407.49951 428.71685 391.03408 427.75 373.875 C 427.41861 367.99382 426.5761 364.90495 423.8125 359.28125 C 417.3102 346.04964 403.29513 336.80726 389.375 336.59375 z M 309.59375 339.34375 L 304.84375 341.9375 C 296.69183 346.38935 290.72925 348.18327 280.65625 349.21875 L 274.5 349.84375 L 272.5625 352 C 269.96404 354.86302 266.80404 361.45625 265.34375 367.03125 C 264.28159 371.08624 264.17255 372.14617 264.375 377.03125 C 264.63687 383.35 265.40178 386.48997 267.90625 391.75 C 270.21216 396.59302 271.93185 399.10665 275.625 402.96875 C 280.78594 408.36578 286.74599 411.99233 293.375 413.78125 C 298.36355 415.12748 309.49543 414.63209 316 412.78125 C 320.34383 411.54525 324.8594 408.67684 329.75 404.03125 C 335.50482 398.56474 339.21191 392.87229 340.59375 387.40625 C 342.89903 378.28745 341.9811 363.75667 338.875 360.1875 C 338.2592 359.4799 336.17366 358.4044 333.59375 357.4375 C 323.61164 353.69638 317.73887 349.47264 311.1875 341.34375 L 309.59375 339.34375 z ";
-fx-padding:10px;
-fx-background-insets: 0, 2;
-fx-effect: dropshadow( gaussian , rgb(255,20,147) , 10, 0.0 , 0 , 2 );
-fx-background-color: red,yellow;
}
chart_area_line
.default-color0.chart-series-area-line {
-fx-stroke: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,0,255,1) 100%);
-fx-stroke-width: 3px;
}
chart_area_fill
.default-color0.chart-series-area-fill {
-fx-fill:red;
-fx-blend-mode:OVERLAY;
}
chart_axis_tickmarks
.axis {
-fx-tick-length: 0;
-fx-minor-tick-length: 0;
}
chart_axis_text
.axis Text{
-fx-fill: white;
-fx-font-size: 0.6em;
}
chart_legend
.chart-legend {
-fx-background-color: transparent;
-fx-padding: 20px;
-fx-text-fill: pink;
}
chart_legend_item
.chart-legend-item{
-fx-text-fill: pink;
}
chart_title
.chart-title {
-fx-text-fill: pink;
-fx-font-size: 1.6em;
-fx-font-weight:bold;
}
I came a cross this post from fxexperience ,and got inspired to build a chart that's feminine so to speak.This the graph.
I used the class CurvedFittedAreaChart from the netbeans project i downloded from fxexperience .
The styling/css is the only work i did.
chart_background
.chart {
-fx-background-color: linear-gradient(to left, black,grey);
-fx-padding: 15 25 15 15;
}
chart-plot-background
.chart-plot-background {
-fx-effect: dropshadow( gaussian , red , 10, 0.0 , 0 , 2 );
-fx-background-image: url("pink.png");
-fx-background-size: cover, auto;
-fx-background-position: 0% 0%, 0% 100%;
-fx-background-repeat: no-repeat, repeat;
-fx-background-position: 0% 0%, 0% 100%;
}
chart_area_symbol
The svg path was a png file downloaded from the web.I edited with inkscape and produce the svg path. quite simple.
.default-color0.chart-area-symbol {
-fx-shape:"M 345.53125 205.34375 C 340.19713 205.44942 334.75675 206.68212 329.59375 209.09375 C 315.79834 215.53757 307.0572 229.3149 307 244.65625 C 306.97267 251.98524 308.97951 258.58454 313.28125 265.25 C 315.78991 269.13713 322.47628 276.00507 325.09375 277.375 C 327.39419 278.579 327.29712 278.59382 331.15625 277.28125 C 336.34712 275.51572 340.47967 275.02678 348.21875 275.3125 C 353.15563 275.49477 356.16854 275.83595 358.59375 276.5 C 360.47389 277.01481 362.13937 277.46475 362.28125 277.46875 C 362.42314 277.47305 363.0121 276.28519 363.59375 274.84375 C 365.20006 270.863 368.88609 264.31316 371.4375 260.90625 C 373.43247 258.24235 377.08986 254.63857 383.40625 249.09375 C 384.98332 247.70932 385.19987 247.24982 385.375 245.0625 C 385.78086 239.99367 383.17214 230.81389 379.5 224.46875 C 372.2871 212.00547 359.16288 205.07371 345.53125 205.34375 z M 415.03125 255.40625 C 409.5893 255.40617 404.16281 256.6713 398.8125 259.21875 C 394.15446 261.43659 391.75995 263.10775 388 266.625 C 382.82407 271.46683 379.10903 277.53832 377.4375 283.9375 L 376.65625 286.96875 L 378.4375 289.53125 C 384.77444 298.50817 388.25539 308.0214 388.375 316.75 L 388.4375 320.71875 L 391.875 321 C 402.20979 321.85337 412.25247 325.21079 420.3125 330.53125 C 422.0418 331.67277 423.70038 332.625 424 332.625 C 426.14057 332.625 434.03255 328.92869 438.15625 326 C 449.77223 317.75022 456.33873 301.62969 453.6875 287.875 C 451.22593 275.10426 443.15128 264.71036 431.40625 259.21875 C 425.95763 256.67115 420.4732 255.40633 415.03125 255.40625 z M 275.9375 255.65625 C 273.71715 255.69103 271.57187 255.876 269.71875 256.25 C 254.76735 259.26753 243.32284 269.86569 239.09375 284.625 C 237.66506 289.61086 237.65913 299.27964 239.09375 304.5 C 241.04184 311.58885 244.83542 317.81799 250.46875 323.125 C 255.63491 327.99189 262.17805 331.368 269.28125 332.875 C 273.41272 333.75153 282.54703 333.40099 287.21875 332.1875 C 291.26939 331.13533 296.48341 328.53002 300.78125 325.375 L 303.6875 323.21875 L 303.75 317.3125 C 303.84367 308.54477 306.1003 301.14063 311.0625 293.28125 L 313.59375 289.25 L 308.90625 284.625 C 301.96722 277.75835 298.09189 272.10505 294.34375 263.34375 C 293.53941 261.4636 292.41317 259.43251 291.84375 258.84375 C 289.90541 256.83959 282.59854 255.55192 275.9375 255.65625 z M 346.78125 290.9375 C 345.36334 290.92323 343.87723 290.99052 342.28125 291.15625 C 336.33046 291.77419 333.64891 293.12275 328.3125 298.09375 C 322.56213 303.45036 319.8949 309.29557 319.875 316.6875 C 319.86774 319.37703 320.14504 322.00456 320.59375 323.53125 C 323.51792 333.4806 332.24884 341.45804 341.90625 343.03125 C 346.48625 343.77734 352.87714 342.75579 357.59375 340.5 C 361.06498 338.83984 367.47291 332.44478 369.4375 328.6875 C 373.08136 321.71858 373.2132 313.49232 369.8125 306.40625 C 367.72785 302.06245 366.0135 299.85224 362.375 296.8125 C 357.58929 292.81433 352.92553 290.99933 346.78125 290.9375 z M 389.375 336.59375 C 386.8755 336.55542 384.8714 336.75305 384.25 337.09375 C 383.68909 337.40129 382.49432 338.81093 381.59375 340.21875 C 377.06405 347.29981 368.36785 353.89343 359.1875 357.21875 C 357.62072 357.78628 356.34375 358.50494 356.34375 358.8125 C 356.34375 359.12005 356.75128 362.01888 357.25 365.25 C 358.76512 375.06633 358.33957 383.9616 356.03125 391.53125 L 354.8125 395.5 L 356.03125 397.28125 C 358.90688 401.62662 365.15694 407.39631 370.0625 410.21875 C 372.68797 411.72933 378.33042 413.64694 381.75 414.1875 C 383.17808 414.4132 387.2404 414.525 390.75 414.4375 C 395.81498 414.31124 397.71871 414.07467 400.0625 413.28125 C 417.14197 407.49951 428.71685 391.03408 427.75 373.875 C 427.41861 367.99382 426.5761 364.90495 423.8125 359.28125 C 417.3102 346.04964 403.29513 336.80726 389.375 336.59375 z M 309.59375 339.34375 L 304.84375 341.9375 C 296.69183 346.38935 290.72925 348.18327 280.65625 349.21875 L 274.5 349.84375 L 272.5625 352 C 269.96404 354.86302 266.80404 361.45625 265.34375 367.03125 C 264.28159 371.08624 264.17255 372.14617 264.375 377.03125 C 264.63687 383.35 265.40178 386.48997 267.90625 391.75 C 270.21216 396.59302 271.93185 399.10665 275.625 402.96875 C 280.78594 408.36578 286.74599 411.99233 293.375 413.78125 C 298.36355 415.12748 309.49543 414.63209 316 412.78125 C 320.34383 411.54525 324.8594 408.67684 329.75 404.03125 C 335.50482 398.56474 339.21191 392.87229 340.59375 387.40625 C 342.89903 378.28745 341.9811 363.75667 338.875 360.1875 C 338.2592 359.4799 336.17366 358.4044 333.59375 357.4375 C 323.61164 353.69638 317.73887 349.47264 311.1875 341.34375 L 309.59375 339.34375 z ";
-fx-padding:10px;
-fx-background-insets: 0, 2;
-fx-effect: dropshadow( gaussian , rgb(255,20,147) , 10, 0.0 , 0 , 2 );
-fx-background-color: red,yellow;
}
chart_area_line
.default-color0.chart-series-area-line {
-fx-stroke: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,0,255,1) 100%);
-fx-stroke-width: 3px;
}
chart_area_fill
.default-color0.chart-series-area-fill {
-fx-fill:red;
-fx-blend-mode:OVERLAY;
}
chart_axis_tickmarks
.axis {
-fx-tick-length: 0;
-fx-minor-tick-length: 0;
}
chart_axis_text
.axis Text{
-fx-fill: white;
-fx-font-size: 0.6em;
}
chart_legend
.chart-legend {
-fx-background-color: transparent;
-fx-padding: 20px;
-fx-text-fill: pink;
}
chart_legend_item
.chart-legend-item{
-fx-text-fill: pink;
}
chart_title
.chart-title {
-fx-text-fill: pink;
-fx-font-size: 1.6em;
-fx-font-weight:bold;
}
Comments
Post a Comment