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.
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