Is there any way to include legend in the graph chart produced by open flash chart2?

Question

I am working on customizing the layout of OFC2 so it can be properly fit with my software. However, one of my concern of the chart is that, although it can generate multiple line graphs in the same pane, I haven't found where I could have the legend of the graph yet. (e.g. small description which tell that hollow purple line represent data A, yellow line represent data B and so on) Is there any way to actually doing this when I'm using line graphs? I have seen it is available in pie chart but it does not applied to graph chart BTW.

Comments, suggestion and even sample JSON would be highly appreciated.

Answer 1

You have to use "text" element inside your "elements"

eg: "text": "Google Inc. (NASDAQ:GOOG)"

Got this below eg from: http://demo.webasp.com.au/ofc-explorer-k.html

Eg JSON: { "title": { "text": "Google vs Apple Stock" }, "elements": [ { "type": "line", "text": "Google Inc. (NASDAQ:GOOG)", "font-size": 12, "values": [ 562.38, 560.2, 546.43, 545.21, 542.3, 551, 528.82, 528.07, 526.42, 534.73, 527.04, 537, 543.91, 554.53, 541.55, 540.57, 533.8, 521.62, 516.09, 535.6, 533.44, 481.32, 468.8, 477.11, 489.22, 475.62, 491.98, 477.12, 483.11, 482.7, 473.75, 467.86, 463, 479.85, 486.34, 479.12, 495.01, 500.84, 502.61, 500.03, 505.49, 510.15, 498.3, 490.5, 485, 486.53, 490.59, 483.01, 474.16, 468.58, 473.78, 463.29, 465.25, 464.41, 450.26, 444.25, 419.95, 418.66, 414.16, 433.75, 437.66, 433.86, 442.93, 414.49, 439.08, 449.15, 430.14, 429.27, 435.11, 439.6, 431.04, 381, 400.52, 411.72, 390.49, 386.91, 371.21, 346.01, 338.11, 328.98, 332, 381.02, 362.71, 339.17, 353.02, 372.54, 379.32, 362.75, 355.67, 352.32, 339.29, 329.49, 368.75, 358, 359.69, 359.36, 346.49, 366.94, 342.24, 331.22, 331.14, 318.78, 311.46, 291, 312.08, 310.02, 300.12, 297.42, 280.18, 259.56, 262.43, 257.44, 282.05, 292.09, 292.09, 292.96, 265.99, 275.11, 279.43, 274.34, 283.99, 302.11, 305.97, 308.82, 300.22, 315.76, 310.67, 325.28, 315.24, 310.28, 310.17, 297.11, 298.02, 302.95, 302.95, 300.36, 297.42, 303.11, 307.65, 307.65, 321.32, 328.05, 334.06, 322.01, 325.19, 315.07, 312.69, 314.32, 300.97, 298.99, 299.67, 282.75, 303.08, 306.5, 324.7, 323.87, 331.48, 348.67, 343.32, 338.53, 340.57, 340.45, 343, 353.72, 371.28, 378.77, 358.51, 358.04, 363.05, 357.68, 342.66, 353.11, 342.64, 346.45, 330.06, 345.45, 341.64, 337.18, 337.99, 327.16, 325.48, 318.92, 305.64, 308.57, 290.89, 308.17, 317.91, 323.53, 324.42, 319.69, 335.34, 333.1, 329.94, 330.16, 348.6, 347.16, 344.07, 353.29, 347.7, 342.69, 348.06, 354.09, 362.5, 369.78, 368.24, 358.65, 362, 372.5, 372.5, 378.11, 368.91, 379.5, 388.74, 392.24, 379.3, 381.47, 383.86, 384.69, 389.49, 385.95, 383.71, 391.47, 395.97, 393.69, 401.98, 402.99, 403.47, 396.61, 407.33, 407.98, 399.01, 389.54, 387.5, 390, 396.84, 398.88, 397.18, 396.5, 393.5, 404.36, 405.56, 410.4, 417.23, 426.56, 428.4, 431.65, 440.28, 444.32, 438.77, 435.62, 432.6, 429, 424.84, 416.77, 416 ], "colour": "#3399FF", "dot-style": { "type": "line_dot", "tip": "#val# Google Inc. (NASDAQ:GOOG)<br>in Date #x_label#", "dot-size": 3, "colour": "#3399FF" } }, { "type": "line", "text": "Apple Inc. (NASDAQ:AAPL)", "font-size": 12, "values": [ 178.75, 180.9, 175.27, 173.16, 173.25, 177.39, 168.26, 170.09, 167.44, 174.68, 168.18, 170.12, 175.16, 179.55, 174.25, 176.63, 172.58, 173.88, 169.64, 172.81, 171.81, 165.15, 166.29, 162.02, 166.26, 159.03, 162.12, 154.4, 157.08, 159.88, 158.95, 156.66, 153.23, 160.64, 164.19, 163.57, 169.55, 173.56, 176.73, 179.3, 179.32, 175.74, 175.39, 173.53, 175.84, 174.29, 176.79, 172.55, 173.64, 174.67, 173.74, 169.53, 166.19, 166.96, 161.22, 160.18, 157.92, 151.68, 151.61, 152.65, 148.94, 140.36, 139.88, 127.83, 134.09, 140.91, 131.05, 126.84, 128.71, 131.93, 128.24, 105.26, 113.66, 109.12, 100.1, 97.07, 98.14, 89.16, 89.79, 88.74, 96.8, 110.26, 104.08, 97.95, 101.89, 97.4, 98.44, 91.49, 96.87, 98.23, 96.38, 92.09, 99.91, 104.55, 111.04, 107.59, 106.96, 110.99, 103.3, 99.1, 98.24, 95.88, 94.77, 90.12, 96.44, 90.24, 88.14, 89.91, 86.29, 80.49, 82.58, 92.95, 90.8, 95, 95, 92.67, 88.93, 92.47, 95.9, 91.41, 94, 99.72, 100.06, 98.21, 95, 98.27, 94.75, 95.43, 89.16, 89.43, 90, 85.74, 86.38, 85.04, 85.04, 85.81, 86.61, 86.29, 85.35, 85.35, 90.75, 94.58, 93.02, 91.01, 92.7, 90.58, 88.66, 87.71, 85.33, 83.38, 82.33, 78.2, 82.83, 88.36, 88.36, 89.64, 90.73, 94.2, 93, 90.13, 91.51, 92.98, 93.55, 96.46, 99.72, 102.51, 97.83, 96.82, 99.27, 99.16, 94.53, 94.37, 90.64, 91.2, 86.95, 90.25, 91.16, 89.19, 89.31, 87.94, 88.37, 91.17, 88.84, 85.3, 83.11, 88.63, 92.68, 96.35, 95.93, 95.42, 99.66, 101.52, 101.62, 101.59, 107.66, 106.5, 106.49, 109.87, 106.85, 104.49, 105.12, 108.69, 112.71, 115.99, 118.45, 115, 116.32, 119.57, 119.57, 120.22, 118.31, 117.64, 121.45, 123.42, 120.5, 121.76, 121.51, 125.4, 123.9, 124.73, 123.9, 125.14, 125.83, 127.24, 132.07, 132.71, 132.5, 129.06, 129.19, 129.57, 124.42, 119.49, 122.95, 122.42, 126.65, 127.45, 125.87, 124.18, 122.5, 130.78, 133.05, 135.07, 135.81, 139.35, 139.49, 140.95, 143.74, 144.67, 143.85, 142.72, 140.25, 139.95, 136.97, 136.09, 136.35 ], "colour": "#663366", "dot-style": { "type": "line_dot", "tip": "#val# Apple Inc. (NASDAQ:AAPL)<br>in Date #x_label#", "dot-size": 3, "colour": "#663366" } } ], "x_legend": { "text": "Date", "style": "{color: #333333; font-weight: bold;font-size: 14px;}" }, "y_legend": { "text": "", "style": "{color: #333333; font-weight: bold;font-size: 14px;}" }, "bg_colour": "#ffffff", "x_axis": { "steps": 26, "labels": { "rotate": 0, "labels": [ "06\/18\/08", "06\/19\/08", "06\/20\/08", "06\/23\/08", "06\/24\/08", "06\/25\/08", "06\/26\/08", "06\/27\/08", "06\/30\/08", "07\/01\/08", "07\/02\/08", "07\/03\/08", "07\/07\/08", "07\/08\/08", "07\/09\/08", "07\/10\/08", "07\/11\/08", "07\/14\/08", "07\/15\/08", "07\/16\/08", "07\/17\/08", "07\/18\/08", "07\/21\/08", "07\/22\/08", "07\/23\/08", "07\/24\/08", "07\/25\/08", "07\/28\/08", "07\/29\/08", "07\/30\/08", "07\/31\/08", "08\/01\/08", "08\/04\/08", "08\/05\/08", "08\/06\/08", "08\/07\/08", "08\/08\/08", "08\/11\/08", "08\/12\/08", "08\/13\/08", "08\/14\/08", "08\/15\/08", "08\/18\/08", "08\/19\/08", "08\/20\/08", "08\/21\/08", "08\/22\/08", "08\/25\/08", "08\/26\/08", "08\/27\/08", "08\/28\/08", "08\/29\/08", "09\/02\/08", "09\/03\/08", "09\/04\/08", "09\/05\/08", "09\/08\/08", "09\/09\/08", "09\/10\/08", "09\/11\/08", "09\/12\/08", "09\/15\/08", "09\/16\/08", "09\/17\/08", "09\/18\/08", "09\/19\/08", "09\/22\/08", "09\/23\/08", "09\/24\/08", "09\/25\/08", "09\/26\/08", "09\/29\/08", "09\/30\/08", "10\/01\/08", "10\/02\/08", "10\/03\/08", "10\/06\/08", "10\/07\/08", "10\/08\/08", "10\/09\/08", "10\/10\/08", "10\/13\/08", "10\/14\/08", "10\/15\/08", "10\/16\/08", "10\/17\/08", "10\/20\/08", "10\/21\/08", "10\/22\/08", "10\/23\/08", "10\/24\/08", "10\/27\/08", "10\/28\/08", "10\/29\/08", "10\/30\/08", "10\/31\/08", "11\/03\/08", "11\/04\/08", "11\/05\/08", "11\/06\/08", "11\/07\/08", "11\/10\/08", "11\/11\/08", "11\/12\/08", "11\/13\/08", "11\/14\/08", "11\/17\/08", "11\/18\/08", "11\/19\/08", "11\/20\/08", "11\/21\/08", "11\/24\/08", "11\/25\/08", "11\/26\/08", "11\/27\/08", "11\/28\/08", "12\/01\/08", "12\/02\/08", "12\/03\/08", "12\/04\/08", "12\/05\/08", "12\/08\/08", "12\/09\/08", "12\/10\/08", "12\/11\/08", "12\/12\/08", "12\/15\/08", "12\/16\/08", "12\/17\/08", "12\/18\/08", "12\/19\/08", "12\/22\/08", "12\/23\/08", "12\/24\/08", "12\/25\/08", "12\/26\/08", "12\/29\/08", "12\/30\/08", "12\/31\/08", "01\/01\/09", "01\/02\/09", "01\/05\/09", "01\/06\/09", "01\/07\/09", "01\/08\/09", "01\/09\/09", "01\/12\/09", "01\/13\/09", "01\/14\/09", "01\/15\/09", "01\/16\/09", "01\/20\/09", "01\/21\/09", "01\/22\/09", "01\/23\/09", "01\/26\/09", "01\/27\/09", "01\/28\/09", "01\/29\/09", "01\/30\/09", "02\/02\/09", "02\/03\/09", "02\/04\/09", "02\/05\/09", "02\/06\/09", "02\/09\/09", "02\/10\/09", "02\/11\/09", "02\/12\/09", "02\/13\/09", "02\/17\/09", "02\/18\/09", "02\/19\/09", "02\/20\/09", "02\/23\/09", "02\/24\/09", "02\/25\/09", "02\/26\/09", "02\/27\/09", "03\/02\/09", "03\/03\/09", "03\/04\/09", "03\/05\/09", "03\/06\/09", "03\/09\/09", "03\/10\/09", "03\/11\/09", "03\/12\/09", "03\/13\/09", "03\/16\/09", "03\/17\/09", "03\/18\/09", "03\/19\/09", "03\/20\/09", "03\/23\/09", "03\/24\/09", "03\/25\/09", "03\/26\/09", "03\/27\/09", "03\/30\/09", "03\/31\/09", "04\/01\/09", "04\/02\/09", "04\/03\/09", "04\/06\/09", "04\/07\/09", "04\/08\/09", "04\/09\/09", "04\/10\/09", "04\/13\/09", "04\/14\/09", "04\/15\/09", "04\/16\/09", "04\/17\/09", "04\/20\/09", "04\/21\/09", "04\/22\/09", "04\/23\/09", "04\/24\/09", "04\/27\/09", "04\/28\/09", "04\/29\/09", "04\/30\/09", "05\/01\/09", "05\/04\/09", "05\/05\/09", "05\/06\/09", "05\/07\/09", "05\/08\/09", "05\/11\/09", "05\/12\/09", "05\/13\/09", "05\/14\/09", "05\/15\/09", "05\/18\/09", "05\/19\/09", "05\/20\/09", "05\/21\/09", "05\/22\/09", "05\/26\/09", "05\/27\/09", "05\/28\/09", "05\/29\/09", "06\/01\/09", "06\/02\/09", "06\/03\/09", "06\/04\/09", "06\/05\/09", "06\/08\/09", "06\/09\/09", "06\/10\/09", "06\/11\/09", "06\/12\/09", "06\/15\/09", "06\/16\/09" ], "steps": 26 }, "colour": "#333333", "grid-colour": "#ffffff", "offset": false, "stroke": 1, "tick-height": 0 }, "y_axis": { "min": "0", "max": "600", "steps": 60, "colour": "#333333", "grid-colour": "#d9d9d9", "stroke": 0 } } Source