Составные диаграммы

Обзор

Вы можете комбинировать несколько типов диаграмм с маркерами линий или свечей , чтобы выделить тенденции данных или показать дисперсию. Когда вы добавляете линейные маркеры или маркеры свечей на столбчатые, точечные или другие типы диаграмм, полученная диаграмма называется составной диаграммой . Некоторые составные диаграммы выглядят как комбинация двух типов диаграмм, например гистограмма с линией отслеживания:

Bar chart with tracking line

в то время как другие выглядят как совершенно новые типы диаграмм — например, прямоугольная диаграмма:

box chart .

Создание составной диаграммы

Все составные диаграммы состоят из одного или нескольких типов базовых диаграмм (линейных, точечных, линейчатых или радарных) в сочетании с одним или несколькими наборами маркеров. Этим маркерам требуются данные для размещения их на диаграмме. Иногда вы можете использовать те же серии данных, которые использовались для рисования столбцов или точек на диаграмме, но обычно вы хотите, чтобы маркеры имели свои собственные независимые наборы данных. Если вы хотите, чтобы на вашей диаграмме были разные ряды данных для базовой диаграммы и для маркеров, вы должны скрыть данные маркеров из базовой диаграммы (чтобы она не пыталась нарисовать больше столбцов или линий с этими данными). Вот как это сделать:

  1. Добавьте серию данных маркера в конец параметра chd . Например, если на вашей гистограмме есть данные chd=t:30,10,20 , вы можете добавить новые данные для маркера линии следующим образом: chd=t:30,10,20|60,40,50 .
  2. Скройте дополнительные данные маркеров на базовой диаграмме. Если вы просто добавите дополнительный ряд данных в гистограмму для своей линии отслеживания, на диаграмме это отобразится как новая серия гистограмм. Чтобы этого не произошло, необходимо скрыть эту лишнюю серию. Чтобы скрыть серию, добавьте одну цифру после дескриптора формата chd : например, chd=t 1 :30,10,20|60,40,50 . Эта цифра сообщает API диаграмм, сколько рядов данных следует использовать для рисования элементов для этого базового типа диаграммы, определенного параметром cht (столбцы для гистограмм, точки данных для линейных диаграмм и т. д.). Любые дополнительные ряды данных будут игнорироваться этим типом диаграммы при ее построении. Обратите внимание, что это число начинается с 1, а не с 0. Таким образом, t1 означает «использовать для баров только первую серию данных», t2 означает «использовать для баров только первые две серии» и т. д.
    1. Примечания:
      1. Точечные диаграммы . Точечные диаграммы скрывают данные по-другому; более подробную информацию см. в документации.
      2. Линейные диаграммы lxy — укажите четное количество серий для отображения ( t0 , t2 , t4 и т. д.). Это связано с тем, что каждая линия на диаграмме lxy описывается двумя рядами данных: один для значений x и один для значений y.
  3. Используйте скрытые ряды данных для рисования маркеров свечей , линейных маркеров или других маркеров. Как рисовать маркеры описано в связанных разделах. Используйте серию скрытых данных в качестве источника для своих маркеров. Вы можете включить любое количество дополнительных скрытых рядов данных и использовать их для дополнительных маркеров диаграммы.

Вот диаграмма, которую мы только что описали:

Bar chart with line marker
cht=bvg
chd=t1:30,10,20|60,40,50
chm=D,0033FF,1,0,5,1

Типы диаграмм

Ниже приведен список типов маркеров и типов диаграмм, с которыми их можно использовать:

Тип маркера Базовые типы диаграмм, которые его поддерживают
Линия Линия , Разброс , Полоса , Радар
Подсвечник Линия , Бар
Все другие Линия , Разброс , Полоса , Радар

Вот несколько примеров типов составных диаграмм, которые можно создать:

Тип диаграммы Описание Пример
Диаграммы с линейными маркерами Линейные маркеры можно использовать для отображения тенденций на диаграммах многих других типов. Bar chart with line markerBar chart with line marker
Свечные графики Свечные графики часто используются для отображения финансовых данных. Line chart with one orange line and four financial markers.
Коробочные диаграммы

Ящичковые диаграммы используются для отображения данных, сгруппированных по квартилям диапазона.

Line chart with one orange line and four financial markers.
Встроенные диаграммы Вы можете встроить диаграмму в другую диаграмму. Embedded chart
Другие маркеры Вы можете скрыть данные маркеров в любом из допустимых типов базовых диаграмм и использовать их с любыми другими типами маркеров, которые вам нравятся.
chd=t1:
10,20,30,40,50,60,70,80
5,10,15,20,25,30,35,40,45,50
chm=o,000000,1,-1,5

Вернуться наверх

Диаграммы с линейными маркерами

Вы можете добавлять линии на линейные , точечные , гистограммы или лепестковые диаграммы, чтобы выделить тенденции.

Базовый тип + тип маркера Описание Пример
Бар + Линия

Вот гистограмма с линией трассировки. Первые две серии данных используются для составных столбцов, а оставшаяся серия — для линии. chd=s2 указывает, что на графике следует использовать только первые две серии баров. В строке для данных используется третья серия.

  • chd=s2:1XQbnf4,EWoQMUB,9halxp9 — простая кодировка, при которой первые две серии используются для рисования полос, а последняя серия — для линии.
  • chm=D,0033FF,2,0,5,1 — линия трассировки (D), синяя, данные из серии с индексом 2, все точки (0), линия имеет ширину 5 пикселей и имеет z-порядок 1.
Bar chart with line marker
chm=
D,0033FF,2,0,5,1
chd=s2:
1XQbnf4,
EWoQMUB,
9halxp9
Разброс + линия Вы можете добавить линию на точечную диаграмму, чтобы показать средние значения. Обратите внимание, что точечные диаграммы скрывают данные маркеров другим способом ; более подробную информацию см. в разделе «Точечные диаграммы» .
chd=t:
12,16,16,24,26,28,41,51,66,68,13,45,81|
16,14,22,34,22,31,31,48,71,64,15,38,84
chm=
o,0000FF,0,-1,0|
o,FF0000,0,0:9:,5|
D,000000,1,10:,1,-1
Бар + Линия

Вот еще одна гистограмма с накоплением, над которой проведена независимая линия.

Bar chart with line marker
cht=bvs
chd=t2:
0,10,20,30,20,70,80|
0,20,10,5,20,30,10|
10,0,20,15,60,40,30
chm=D,76A4FB,2,0,3
Бар + Круги То же, что и предыдущая диаграмма, но вместо линейного маркера используются круговые маркеры. Мы указали каждые 0,5 значения данных, что добавляет расчетные промежуточные точки к пунктирной линии. Bar chart with line marker
cht=bvs
chd=t2:
0,10,20,30,20,70,80|
0,20,10,5,20,30,10|
10,0,20,15,60,40,30
chm=o,76A4FB,2,-.5,10

Вернуться наверх

Свечные графики

Для построения свечных диаграмм требуется как минимум четыре ряда данных, а также дополнительные ряды для любых других элементов диаграммы. Свечные диаграммы могут отображать только набор свечных маркеров или могут представлять собой комбинацию свечных маркеров плюс гистограммы или линейные графики, как показано здесь:

Базовый тип + тип маркера Описание Пример
Линия (скрытая) + Свеча

В этом примере показан график, на котором показаны только маркеры свечей.

  • chd=t0 — 0 означает, что все ряды данных скрыты от основного типа диаграммы (в данном случае линейной диаграммы), поэтому рисуются только свечи. Первое и последнее значения в каждой серии равны -1, чтобы указать отсутствующие значения, чтобы избежать рисования первой или последней свечи, которая перекрывала бы ось или поле диаграммы и была бы обрезана.
  • chm=F,0000FF,0,-1,20 — буква F обозначает свечные маркеры (первоначально «финансовые маркеры»); 0000FF означает, что маркеры становятся синими, когда значение уменьшается; 0 указывает, что данные свечей начинаются с серии 0; -1 указывает маркеры на всех точках (мы могли бы также указать здесь 0:4 , чтобы скрыть первую и последнюю свечу вместо использования значений данных -1 ); 20 – ширина свечей.
Basic candlestick chart
cht=lc
chd=t0:
-1,5,10,7,12,-1|
-1,25,45,47,24,-1|
-1,40,30,27,39,-1|
-1,55,63,59,80,-1
chm=F,0000FF,0,-1,20
Линия + Свеча

Вот пример линейного графика с маркерами свечей.

Предоставляются пять рядов данных; первый используется для типа диаграммы (линия), а остальные «скрытые» серии данных используются для маркеров свечей. Параметр chd=t1 указывает, что для этого типа диаграммы (линейной диаграммы) используется только первая серия.

Мы опустили маркеры первой и последней свечей, используя соотношение 1:4 в значении <what_points> , поскольку первая и последняя свечи обрезаются границами области диаграммы.

Параметр chm определяет маркеры свечей с синтаксисом F,< declining_color >,< data_series_index >,< which_points >,< width >,< order >

Line chart with one orange line and four financial markers.
cht=lc
chd=t1:
20,10,15,25,17,30|
0,5,10,7,12,6|
35,25,45,47,24,46|
15,40,30,27,39,54|
70,55,63,59,80,6
chm=
F,,1,1:4,20

Линия + Свеча

Еще один пример свечного графика, но с пользовательскими цветами заливки.

Bar chart with line marker
chd=t1:
t1:
90,80,70,50,40,30,20,10|
0,5,10,0,5,10,0|2,15,20,5,15,40,0|
5,35,20,2,35,20,0|
15,40,30,15,40,50,0
chm=
F,000000,1,1:-2,20
Бар + Подсвечник

Вот пример гистограммы с маркерами свечей.

Здесь мы показываем маркеры первой и последней свечей, поскольку между столбцами имеется достаточный интервал, чтобы они не обрезались границами графика.

Line chart with one orange line and four financial markers.
cht=bvg
chd=t1:
20,10,15,25,17,30|
0,5,10,7,12,6|
35,25,45,47,24,46|
15,40,30,27,39,54|
70,55,63,59,80,6
chm=
F,,1,1:4,20

Вернуться наверх

Коробочные диаграммы

Ящичные диаграммы , также называемые ящичковыми диаграммами или диаграммами с усами , представляют собой тип диаграммы, которая показывает группировку одного или нескольких рядов в квартили ( квартили — это группы, которые охватывают 25% диапазона значений, за возможным исключением выбросов) . Ящиковые диаграммы аналогичны свечным графикам, но с добавленными маркерами для нижней и верхней части свечи, а также маркером 50-го процентиля.

Ящичковая диаграмма полностью состоит из маркеров, как показано здесь:

Candlestick marker
chm=
F,0000FF,0,1,10
Candlestick marker
chm=
H,0000FF,0,1,1:10|
H,0000FF,3,1,1:10|
H,0000FF,4,1,1:10
Candlestick marker
chm=
o,FF0000,5,,5|
o,FF0000,6,,5
Candlestick marker
Один набор маркеров свечей ( chm=F ) для тела ячеек: Один набор маркеров формы горизонтальной линии регулируемой длины ( chm=H ) для линий минимума, 50-го и 100-го процентиля: При желании некоторые маркеры в форме круга ( chm=o ) для отображения выбросов в наборе данных. Сложите их все вместе, и вы получите коробчатую диаграмму!

Базовым типом диаграммы для коробчатых диаграмм является любой из типов гистограмм ( bhs , bvs , bhg , bvg ) или типов линейных диаграмм ( lc , ls , lxy ). Но если вы скрываете базовый тип диаграммы, добавляя ноль в параметр формата данных (например: chd=t0: или chd=s0: ), не имеет значения, какой тип диаграммы вы выберете.

Ящичная диаграмма должна содержать не менее пяти рядов данных: четыре для блоков и маркеров максимума и минимума; один для отметки 50%; плюс любые дополнительные серии данных для любых дополнительных маркеров, которые могут вам понадобиться, например маркеров выбросов. Вот рекомендуемый порядок серий. Обратите внимание: если значение в серии 1 больше соответствующего значения в серии 2, поле будет заполнено цветом маркера chm=F ; если значение в серии 1 меньше значения в серии 2, поле будет незаполненным. См. «Маркеры свечей» для получения дополнительной информации.

Заказ серии для незаполненной коробки:

  1. Минимальное значение
  2. Маркер 25% (75% для заполненного ящика)
  3. Маркер 75% (25% для заполненного ящика)
  4. Максимальное значение
  5. 50% маркер
  6. Шестая серия и последующие предназначены для любых дополнительных данных маркеров, таких как выбросы.

На самом деле вы можете разместить дополнительные серии маркеров до или после данных маркеров свечей, но проще разместить их последними.

Вы можете создавать различные стили коробчатых диаграмм, указывая разные маркеры, разные типы базовых диаграмм или упорядочивая данные по-разному.

Описание Пример

Это стандартная прямоугольная диаграмма, но разным элементам диаграммы назначены разные цвета, чтобы подчеркнуть, какой маркер используется для создания каждого элемента диаграммы.

  • cht=bvs — тип базовой диаграммы — bvs , но столбцы этой базовой диаграммы фактически не отображаются. Здесь мы могли бы указать любой тип составной диаграммы.
  • chd=t0 : — t0 скрывает все линии на этом линейном графике. Все данные будут использоваться только для маркеров. В данных первое и последнее значения равны -1, чтобы маркеры не перекрывали левый и правый края диаграммы. Все значения во второй серии ниже соответствующих значений в третьей серии, поэтому все поля незаполнены.
    • -1,5,10,7,12,-1 - Минимальное значение: нижняя точка нижних оранжевых палочек; также высота горизонтальных зеленых линий.
    • -1,25,30,27,24,-1 — значение 25%: нижний горизонтальный край оранжевых прямоугольников.
    • -1,40,45,47,39,-1 — значение 75%: верхний горизонтальный край оранжевых прямоугольников.
    • -1,55,63,59,80,-1 - Максимальное значение: верхняя точка верхних оранжевых палочек; также высота горизонтальных синих линий.
    • -1,30,40,35,30,-1 — Черные горизонтальные «Средние» линии внутри свечей.
    • -1,-1,5,70,90,-1 — данные выбросов (красные кружки)
    • -1,-1,-1,80,5,-1 — больше данных выбросов (красные кружки). Данные выбросов разбиты на два набора, поскольку невозможно указать два маркера, один над другим, в одной серии без использования смещений или других сложных приемов.
  • chm= — данные маркера, как описано ниже:
    • F,FF9900,0,1:4,40 — маркеры оранжевых свечей ( F ), использующие четыре ряда данных, начиная с первого ряда ( 0 ), в точках 1–4, размер 40.
    • H,0CBF0B,0,1:4,1:20 — зеленые горизонтальные маркеры, показывающие минимальное значение. Они из первой серии.
    • H,0000FF,3,1:4,1:20 — синие горизонтальные маркеры, показывающие максимальное значение. Они из 3-й серии.
    • H,000000,4,1:4,1:40 — черные горизонтальные маркеры, показывающие значение 50%. Они из 4 серии.
    • o,FF0000,5,-1,7 — красные кружки присвоены шестому ряду данных для выбросов. Маркеры назначаются всем элементам в этой серии, где для блоков без выбросов используется значение -1.
    • o,FF0000,6,-1,7 — Больше выбросов. Другой ряд данных необходим, если вы хотите разместить выбросы друг на друге вокруг одного и того же блока.

Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue

cht=bvs
chd=t0:
-1,5,10,7,12,-1|
-1,25,30,27,24,-1|
-1,40,45,47,39,-1|
-1,55,63,59,80,-1|
-1,30,40,35,30,-1|
-1,-1,5,70,90,-1|
-1,-1,-1,80,5,-1
chm=
F,FF9900,0,1:4,40|
H,0CBF0B,0,1:4,1:20|
H,000000,4,1:4,1:40|
H,0000FF,3,1:4,1:20|
o,FF0000,5,-1,7|
o,FF0000,6,-1,7

Тип диаграммы lc всегда отображает линии оси. Чтобы создать диаграмму без осевых линий, укажите тип диаграммы ls.
Chart type lc shows borders
cht=lc
Chart type ls doesn't show borders
cht=ls
Чтобы создать заполненный прямоугольник, сделайте точку во второй серии больше, чем соответствующая точка в третьей серии. Большее значение отмечено красным в коде, показанном справа. Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue
chd=t0:
-1,5,10,7,12,-1
-1, 40 ,30,27,24,-1
-1,25, 45 , 47 , 39 ,-1
-1,55,63,59,80,-1

Вернуться наверх

Встроенные диаграммы

Pie chart embedded in a line chart

Вы можете встроить диаграмму любого типа в гистограмму , линейную , радарную или точечную диаграмму с помощью динамических значков. См. раздел «Встроенные диаграммы» документации по маркерам с динамическими значками ( chem ).

Вернуться наверх

Стандартные функции

Остальные функции на этой странице являются стандартными функциями диаграмм.

Линейные маркеры chm=D [ Бар, Свеча, Линия, Радар, Разброс ]

Вы можете добавить линию, которая отслеживает данные на диаграмме. Чаще всего это используется в составных диаграммах .

Чтобы добавить несколько строк (или объединить их с другими маркерами chm ), разделите наборы параметров chm с помощью разделителя вертикальной черты ( | ). С помощью этого параметра нельзя создать маркер пунктирной линии.

Синтаксис

chm=
  D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>
Д
Указывает, что это линейный маркер.
< цвет >
Цвет линии в шестнадцатеричном формате RRGGBB .
< индекс_серии >
Индекс ряда данных, используемый для рисования линии. Индекс серии данных равен 0 для первой серии данных, 1 для второй серии данных и т. д.
< какие_точки >
Какие точки в серии использовать, чтобы провести линию. Используйте одно из следующих значений:
  • 0 — использовать все точки серии.
  • start:end — использовать определенный диапазон точек в серии, от начала до конца включительно (индекс отсчитывается от нуля). Вы также можете использовать значения с плавающей запятой для указания промежуточных точек или оставить начало или конец пустыми, чтобы указать первую или последнюю точку данных соответственно. начало и конец могут быть отрицательными, как обратный индекс от последнего значения. Если и начало , и конец отрицательны, обязательно запишите их в возрастающем значении (например, -6:-1).
< размер >
Ширина линии в пикселях.
< opt_z_order >
[ Необязательно ] Слой, на котором будет рисоваться маркер, по сравнению с другими маркерами и всеми остальными элементами диаграммы. Это число с плавающей запятой от -1,0 до 1,0 включительно, где -1,0 — низ, а 1,0 — верх. Элементы диаграммы (линии и столбцы) чуть ниже нуля. Если два маркера имеют одинаковое значение, они отображаются в порядке, заданном URL-адресом. Значение по умолчанию — 0,0 (чуть выше элементов диаграммы).

Примеры

Описание Пример

Это пример рисования линии-маркера на гистограмме. Для z-порядка установлено значение 1 , поэтому линия рисуется поверх столбцов.

В этом примере используются одни и те же данные как для столбцов, так и для строки данных.
Bar chart with line marker
chm=D,0033FF,0,0,5,1
chd=s:1XQbnf4

Это та же гистограмма, но с дополнительным рядом данных только для линии. Это пример составной диаграммы. Составные диаграммы создаются путем добавления дополнительных рядов данных к параметру chd , а также значения chd , указывающего диаграмме «игнорировать» дополнительные ряды данных.

Дополнительную информацию см. в разделе «Составные диаграммы» .

Bar chart with line marker
chm=D,0033FF,1,0,5,1
chd=s1:1XQbnf4,43ksfg6

Вернуться наверх

Маркеры формы chm [ Пистолет, Линия, Радар, Разброс ]

Вы можете указать графические маркеры для всех или отдельных точек данных на диаграмме. Если два или более маркера занимают одну и ту же точку, маркеры рисуются в том порядке, в котором они указаны в параметре chm . Вы также можете создавать текстовые маркеры для точек данных, которые описаны в разделе «Маркеры точек данных» .

Вы можете комбинировать маркеры формы с любыми другими параметрами chm , используя символ вертикальной черты ( | ) для разделения параметров chm .

Синтаксис

Укажите один набор следующих параметров для каждой серии, которую необходимо пометить. Чтобы отметить несколько серий, создайте дополнительные наборы параметров, разделенные вертикальной чертой. Вам не нужно размечать все серии. Если вы не назначите маркеры ряду данных, он не получит никаких маркеров.

Маркеры формы ведут себя несколько иначе на точечных диаграммах . Дополнительную информацию см. в этой документации.

chm=
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
    |...|
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
@
[ Необязательно ] Если перед типом маркера стоит необязательный символ @, то < opt_what_points > должен использовать формат x:y .
<тип_маркера>
Тип используемого маркера. Укажите один из следующих типов:
  • a - Стрелка
  • c - Крест
  • C – Прямоугольник. Если это прямоугольный маркер, у вас должно быть как минимум две серии данных, где серия 0 указывает нижний край, а серия 1 — верхний край. < размер > определяет ширину прямоугольника в пикселях.
  • d - Алмаз
  • E - Маркер полосы ошибок ( ) Для создания этого маркера требуется два ряда данных: одно значение для нижнего уровня и соответствующая точка во втором ряду для верхнего. Он также предоставляет расширенный синтаксис <size> : line_thickness [: top_and_bottom_width ], где top_and_bottom_width является необязательным. См. примеры ниже.
  • h — горизонтальная линия на диаграмме на указанной высоте. ( Единственный допустимый формат для параметра <opt_that_points>nd . )
  • H — Горизонтальная линия, проходящая через указанный маркер данных. Поддерживается расширенный синтаксис <size> , который позволяет указать точную длину линии: line_thickness [: length ] где : length не является обязательным и по умолчанию соответствует полной ширине области диаграммы.
  • o - Круг
  • s - Квадрат
  • v — Вертикальная линия от оси X до точки данных.
  • V – Вертикальная линия регулируемой длины. Это поддерживает расширенный синтаксис значения <size> , который позволяет указать точную длину линии: line_thickness [: length ] где : length является необязательным и по умолчанию соответствует полной высоте области диаграммы. Маркер располагается в центре точки данных.
  • x - Ан Х
< цвет >
Цвет маркеров для этой серии в шестнадцатеричном формате RRGGBB .
< индекс_серии >
Отсчитываемый от нуля индекс ряда данных, на котором будут рисоваться маркеры. Игнорируется для маркеров h и маркеров, которые указывают местоположение по положению x/y (начинаются с символа @). Вы можете использовать скрытые ряды данных в качестве источника маркеров; дополнительную информацию см. в разделе «Составные диаграммы» . Сгруппированные вертикальные гистограммы поддерживают специальный расширенный синтаксис для выравнивания маркеров по определенным столбцам.
< opt_what_points >
[ Необязательно ] На каких точках рисовать маркеры. По умолчанию — все маркеры. Используйте одно из следующих значений:
  • nd — Где нарисовать маркер. Значение зависит от типа маркера:
    • Все типы, кроме h — на какой точке данных рисовать маркер, где nd — индекс в серии, отсчитываемый от нуля. Если вы укажете нецелое значение, то дробь указывает на рассчитанную промежуточную точку. Например, 3,5 означает середину между точкой 3 и точкой 4.
    • h — число от 0,0 до 1,0, где 0,0 — низ диаграммы, а 1,0 — верх диаграммы.
  • -1 — Нарисуйте маркер на всех точках данных. Вы также можете оставить этот параметр пустым, чтобы использовать все точки данных.
  • - n - Нарисовать маркер на каждой n -й точке данных. Значение с плавающей запятой; если n меньше 1, график рассчитает для вас дополнительные промежуточные точки. Например, при значении -0,5 маркеров будет в два раза больше, чем точек данных.
  • start:end:n — рисует маркер на каждой n -й точке данных в диапазоне, от начального до конечного значения индекса включительно. Все параметры являются необязательными (могут отсутствовать), поэтому 3::1 будет от четвертого элемента до последнего, шаг 1, а полный пропуск этого параметра по умолчанию будет равен first : last :1. Все значения могут быть числами с плавающей запятой. начало и конец могут быть отрицательными, чтобы вести отсчет в обратном направлении от последнего значения. Если и начало , и конец отрицательны, убедитесь, что они указаны в возрастающем значении (например, -6:-1:1). Если значение n шага меньше 1, дополнительные точки данных будут рассчитаны путем интерполяции заданных значений данных. Значения по умолчанию: первый:последний:1.
  • x : y — Нарисуйте маркер в определенной точке x/y на графике. Эта точка не обязательно должна находиться на прямой. Чтобы использовать эту опцию, добавьте символ @ перед типом маркера. Укажите координаты в виде значений с плавающей запятой, где 0:0 — левый нижний угол диаграммы, а 1:1 — правый верхний угол диаграммы. Например, чтобы добавить красный ромб размером 15 пикселей в центр диаграммы, используйте @d,FF0000,0,0.5:0.5,15 .
< размер >
Размер маркера в пикселях. Большинство из них принимают для этого параметра одно числовое значение; Маркеры V, H и S поддерживают синтаксис < size >[: width ], где необязательная вторая часть указывает длину строки или маркера.
< opt_z_order >
[ Необязательно ] Слой, на котором будет рисоваться маркер, по сравнению с другими маркерами и всеми остальными элементами диаграммы. Это число с плавающей запятой от -1,0 до 1,0 включительно, где -1,0 — низ, а 1,0 — верх. Элементы диаграммы (линии и столбцы) чуть ниже нуля. Если два маркера имеют одинаковое значение, они отображаются в порядке, заданном URL-адресом. Значение по умолчанию — 0,0 (чуть выше элементов диаграммы).
<opt_offset>
[ Необязательно ] Позволяет указать горизонтальное и вертикальное смещение от указанного местоположения. Вот синтаксис, в котором используется : разделитель: reserved :< horizontal_offset >:< vertical_offset > . Если указано, вы можете включить пустое значение в строку параметра chm для <opt_z_order> . Примеры: o,FF9900,0,4,12,, :10 o,FF9900,0,4,12.0,, :-10:20 o,FF9900,0,4,12,1, ::20
  • зарезервировано – оставьте пустым.
  • < horizontal_offset > — положительное или отрицательное число, определяющее горизонтальное смещение в пикселях. Необязательный; оставьте пустым, если не используется.
  • < vertical_offset > — положительное или отрицательное число, определяющее вертикальное смещение в пикселях. Необязательный; оставьте пустым, если не используется.

Примеры

Описание Пример

Вот пример нескольких маркеров формы и линий.

  • a,990066,0,0.0,9.0 — Фиолетовая стрелка, первая серия, первая точка, размер 9.
  • c,FF0000,0,1.0,20.0 — Красный крест, первая серия, вторая точка, размер 9.
  • d,80C65A,0,2,20.0 - Зеленый ромб, первая серия, третья точка, размер 9.
  • H,000000,0,3,1:40 — черная горизонтальная линия, первая серия, точка данных 3, ширина один пиксель, длина сорок пикселей.
  • o,FF9900,0,4.0,12.0 — Оранжевый кружок, первая серия, пятая точка, размер 12.
  • s,3399CC,0,5.0,11.0 — Синий квадрат, первый ряд, шестая точка, размер 11.
  • v,BBCCED,0,6.0,1.0 — Вертикальная линия до точки, первая серия, седьмая точка, ширина в один пиксель.
  • V,3399CC,0,7.0,1.0 — Вертикальная линия снизу вверх диаграммы, первая серия, восьмая точка, ширина в один пиксель.
  • x,FFCC33,0,8.0,20.0 — желтый «X», первая серия, девятая точка, размер 20.
  • H,FFFF00,0,9,2 — горизонтальная желтая линия шириной диаграммы в точке данных 9.
  • h,FF0000,0,0.5,1 — красная горизонтальная линия на заданной высоте, первая серия, посередине диаграммы, шириной в один пиксель.
Line chart with markers
chm=
a,990066,0,0.0,9.0|
c,FF0000,0,1.0,20|
d,80C65A,0,2.0,20.0|
H,000000,0,3,1:40|
o,FF9900,0,4.0,12.0|
s,3399CC,0,5.0,11.0|
v,BBCCED,0,6,1.0|
V,3399CC,0,7,1.0|
x,FFCC33,0,8,20|
H,FFFF00,0,9,2|
h,FF0000,0,0.5,1

Вот пример использования ромбов для одного ряда данных и кружков для другого ряда данных.

Если два или более маркера занимают одну и ту же точку, маркеры рисуются в том порядке, в котором они указаны в параметре chm . Здесь круг — это первый маркер, указанный с помощью chm , поэтому он рисуется первым. Ромб указывается и рисуется вторым, в результате чего он рисуется поверх круга.

Line chart, one line has 15 pixel circles on each data point the other line has 10 pixel diamonds. A diamond is drawn on the point that is common to both lines
chm=
o,FF9900,0,-1,15.0|
d,FF0000,1,-1,10.0

Вот линейный график с маркером на каждой второй точке данных (-2 означает каждую вторую точку).

Line chart with marker on every second point
chd=t:
0,20,20,50,40,70,70,90,85,45,40,50
chm=
o,0066FF,0,-2,6
Вот линейный график, на котором маркеров в два раза больше, чем точек данных (-0,5 означает каждую половину точки). Line chart with marker on every second point
chd=t:
0,20,20,50,40,70,70,90,85,45,40,50
chm=
o,0066FF,0,-.5,6
В этом примере показано, как использовать маркеры h и v для создания линий сетки произвольного цвета и толщины. Значение z-порядка (последнее значение) установлено на -1, чтобы линии сетки рисовались под линией данных.
Line chart with marker on every second point
chm=
h,76A4FB,0,0:1:.2,2,-1|
V,76A4FB,0,::2,0.5,-1

На этой диаграмме к линейному графику добавляются вертикальные линии заливки:

  • v - Вертикальные линии на графике
  • FF0000 — Красные линии
  • 0 — индекс серии
  • : :.5 — Спецификатор диапазона: от начала до конца, каждые 0,5 пункта.
  • 2 - Толщина 2 пикселя.
Line chart with marker on every second point
chm=
v,FF0000,0,::.5,2
В этом примере на диаграмму добавляется стрелка и текстовый маркер с использованием точных координат. Первый маркер D — это линия трассировки под столбиками. Второй маркер — это стрелка, а третий маркер — текст стрелки.
chm=
D,003971,1,0,3|
@a,000000,0,.25:.75,7|
@tExpected,000000,0,.35:.85,10
Горизонтальная линия, привязанная к определенной точке данных ( H ), может быть полезна для отображения относительных значений или выделения высоты значения данных на диаграмме.
chm=H,FF0000,0,18,1

На этом графике показаны маркеры, которые могут указывать толщину и длину линии в параметре <size> .

  • E,000000,0,6,1:20 — черная полоса ошибок с линиями шириной 1 пиксель, верхней и нижней полосами длиной 20 пикселей. Низ привязан к серии 0 точка 8, верх привязан к серии 1 точка 8.
  • H,990066,1,2,5:50 — фиолетовая горизонтальная линия шириной пять пикселей и длиной пятьдесят пикселей с центром в точке данных 2.
  • V,3399CC,0,8,3:50 — синяя вертикальная линия шириной 3 пикселя и длиной пятьдесят пикселей, с центром в точке данных 8.
title="cht=lc&chd=s:2gounjqLaCf,jqLaCf2goun&chco=008000,00008033&chls=2.0,4.0,1.0&chs=250x150&chm=H,990066,1,2,5:50%7CV,3399CC,0,8,3:50% 7CE,000000,0,6,1:20" src="/chart/image/images/chart_95.png" />
chm=
E,000000,0,6,1:20|
H,990066,1,2,5:50|
V,3399CC,0,8,3:50

Вернуться наверх

Маркеры свечей chm=F [ Bar, Line ]

Маркеры свечей указывают на дисперсию и изменение направления в ряду данных. Часто они используются для отображения стоимости акций в течение дня. Маркер включает в себя сегменты, показывающие максимальное и минимальное значения, а также значения открытия и закрытия за определенный период времени (обычно день). Подробнее о свечных маркерах смотрите здесь .

Свечной маркер рисуется в виде прямоугольника, разделенного вертикальной линией пополам. Для рисования свечного маркера требуется четыре ряда данных; вот что указывает каждая серия:

  • Ряды 1 и 4 определяют нижнюю и верхнюю часть вертикальной линии соответственно. Обычно они представляют собой минимальное и максимальное значения за день.
  • Ряды 2 и 3 определяют вертикальные границы прямоугольника. Серия 2 — это значение открытия, а серия 3 — значение закрытия. Цвет прямоугольника зависит от того, что выше: когда значение открытия (серия 2) ниже значения закрытия (серия 3), цена выросла, и прямоугольник по умолчанию заполняется сплошным зеленым цветом; когда значение открытия (серия 2) выше значения закрытия (серия 3), цена снижается, и прямоугольник по умолчанию заполняется сплошным красным цветом. Для прямоугольника можно указать только цвет заливки с уменьшающимся значением. Когда вы это укажете, прямоугольник с увеличивающимся значением будет незаполненным (пустым). Обратите внимание, что серия 2 может быть либо верхней, либо нижней частью прямоугольника, в зависимости от того, выросла или упала цена.

Вы можете комбинировать маркеры свечей с любыми другими параметрами chm , используя символ вертикальной черты ( | ) для разделения параметров chm .

Note: If you do not want the lines for the data used to draw the markers to appear in the chart, you must include a 0 after the format type. For example: chd=t0:10,20,30,40 in a text format data string. See Compound Charts for more information.

Here's an example, showing the lines for each series:

Syntax

chm=
  F,<opt_declining_color>,<data_series_index>,<opt_which_points>,<width>,<opt_z_order>
Ф
Indicates that this is a candlestick marker.
<opt_declining_color>
[ Optional ] Fill color for the rectangles when the value is decreasing (when series 2 value > corresponding series 3 value). This is an RRGGBB format hexadecimal number . When the values increase, the rectangle will be empty. Default is solid green for increasing, solid red for decreasing (you cannot specify a custom fill color for increasing values).
< data_series_index >
The index of the data series to use as the first series for your candlestick markers. This is a zero-based index. So, if you specify 1 here, and you have six series, the second, third, fourth and fifth will be used to draw candlestick markers.
<opt_which_points>
[ Optional ] Specifies which data points are used to draw markers. Default is all markers. Use one of the following formats:
  • nd - Draw a marker on a single point in the series, where nd is the index of the point in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all markers.
  • - n - Draw a marker on every n -th data point.
  • start:end:n - Draw a marker on every n -th data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3::1 would be from the fourth element to the last, step 1, and omitting this parameter entirely would default to first : last :1. All values can be floating point numbers. start and end can be negative, to count backward from the last value. If both start and end are negative, be sure that they are listed in increasing value (for example, -6:-1:1). If the n step value is less than 1, it will calculate additional data points by interpolating the data values given. Default values are first:last:1
<width>
The width of all rectangles, in pixels.
<opt_z_order>
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).

Examples

Описание Пример

Here's an example of candlestick markers on a line chart with four series. The custom fill color 0000FF (blue) is specified, and this color is used to fill the rectangles when the point in series 3 is smaller than the equivalent point in series 2.

The first and last rectangle are trimmed by the chart. To eliminate these values, you could specify 1:4 for the fourth parameter of chm.

Note the zero in the data string, to hide the lines for the series: chd=t0 . This indicates that all chart data is to be used for markers.

The < which_point > parameter is blank, which draws candlesticks on all data points.

Line chart with four orange lines and four financial markers

chd=t0:
0, 5,10, 7,12, 6|
35,25,45,47,24,46|
15,40,30,27,39,54|
70,55,63,59,80,60
chm=F,0000FF,0,,20

Here's an example of the same chart, using the default colors, and removing the first and last item.

This is a compound chart: it is a combination of a line chart (the base chart type) and candlestick markers. The value of 1 in cht=t:1 means that all data series after the first should be hidden from the basic chart type (line chart). The first 1 in chm=F,, 1 ,1:4,20 means that the candlestick data comes from series 2, 3, 4, and 5 (the 1 is zero-based). See Compound Charts for more information on how to draw a compound chart like this.

Line chart with one orange line and four financial markers.
cht=lc
chm=
F,,1,1:4,20

chd=t1:
15,40,30,27,39,54|
...

Back to top

,

Обзор

You can combine several chart types with line or candlestick markers to highlight data trends or show variance. When you add line or candlestick markers onto bar, scatter, or other chart types, the resulting chart is called a compound chart . Some compound charts look like a combination of two chart types—for instance, a bar chart with a tracking line:

Bar chart with tracking line

while others look like completely new chart types—for instance, a box chart:

box chart .

Creating a Compound Chart

All compound charts consist of one or more base chart types (line, scatter, bar, or radar) combined with one or more sets of markers. These markers require data to place them on the chart. Sometimes you can use the same data series as used to draw the bars or points on your chart, but typically you want the markers to have their own independent data sets. If you want your chart to have different data series for the base chart and for markers, you must hide the marker data from the base chart (so that it doesn't try to draw more bars or lines with that data). Here's how to do that:

  1. Add your marker data series to the end of your chd parameter . For example, if your bar chart had data chd=t:30,10,20 , you could add new data for a line marker like this: chd=t:30,10,20|60,40,50 .
  2. Hide your extra marker data from the base chart. If you simply add an extra data series to a bar chart for your tracking line, the chart would show that as a new series of bars. To prevent this, you must hide this extra series. To hide a series, include a single digit after the chd format descriptor: for example, chd=t 1 :30,10,20|60,40,50 . This digit tells the Chart API how many data series to use to draw elements for that base chart type as defined by the cht parameter (bars for bar charts, data points for line charts, and so on). Any additional data series will be ignored by that chart type when drawing the chart. Note that this is a 1-based number, not 0-based. So t1 means "use only the first data series for bars," t2 means "use only the first two series for bars," etc.
    1. Notes:
      1. Scatter charts - Scatter charts hide data in a different way; see the documentation for more details.
      2. lxy line charts - Specify an even number of series to display ( t0 , t2 , t4 , etc). This is because each line in an lxy chart is described by two data series: one for x-values, and one for y-values.
  3. Use the hidden data series to draw candlestick markers , line markers , or other markers. How to draw markers is covered in the linked sections. Reference the hidden data series as the source for your markers. You can include as many additional hidden data series as you like, and use them for additional chart markers.

Here's the chart we just described:

Bar chart with line marker
cht=bvg
chd=t1:30,10,20|60,40,50
chm=D,0033FF,1,0,5,1

Chart Types

Here is a list of marker types, and the chart types that they can be used with:

Marker Type Base Chart Types That Support It
Line Line , Scatter , Bar , Radar
Candlestick Line , Bar
All others Line , Scatter , Bar , Radar

Here are some examples of the types of compound charts that you can create:

Chart Type Описание Пример
Line marker charts Line markers can be used to show trends in many other chart types. Bar chart with line markerBar chart with line marker
Candlestick charts Candlestick charts are often used to show financial data. Line chart with one orange line and four financial markers.
Box charts

Box charts are used to show data grouped into range quartiles.

Line chart with one orange line and four financial markers.
Embedded charts You can embed a chart within another chart. Embedded chart
Other markers You can hide marker data in any of the acceptable base chart types and use it with any other kinds of markers that you like.
chd=t1:
10,20,30,40,50,60,70,80
5,10,15,20,25,30,35,40,45,50
chm=o,000000,1,-1,5

Back to top

Line Marker Charts

You can add lines to line , scatter , bar , or radar charts to highlight trends.

Base Type + Marker Type Описание Пример
Bar + Line

Here is a bar chart with a trace line. The first two data series are used for the stacked bars, and the remaining series is used for the line. chd=s2 indicates that the chart should use only the first two series for bars. The line uses the third series for its data.

  • chd=s2:1XQbnf4,EWoQMUB,9halxp9 - Simple encoding, where the first two series are used to draw the bars, and the last series is used for the line.
  • chm=D,0033FF,2,0,5,1 - Trace line (D), blue, data from series index 2, all points (0), line is 5 pixels wide, and has a z-order of 1.
Bar chart with line marker
chm=
D,0033FF,2,0,5,1
chd=s2:
1XQbnf4,
EWoQMUB,
9halxp9
Scatter + Line You can add a line to a scatter chart to show averages. Note that scatter charts hide marker data in a different way ; see Scatter Charts for more details.
chd=t:
12,16,16,24,26,28,41,51,66,68,13,45,81|
16,14,22,34,22,31,31,48,71,64,15,38,84
chm=
o,0000FF,0,-1,0|
o,FF0000,0,0:9:,5|
D,000000,1,10:,1,-1
Bar + Line

Here is another stacked bar chart with an independent line drawn over it.

Bar chart with line marker
cht=bvs
chd=t2:
0,10,20,30,20,70,80|
0,20,10,5,20,30,10|
10,0,20,15,60,40,30
chm=D,76A4FB,2,0,3
Bar + Circles Same as the previous chart, but with circle markers instead of a line marker. We've specified every 0.5 data value, which adds calculated intermediary points in the dotted line. Bar chart with line marker
cht=bvs
chd=t2:
0,10,20,30,20,70,80|
0,20,10,5,20,30,10|
10,0,20,15,60,40,30
chm=o,76A4FB,2,-.5,10

Back to top

Candlestick Charts

Candlestick charts require at least four data series to draw the candlesticks, plus additional series for any other chart elements. Candlestick charts can show only a set of candlestick markers , or can be a combination of candlestick markers plus bar or line charts, as shown here:

Base Type + Marker Type Описание Пример
Line (hidden) + Candlestick

This example shows a chart showing only candlestick markers.

  • chd=t0 - The 0 means that all data series are hidden from the basic chart type (here, a line chart), so only the candlesticks are drawn. The first and last values in each series are -1 to indicate missing values to avoid drawing the first or last candlestick, which would overlap the axis or chart margin and be cut off.
  • chm=F,0000FF,0,-1,20 - The F indicates candlestick markers (originally "financial markers"); 0000FF means that the markers are blue when the value is decreasing; the 0 indicates that the candlestick data starts at series 0; -1 indicates markers on all points (we could have also specified 0:4 here to hide the first and last candlestick instead of using -1 data values); 20 is the width of the candlesticks.
Basic candlestick chart
cht=lc
chd=t0:
-1,5,10,7,12,-1|
-1,25,45,47,24,-1|
-1,40,30,27,39,-1|
-1,55,63,59,80,-1
chm=F,0000FF,0,-1,20
Line + Candlestick

Here's an example of a line chart with candlestick markers.

Five data series are provided; the first is used for the chart type (line), and the remaining "hidden" data series are used for the candlestick markers. The chd=t1 parameter specifies that only the first series is used for that chart type (line chart).

We omitted the first and last candlestick markers using 1:4 in the < which_points > value, because first and last candlesticks are cropped by the chart area borders.

The chm parameter specifies the candlestick markers, with the syntax F,< declining_color >,< data_series_index >,< which_points >,< width >,< order >

Line chart with one orange line and four financial markers.
cht=lc
chd=t1:
20,10,15,25,17,30|
0,5,10,7,12,6|
35,25,45,47,24,46|
15,40,30,27,39,54|
70,55,63,59,80,6
chm=
F,,1,1:4,20

Line + Candlestick

Another example of a candlestick chart, but with custom fill colors.

Bar chart with line marker
chd=t1:
t1:
90,80,70,50,40,30,20,10|
0,5,10,0,5,10,0|2,15,20,5,15,40,0|
5,35,20,2,35,20,0|
15,40,30,15,40,50,0
chm=
F,000000,1,1:-2,20
Bar + Candlestick

Here is an example of a bar chart with candlestick markers.

We show the first and last candlestick markers here, because the bars add enough spacing to prevent them from being cropped by the chart boundaries.

Line chart with one orange line and four financial markers.
cht=bvg
chd=t1:
20,10,15,25,17,30|
0,5,10,7,12,6|
35,25,45,47,24,46|
15,40,30,27,39,54|
70,55,63,59,80,6
chm=
F,,1,1:4,20

Back to top

Box Charts

Box charts , also called box plots or box and whisker charts , are a type of chart that shows the grouping of one or more series into quartiles ( quartiles are groups that span 25% of the range of values, with the possible exception of outliers). Box charts are similar to candlestick charts, but with added markers for the bottom and top of the candlestick, plus a 50th percentile marker.

A box chart is made up completely of markers, as shown here:

Candlestick marker
chm=
F,0000FF,0,1,10
Candlestick marker
chm=
H,0000FF,0,1,1:10|
H,0000FF,3,1,1:10|
H,0000FF,4,1,1:10
Candlestick marker
chm=
o,FF0000,5,,5|
o,FF0000,6,,5
Candlestick marker
One set of candlestick markers ( chm=F ), for the body of the boxes: One set of adjustable-length horizontal line shape markers ( chm=H ) for the minimum, 50th, and 100th percentile lines: Optionally some circle shape markers ( chm=o ) to show outliers in the data set. Put them all together, and you have a box chart!

The base chart type for box charts is any of the bar chart types ( bhs , bvs , bhg , bvg ) or line chart types ( lc , ls , lxy ). But if you are hiding the base chart type by adding a zero in the data format parameter (for example: chd=t0: or chd=s0: ), it doesn't matter which chart type you choose.

A box chart must have at least five data series: four for the boxes and the maximum and minimum markers; one for the 50% marker; plus any additional data series for any additional markers that you might want, such as outlier markers. Here is the recommended series order. Note that if the value in series 1 is more than the corresponding value in series 2, the box will be filled with the chm=F marker color; if the value in series 1 is less than the value in series 2, the box will be unfilled. See Candlestick Markers for more information.

Series order for an unfilled box:

  1. Minimum value
  2. 25% marker (75% for a filled box)
  3. 75% marker (25% for a filled box)
  4. Maximum value
  5. 50% marker
  6. Series six and beyond are for any additional marker data, such as outliers.

You can actually put the additional marker series before or after the candlestick marker data, but it is simpler to put them all last.

You can make different styles of box charts by specifying different markers, different base chart types, or ordering the data differently

Описание Пример

This is a standard box chart, but with different colors assigned to the different chart elements to highlight which marker is being used to create each chart element.

  • cht=bvs - The base chart type is bvs , but no bars from this base chart are actually shown. We could have specified any compound chart type here.
  • chd=t0 : - The t0 hides all lines in this line chart. All data will be used only for markers. In the data, the first and last values are -1 to avoid having markers that overlap the left and right edges of the chart. All values in the second series are lower than the corresponding values in the third series, so all boxes are unfilled.
    • -1,5,10,7,12,-1 - Minimum value: bottom point of lower orange sticks; also the height of the horizontal green lines.
    • -1,25,30,27,24,-1 - 25% value: bottom horizontal edge of orange boxes.
    • -1,40,45,47,39,-1 - 75% value: top horizontal edge of orange boxes.
    • -1,55,63,59,80,-1 - Maximum value: top point of upper orange sticks; also the height of the horizontal blue lines.
    • -1,30,40,35,30,-1 - Black horizontal "Median" lines inside the candlesticks.
    • -1,-1,5,70,90,-1 - Outlier data (red circles)
    • -1,-1,-1,80,5,-1 - More outliers data (red circles). The outliers data is broken into two sets because you cannot have two markers, one above the other, specified in the same series without using offsets or other complicated tricks.
  • chm= - Marker data, as described below:
    • F,FF9900,0,1:4,40 - Orange candlestick markers ( F ) using four data series starting at the first series ( 0 ), on points 1—4, size 40.
    • H,0CBF0B,0,1:4,1:20 - Green horizontal line markers showing the min value. These come from the first series.
    • H,0000FF,3,1:4,1:20 - Blue horizontal line markers showing the max value. These come from series 3.
    • H,000000,4,1:4,1:40 - Black horizontal line markers showing the 50% value. These come from series 4.
    • o,FF0000,5,-1,7 - Red circles assigned to the sixth data series for outliers. Markers are assigned to all elements in this series, which uses -1 for boxes without an outlier.
    • o,FF0000,6,-1,7 - More outliers. Another data series is required when you want to stack outliers on top of each other around the same box.

Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue

cht=bvs
chd=t0:
-1,5,10,7,12,-1|
-1,25,30,27,24,-1|
-1,40,45,47,39,-1|
-1,55,63,59,80,-1|
-1,30,40,35,30,-1|
-1,-1,5,70,90,-1|
-1,-1,-1,80,5,-1
chm=
F,FF9900,0,1:4,40|
H,0CBF0B,0,1:4,1:20|
H,000000,4,1:4,1:40|
H,0000FF,3,1:4,1:20|
o,FF0000,5,-1,7|
o,FF0000,6,-1,7

The lc chart type will always show axis lines. To create a chart without axis lines, specify a chart type of ls.
Chart type lc shows borders
cht=lc
Chart type ls doesn't show borders
cht=ls
To create a filled box, make the point in the second series greater than the corresponding point in the third series. The larger value is marked in red in the code shown on the right. Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue
chd=t0:
-1,5,10,7,12,-1
-1, 40 ,30,27,24,-1
-1,25, 45 , 47 , 39 ,-1
-1,55,63,59,80,-1

Back to top

Embedded Charts

Pie chart embedded in a line chart

You can embed any chart type inside a bar , line , radar , or scatter chart using dynamic icons. See the Embedded Charts section of the Dynamic Icons ( chem ) marker documentation.

Back to top

Standard Features

The rest of the features on this page are standard chart features.

Line Markers chm=D [ Bar, Candlestick, Line, Radar, Scatter ]

You can add a line that traces data in your chart. Most often, this is used in compound charts .

To add multiple lines (or combine this with any other chm markers), separate the chm parameter sets using a pipe ( | ) delimiter. You cannot make a dashed line marker with this parameter.

Syntax

chm=
  D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>
Д
Indicates that this is a line marker.
< color >
The color of the line, in RRGGBB hexadecimal format .
< series_index >
The index of the data series used to draw the line. The data series index is 0 for the first data series, 1 for the second data series, and so on.
< which_points >
Which points in a series to use to draw the line. Use one of the following values:
  • 0 - Use all the points in the series.
  • start:end - Use a specific range of points in the series, from the start to end , inclusive (zero-based index). You can also use floating point values to specify intermediate points, or leave start or end blank to indicate the first or last data point, respectively. start and end can be negative, as a reverse index from the last value. If both start and end are negative, be sure to write them in increasing value (for example, -6:-1).
< size >
The width of the line in pixels.
< opt_z_order >
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).

Examples

Описание Пример

This is an example of drawing a marker line on a bar chart. The z-order is set to 1 , so the line is drawn on top of the bars.

This example uses the same data for both the bars and the data line.
Bar chart with line marker
chm=D,0033FF,0,0,5,1
chd=s:1XQbnf4

This is the same bar chart, but with an additional data series just for the line. This is an example of a compound chart. Compound charts are drawn by adding additional data series to the chd parameter, plus a value to chd telling the chart to "ignore" the additional data series.

See Compound Charts for more information.

Bar chart with line marker
chm=D,0033FF,1,0,5,1
chd=s1:1XQbnf4,43ksfg6

Back to top

Shape Markers chm [ Bar, Line, Radar, Scatter ]

You can specify graphical markers for all or individual data points on a chart. If two or more markers occupy the same point, the markers are drawn in the order in which they appear in the chm parameter. You can also create text markers on data points, which is covered in Data Point Markers .

You can combine shape markers with any other chm parameters using a pipe character ( | ) to separate the chm parameters.

Syntax

Specify one set of the following parameters for each series that should be marked. To mark multiple series, create additional parameter sets, delimited by a pipe character. You do not need to mark up all series. If you do not assign markers to a data series, it will not get any markers.

Shape markers behave slightly differently in scatter charts . See that documentation for more information.

chm=
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
    |...|
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
@
[ Optional ] If you precede the marker type with the optional @ character, then < opt_which_points > should use the x:y format.
<marker_type>
The type of marker to use. Specify one of the following types:
  • a - Arrow
  • c - Cross
  • C - Rectangle. If a rectangle marker, you must have at least two data series, where series 0 specifies the bottom edge and series 1 specifies the top edge. < size > specifies the width of the rectangle, in pixels.
  • d - Diamond
  • E - Error-bar marker ( ) This marker requires two data series to create, one value for the bottom, and the corresponding point in the second series for the top. It also exposes an extended < size > syntax: line_thickness [: top_and_bottom_width ] where top_and_bottom_width is optional. See the examples below.
  • h - Horizontal line across the chart at a specified height. ( The only valid format for < opt_which_points > parameter is nd . )
  • H - Horizontal line through the specified data marker. This supports an extended < size > syntax that lets you specify an exact line length: line_thickness [: length ] where : length is optional, and defaults to the full chart area width.
  • o - Circle
  • s - Square
  • v - Vertical line from the x-axis to the data point
  • V - Vertical line of adjustable length. This supports an extended < size > value syntax that lets you specify an exact line length: line_thickness [: length ] where : length is optional, and defaults to the full chart area height. The marker is centered on the data point.
  • x - An X
< color >
The color of the markers for this series, in RRGGBB hexadecimal format .
< series_index >
The zero-based index of the data series on which to draw the markers. Ignored for h markers and markers that specify location by x/y position (start with the @ character). You can use hidden data series as a source for markers; see Compound Charts for more information. Grouped vertical bar charts support a special extended syntax to align markers with specific bars.
< opt_which_points >
[ Optional ] Which point(s) to draw markers on. Default is all markers. Use one of the following values:
  • nd - Where to draw the marker. The meaning depends on the marker type:
    • All types except h - Which data point to draw the marker on, where nd is the zero-based index in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
    • h - A number from 0.0 to 1.0, where 0.0 is the bottom of the chart, and 1.0 is the top of the chart.
  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all data points.
  • - n - Draw a marker on every n -th data point. Floating point value; if n is less than 1 the chart will calculate additional intermediary points for you. For example, -0.5 will put twice as many markers as data points.
  • start:end:n - Draw a marker on every n -th data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3::1 would be from the fourth element to the last, step 1, and omitting this parameter entirely would default to first : last :1. All values can be floating point numbers. start and end can be negative, to count backward from the last value. If both start and end are negative, be sure that they are listed in increasing value (for example, -6:-1:1). If the n step value is less than 1, it will calculate additional data points by interpolating the data values given. Default values are first:last:1
  • x : y - Draw a marker at a specific x/y point on the chart. This point does not have to be on a line. Add the @ character before the marker type to use this option. Specify the coordinates as floating point values, where 0:0 is the bottom left corner of the chart and 1:1 is the top right corner of the chart. For example, to add a red, 15-pixel diamond to the center of a chart, use @d,FF0000,0,0.5:0.5,15 .
< size >
The size of the marker, in pixels. Most take a single number value for this parameter; the V, H, and S markers support the syntax < size >[: width ] where the optional second part specifies the line or marker length.
< opt_z_order >
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).
< opt_offset >
[ Optional ] Let you specify horizontal and vertical offsets from the specified location. Here is the syntax, which uses a : delimiter: reserved :< horizontal_offset >:< vertical_offset > . If specified, you can include an empty ,, value in the chm parameter string for < opt_z_order >. Examples: o,FF9900,0,4,12,, :10 o,FF9900,0,4,12.0,, :-10:20 o,FF9900,0,4,12,1, ::20
  • reserved - Leave blank.
  • < horizontal_offset > - A positive or negative number specifying the horizontal offset, in pixels. Optional; leave blank if not used.
  • < vertical_offset > - A positive or negative number specifying the vertical offset, in pixels. Optional; leave blank if not used.

Examples

Описание Пример

Here's an example of several of the shape and line markers.

  • a,990066,0,0.0,9.0 - Purple arrow, first series, first point, size 9.
  • c,FF0000,0,1.0,20.0 - Red cross, first series, second point, size 9.
  • d,80C65A,0,2,20.0 - Green diamond, first series, third point, size 9.
  • H,000000,0,3,1:40 - Black horizontal line, first series, data point 3, one pixel wide, forty pixels long.
  • o,FF9900,0,4.0,12.0 - Orange circle, first series, fifth point, size 12.
  • s,3399CC,0,5.0,11.0 - Blue square, first series, sixth point, size 11.
  • v,BBCCED,0,6.0,1.0 - Vertical line up to point, first series, seventh point, one pixel wide.
  • V,3399CC,0,7.0,1.0 - Vertical line bottom to top of chart, first series, eighth point, one pixel wide.
  • x,FFCC33,0,8.0,20.0 - Yellow 'X', first series, ninth point, size 20.
  • H,FFFF00,0,9,2 - Horizontal yellow line the width of the chart at data point 9.
  • h,FF0000,0,0.5,1 - Red horizontal line at designated height, first series, halfway up the chart, one pixel wide.
Line chart with markers
chm=
a,990066,0,0.0,9.0|
c,FF0000,0,1.0,20|
d,80C65A,0,2.0,20.0|
H,000000,0,3,1:40|
o,FF9900,0,4.0,12.0|
s,3399CC,0,5.0,11.0|
v,BBCCED,0,6,1.0|
V,3399CC,0,7,1.0|
x,FFCC33,0,8,20|
H,FFFF00,0,9,2|
h,FF0000,0,0.5,1

Here's an example using diamonds for one data series, and circles for the other data series.

If two or more markers occupy the same point, the markers are drawn in the order in which they appear in the chm parameter. Here, the circle is the first marker specified with chm , so it is drawn first. The diamond is specified and drawn second, which results in it being drawn on top of the circle.

Line chart, one line has 15 pixel circles on each data point the other line has 10 pixel diamonds. A diamond is drawn on the point that is common to both lines
chm=
o,FF9900,0,-1,15.0|
d,FF0000,1,-1,10.0

Here's a line chart with a marker on every second data point (-2 means every other point).

Line chart with marker on every second point
chd=t:
0,20,20,50,40,70,70,90,85,45,40,50
chm=
o,0066FF,0,-2,6
Here's a line chart with twice as many markers as data points (-0.5 means every half point). Line chart with marker on every second point
chd=t:
0,20,20,50,40,70,70,90,85,45,40,50
chm=
o,0066FF,0,-.5,6
This example shows how to use h and v markers to create grid lines with custom colors and thickness. The z-order value (the last value) is set to -1 so that the grid lines are drawn beneath the data line.
Line chart with marker on every second point
chm=
h,76A4FB,0,0:1:.2,2,-1|
V,76A4FB,0,::2,0.5,-1

This chart adds vertical fill lines to a line chart:

  • v - Vertical lines to the chart
  • FF0000 - Red lines
  • 0 - Series index
  • : :.5 - Range specifier: from start to end, every 0.5 points.
  • 2 - Thickness 2 pixels.
Line chart with marker on every second point
chm=
v,FF0000,0,::.5,2
This example adds an arrow and text marker to the chart using exact coordinates. The first D marker is the trace line under the bars. The second marker is the arrow, and the third marker is the arrow text.
chm=
D,003971,1,0,3|
@a,000000,0,.25:.75,7|
@tExpected,000000,0,.35:.85,10
A horizontal line fixed to a specific data point ( H ) can be useful for showing relative values, or emphasizing the height of a data value on a chart.
chm=H,FF0000,0,18,1

This graph demonstrates the markers that can specify line thickness and length in the < size > parameter.

  • E,000000,0,6,1:20 - Black error bar with 1 pixel wide lines, top and bottom bars 20 pixels long. The bottom is anchored to series 0 point 8, the top is anchored to series 1 point 8.
  • H,990066,1,2,5:50 - Purple, horizontal line five pixels wide, fifty pixels long centered on data point 2.
  • V,3399CC,0,8,3:50 - Blue, vertical line 3 pixels wide, fifty pixels long, centered on data point 8.
title="cht=lc&chd=s:2gounjqLaCf,jqLaCf2goun&chco=008000,00008033&chls=2.0,4.0,1.0&chs=250x150&chm=H,990066,1,2,5:50%7CV,3399CC,0,8,3:50%7CE,000000,0,6,1:20" src="/chart/image/images/chart_95.png" />
chm=
E,000000,0,6,1:20|
H,990066,1,2,5:50|
V,3399CC,0,8,3:50

Back to top

Candlestick Markers chm=F [ Bar, Line ]

Candlestick markers indicate variance and direction change in a data series. Often they are used to show stock values during the course of a day. The marker includes segments that show the high and low value, as well as the opening and closing value for a specific time period (typically a day). For more about candlestick markers, see here .

A candlestick marker is drawn as a rectangle bisected by a vertical line. It requires four data series to draw a candlestick marker; here is what each series specifies:

  • Series 1 and 4 specify the bottom and top of the vertical line, respectively. These typically represent the low and high values for the day.
  • Series 2 and 3 specify the vertical borders of the rectangle. Series 2 is the opening value, and series 3 is the closing value. The color of the rectangle depends on which is higher: when the opening value (series 2) is lower than the closing value (series 3), the price has increased, and the rectangle is filled with solid green by default; when the opening value (series 2) is higher than the closing value (series 3), the price has decreased, and the rectangle is filled with solid red by default. You can only specify a fill color for the rectangle with decreasing value. When you specify that, the rectangle with increasing value is unfilled (empty). Note that series 2 can be either the top or the bottom of the rectangle, depending on whether the price has gone up or down.

You can combine candlestick markers with any other chm parameters using a pipe character ( | ) to separate the chm parameters.

Note: If you do not want the lines for the data used to draw the markers to appear in the chart, you must include a 0 after the format type. For example: chd=t0:10,20,30,40 in a text format data string. See Compound Charts for more information.

Here's an example, showing the lines for each series:

Syntax

chm=
  F,<opt_declining_color>,<data_series_index>,<opt_which_points>,<width>,<opt_z_order>
Ф
Indicates that this is a candlestick marker.
<opt_declining_color>
[ Optional ] Fill color for the rectangles when the value is decreasing (when series 2 value > corresponding series 3 value). This is an RRGGBB format hexadecimal number . When the values increase, the rectangle will be empty. Default is solid green for increasing, solid red for decreasing (you cannot specify a custom fill color for increasing values).
< data_series_index >
The index of the data series to use as the first series for your candlestick markers. This is a zero-based index. So, if you specify 1 here, and you have six series, the second, third, fourth and fifth will be used to draw candlestick markers.
<opt_which_points>
[ Optional ] Specifies which data points are used to draw markers. Default is all markers. Use one of the following formats:
  • nd - Draw a marker on a single point in the series, where nd is the index of the point in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all markers.
  • - n - Draw a marker on every n -th data point.
  • start:end:n - Draw a marker on every n -th data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3::1 would be from the fourth element to the last, step 1, and omitting this parameter entirely would default to first : last :1. All values can be floating point numbers. start and end can be negative, to count backward from the last value. If both start and end are negative, be sure that they are listed in increasing value (for example, -6:-1:1). If the n step value is less than 1, it will calculate additional data points by interpolating the data values given. Default values are first:last:1
<width>
The width of all rectangles, in pixels.
<opt_z_order>
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).

Examples

Описание Пример

Here's an example of candlestick markers on a line chart with four series. The custom fill color 0000FF (blue) is specified, and this color is used to fill the rectangles when the point in series 3 is smaller than the equivalent point in series 2.

The first and last rectangle are trimmed by the chart. To eliminate these values, you could specify 1:4 for the fourth parameter of chm.

Note the zero in the data string, to hide the lines for the series: chd=t0 . This indicates that all chart data is to be used for markers.

The < which_point > parameter is blank, which draws candlesticks on all data points.

Line chart with four orange lines and four financial markers

chd=t0:
0, 5,10, 7,12, 6|
35,25,45,47,24,46|
15,40,30,27,39,54|
70,55,63,59,80,60
chm=F,0000FF,0,,20

Here's an example of the same chart, using the default colors, and removing the first and last item.

This is a compound chart: it is a combination of a line chart (the base chart type) and candlestick markers. The value of 1 in cht=t:1 means that all data series after the first should be hidden from the basic chart type (line chart). The first 1 in chm=F,, 1 ,1:4,20 means that the candlestick data comes from series 2, 3, 4, and 5 (the 1 is zero-based). See Compound Charts for more information on how to draw a compound chart like this.

Line chart with one orange line and four financial markers.
cht=lc
chm=
F,,1,1:4,20

chd=t1:
15,40,30,27,39,54|
...

Back to top

,

Обзор

You can combine several chart types with line or candlestick markers to highlight data trends or show variance. When you add line or candlestick markers onto bar, scatter, or other chart types, the resulting chart is called a compound chart . Some compound charts look like a combination of two chart types—for instance, a bar chart with a tracking line:

Bar chart with tracking line

while others look like completely new chart types—for instance, a box chart:

box chart .

Creating a Compound Chart

All compound charts consist of one or more base chart types (line, scatter, bar, or radar) combined with one or more sets of markers. These markers require data to place them on the chart. Sometimes you can use the same data series as used to draw the bars or points on your chart, but typically you want the markers to have their own independent data sets. If you want your chart to have different data series for the base chart and for markers, you must hide the marker data from the base chart (so that it doesn't try to draw more bars or lines with that data). Here's how to do that:

  1. Add your marker data series to the end of your chd parameter . For example, if your bar chart had data chd=t:30,10,20 , you could add new data for a line marker like this: chd=t:30,10,20|60,40,50 .
  2. Hide your extra marker data from the base chart. If you simply add an extra data series to a bar chart for your tracking line, the chart would show that as a new series of bars. To prevent this, you must hide this extra series. To hide a series, include a single digit after the chd format descriptor: for example, chd=t 1 :30,10,20|60,40,50 . This digit tells the Chart API how many data series to use to draw elements for that base chart type as defined by the cht parameter (bars for bar charts, data points for line charts, and so on). Any additional data series will be ignored by that chart type when drawing the chart. Note that this is a 1-based number, not 0-based. So t1 means "use only the first data series for bars," t2 means "use only the first two series for bars," etc.
    1. Notes:
      1. Scatter charts - Scatter charts hide data in a different way; see the documentation for more details.
      2. lxy line charts - Specify an even number of series to display ( t0 , t2 , t4 , etc). This is because each line in an lxy chart is described by two data series: one for x-values, and one for y-values.
  3. Use the hidden data series to draw candlestick markers , line markers , or other markers. How to draw markers is covered in the linked sections. Reference the hidden data series as the source for your markers. You can include as many additional hidden data series as you like, and use them for additional chart markers.

Here's the chart we just described:

Bar chart with line marker
cht=bvg
chd=t1:30,10,20|60,40,50
chm=D,0033FF,1,0,5,1

Chart Types

Here is a list of marker types, and the chart types that they can be used with:

Marker Type Base Chart Types That Support It
Line Line , Scatter , Bar , Radar
Candlestick Line , Bar
All others Line , Scatter , Bar , Radar

Here are some examples of the types of compound charts that you can create:

Chart Type Описание Пример
Line marker charts Line markers can be used to show trends in many other chart types. Bar chart with line markerBar chart with line marker
Candlestick charts Candlestick charts are often used to show financial data. Line chart with one orange line and four financial markers.
Box charts

Box charts are used to show data grouped into range quartiles.

Line chart with one orange line and four financial markers.
Embedded charts You can embed a chart within another chart. Embedded chart
Other markers You can hide marker data in any of the acceptable base chart types and use it with any other kinds of markers that you like.
chd=t1:
10,20,30,40,50,60,70,80
5,10,15,20,25,30,35,40,45,50
chm=o,000000,1,-1,5

Back to top

Line Marker Charts

You can add lines to line , scatter , bar , or radar charts to highlight trends.

Base Type + Marker Type Описание Пример
Bar + Line

Here is a bar chart with a trace line. The first two data series are used for the stacked bars, and the remaining series is used for the line. chd=s2 indicates that the chart should use only the first two series for bars. The line uses the third series for its data.

  • chd=s2:1XQbnf4,EWoQMUB,9halxp9 - Simple encoding, where the first two series are used to draw the bars, and the last series is used for the line.
  • chm=D,0033FF,2,0,5,1 - Trace line (D), blue, data from series index 2, all points (0), line is 5 pixels wide, and has a z-order of 1.
Bar chart with line marker
chm=
D,0033FF,2,0,5,1
chd=s2:
1XQbnf4,
EWoQMUB,
9halxp9
Scatter + Line You can add a line to a scatter chart to show averages. Note that scatter charts hide marker data in a different way ; see Scatter Charts for more details.
chd=t:
12,16,16,24,26,28,41,51,66,68,13,45,81|
16,14,22,34,22,31,31,48,71,64,15,38,84
chm=
o,0000FF,0,-1,0|
o,FF0000,0,0:9:,5|
D,000000,1,10:,1,-1
Bar + Line

Here is another stacked bar chart with an independent line drawn over it.

Bar chart with line marker
cht=bvs
chd=t2:
0,10,20,30,20,70,80|
0,20,10,5,20,30,10|
10,0,20,15,60,40,30
chm=D,76A4FB,2,0,3
Bar + Circles Same as the previous chart, but with circle markers instead of a line marker. We've specified every 0.5 data value, which adds calculated intermediary points in the dotted line. Bar chart with line marker
cht=bvs
chd=t2:
0,10,20,30,20,70,80|
0,20,10,5,20,30,10|
10,0,20,15,60,40,30
chm=o,76A4FB,2,-.5,10

Back to top

Candlestick Charts

Candlestick charts require at least four data series to draw the candlesticks, plus additional series for any other chart elements. Candlestick charts can show only a set of candlestick markers , or can be a combination of candlestick markers plus bar or line charts, as shown here:

Base Type + Marker Type Описание Пример
Line (hidden) + Candlestick

This example shows a chart showing only candlestick markers.

  • chd=t0 - The 0 means that all data series are hidden from the basic chart type (here, a line chart), so only the candlesticks are drawn. The first and last values in each series are -1 to indicate missing values to avoid drawing the first or last candlestick, which would overlap the axis or chart margin and be cut off.
  • chm=F,0000FF,0,-1,20 - The F indicates candlestick markers (originally "financial markers"); 0000FF means that the markers are blue when the value is decreasing; the 0 indicates that the candlestick data starts at series 0; -1 indicates markers on all points (we could have also specified 0:4 here to hide the first and last candlestick instead of using -1 data values); 20 is the width of the candlesticks.
Basic candlestick chart
cht=lc
chd=t0:
-1,5,10,7,12,-1|
-1,25,45,47,24,-1|
-1,40,30,27,39,-1|
-1,55,63,59,80,-1
chm=F,0000FF,0,-1,20
Line + Candlestick

Here's an example of a line chart with candlestick markers.

Five data series are provided; the first is used for the chart type (line), and the remaining "hidden" data series are used for the candlestick markers. The chd=t1 parameter specifies that only the first series is used for that chart type (line chart).

We omitted the first and last candlestick markers using 1:4 in the < which_points > value, because first and last candlesticks are cropped by the chart area borders.

The chm parameter specifies the candlestick markers, with the syntax F,< declining_color >,< data_series_index >,< which_points >,< width >,< order >

Line chart with one orange line and four financial markers.
cht=lc
chd=t1:
20,10,15,25,17,30|
0,5,10,7,12,6|
35,25,45,47,24,46|
15,40,30,27,39,54|
70,55,63,59,80,6
chm=
F,,1,1:4,20

Line + Candlestick

Another example of a candlestick chart, but with custom fill colors.

Bar chart with line marker
chd=t1:
t1:
90,80,70,50,40,30,20,10|
0,5,10,0,5,10,0|2,15,20,5,15,40,0|
5,35,20,2,35,20,0|
15,40,30,15,40,50,0
chm=
F,000000,1,1:-2,20
Bar + Candlestick

Here is an example of a bar chart with candlestick markers.

We show the first and last candlestick markers here, because the bars add enough spacing to prevent them from being cropped by the chart boundaries.

Line chart with one orange line and four financial markers.
cht=bvg
chd=t1:
20,10,15,25,17,30|
0,5,10,7,12,6|
35,25,45,47,24,46|
15,40,30,27,39,54|
70,55,63,59,80,6
chm=
F,,1,1:4,20

Back to top

Box Charts

Box charts , also called box plots or box and whisker charts , are a type of chart that shows the grouping of one or more series into quartiles ( quartiles are groups that span 25% of the range of values, with the possible exception of outliers). Box charts are similar to candlestick charts, but with added markers for the bottom and top of the candlestick, plus a 50th percentile marker.

A box chart is made up completely of markers, as shown here:

Candlestick marker
chm=
F,0000FF,0,1,10
Candlestick marker
chm=
H,0000FF,0,1,1:10|
H,0000FF,3,1,1:10|
H,0000FF,4,1,1:10
Candlestick marker
chm=
o,FF0000,5,,5|
o,FF0000,6,,5
Candlestick marker
One set of candlestick markers ( chm=F ), for the body of the boxes: One set of adjustable-length horizontal line shape markers ( chm=H ) for the minimum, 50th, and 100th percentile lines: Optionally some circle shape markers ( chm=o ) to show outliers in the data set. Put them all together, and you have a box chart!

The base chart type for box charts is any of the bar chart types ( bhs , bvs , bhg , bvg ) or line chart types ( lc , ls , lxy ). But if you are hiding the base chart type by adding a zero in the data format parameter (for example: chd=t0: or chd=s0: ), it doesn't matter which chart type you choose.

A box chart must have at least five data series: four for the boxes and the maximum and minimum markers; one for the 50% marker; plus any additional data series for any additional markers that you might want, such as outlier markers. Here is the recommended series order. Note that if the value in series 1 is more than the corresponding value in series 2, the box will be filled with the chm=F marker color; if the value in series 1 is less than the value in series 2, the box will be unfilled. See Candlestick Markers for more information.

Series order for an unfilled box:

  1. Minimum value
  2. 25% marker (75% for a filled box)
  3. 75% marker (25% for a filled box)
  4. Maximum value
  5. 50% marker
  6. Series six and beyond are for any additional marker data, such as outliers.

You can actually put the additional marker series before or after the candlestick marker data, but it is simpler to put them all last.

You can make different styles of box charts by specifying different markers, different base chart types, or ordering the data differently

Описание Пример

This is a standard box chart, but with different colors assigned to the different chart elements to highlight which marker is being used to create each chart element.

  • cht=bvs - The base chart type is bvs , but no bars from this base chart are actually shown. We could have specified any compound chart type here.
  • chd=t0 : - The t0 hides all lines in this line chart. All data will be used only for markers. In the data, the first and last values are -1 to avoid having markers that overlap the left and right edges of the chart. All values in the second series are lower than the corresponding values in the third series, so all boxes are unfilled.
    • -1,5,10,7,12,-1 - Minimum value: bottom point of lower orange sticks; also the height of the horizontal green lines.
    • -1,25,30,27,24,-1 - 25% value: bottom horizontal edge of orange boxes.
    • -1,40,45,47,39,-1 - 75% value: top horizontal edge of orange boxes.
    • -1,55,63,59,80,-1 - Maximum value: top point of upper orange sticks; also the height of the horizontal blue lines.
    • -1,30,40,35,30,-1 - Black horizontal "Median" lines inside the candlesticks.
    • -1,-1,5,70,90,-1 - Outlier data (red circles)
    • -1,-1,-1,80,5,-1 - More outliers data (red circles). The outliers data is broken into two sets because you cannot have two markers, one above the other, specified in the same series without using offsets or other complicated tricks.
  • chm= - Marker data, as described below:
    • F,FF9900,0,1:4,40 - Orange candlestick markers ( F ) using four data series starting at the first series ( 0 ), on points 1—4, size 40.
    • H,0CBF0B,0,1:4,1:20 - Green horizontal line markers showing the min value. These come from the first series.
    • H,0000FF,3,1:4,1:20 - Blue horizontal line markers showing the max value. These come from series 3.
    • H,000000,4,1:4,1:40 - Black horizontal line markers showing the 50% value. These come from series 4.
    • o,FF0000,5,-1,7 - Red circles assigned to the sixth data series for outliers. Markers are assigned to all elements in this series, which uses -1 for boxes without an outlier.
    • o,FF0000,6,-1,7 - More outliers. Another data series is required when you want to stack outliers on top of each other around the same box.

Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue

cht=bvs
chd=t0:
-1,5,10,7,12,-1|
-1,25,30,27,24,-1|
-1,40,45,47,39,-1|
-1,55,63,59,80,-1|
-1,30,40,35,30,-1|
-1,-1,5,70,90,-1|
-1,-1,-1,80,5,-1
chm=
F,FF9900,0,1:4,40|
H,0CBF0B,0,1:4,1:20|
H,000000,4,1:4,1:40|
H,0000FF,3,1:4,1:20|
o,FF0000,5,-1,7|
o,FF0000,6,-1,7

The lc chart type will always show axis lines. To create a chart without axis lines, specify a chart type of ls.
Chart type lc shows borders
cht=lc
Chart type ls doesn't show borders
cht=ls
To create a filled box, make the point in the second series greater than the corresponding point in the third series. The larger value is marked in red in the code shown on the right. Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue
chd=t0:
-1,5,10,7,12,-1
-1, 40 ,30,27,24,-1
-1,25, 45 , 47 , 39 ,-1
-1,55,63,59,80,-1

Back to top

Embedded Charts

Pie chart embedded in a line chart

You can embed any chart type inside a bar , line , radar , or scatter chart using dynamic icons. See the Embedded Charts section of the Dynamic Icons ( chem ) marker documentation.

Back to top

Standard Features

The rest of the features on this page are standard chart features.

Line Markers chm=D [ Bar, Candlestick, Line, Radar, Scatter ]

You can add a line that traces data in your chart. Most often, this is used in compound charts .

To add multiple lines (or combine this with any other chm markers), separate the chm parameter sets using a pipe ( | ) delimiter. You cannot make a dashed line marker with this parameter.

Syntax

chm=
  D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>
Д
Indicates that this is a line marker.
< color >
The color of the line, in RRGGBB hexadecimal format .
< series_index >
The index of the data series used to draw the line. The data series index is 0 for the first data series, 1 for the second data series, and so on.
< which_points >
Which points in a series to use to draw the line. Use one of the following values:
  • 0 - Use all the points in the series.
  • start:end - Use a specific range of points in the series, from the start to end , inclusive (zero-based index). You can also use floating point values to specify intermediate points, or leave start or end blank to indicate the first or last data point, respectively. start and end can be negative, as a reverse index from the last value. If both start and end are negative, be sure to write them in increasing value (for example, -6:-1).
< size >
The width of the line in pixels.
< opt_z_order >
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).

Examples

Описание Пример

This is an example of drawing a marker line on a bar chart. The z-order is set to 1 , so the line is drawn on top of the bars.

This example uses the same data for both the bars and the data line.
Bar chart with line marker
chm=D,0033FF,0,0,5,1
chd=s:1XQbnf4

This is the same bar chart, but with an additional data series just for the line. This is an example of a compound chart. Compound charts are drawn by adding additional data series to the chd parameter, plus a value to chd telling the chart to "ignore" the additional data series.

See Compound Charts for more information.

Bar chart with line marker
chm=D,0033FF,1,0,5,1
chd=s1:1XQbnf4,43ksfg6

Back to top

Shape Markers chm [ Bar, Line, Radar, Scatter ]

You can specify graphical markers for all or individual data points on a chart. If two or more markers occupy the same point, the markers are drawn in the order in which they appear in the chm parameter. You can also create text markers on data points, which is covered in Data Point Markers .

You can combine shape markers with any other chm parameters using a pipe character ( | ) to separate the chm parameters.

Syntax

Specify one set of the following parameters for each series that should be marked. To mark multiple series, create additional parameter sets, delimited by a pipe character. You do not need to mark up all series. If you do not assign markers to a data series, it will not get any markers.

Shape markers behave slightly differently in scatter charts . See that documentation for more information.

chm=
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
    |...|
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
@
[ Optional ] If you precede the marker type with the optional @ character, then < opt_which_points > should use the x:y format.
<marker_type>
The type of marker to use. Specify one of the following types:
  • a - Arrow
  • c - Cross
  • C - Rectangle. If a rectangle marker, you must have at least two data series, where series 0 specifies the bottom edge and series 1 specifies the top edge. < size > specifies the width of the rectangle, in pixels.
  • d - Diamond
  • E - Error-bar marker ( ) This marker requires two data series to create, one value for the bottom, and the corresponding point in the second series for the top. It also exposes an extended < size > syntax: line_thickness [: top_and_bottom_width ] where top_and_bottom_width is optional. See the examples below.
  • h - Horizontal line across the chart at a specified height. ( The only valid format for < opt_which_points > parameter is nd . )
  • H - Horizontal line through the specified data marker. This supports an extended < size > syntax that lets you specify an exact line length: line_thickness [: length ] where : length is optional, and defaults to the full chart area width.
  • o - Circle
  • s - Square
  • v - Vertical line from the x-axis to the data point
  • V - Vertical line of adjustable length. This supports an extended < size > value syntax that lets you specify an exact line length: line_thickness [: length ] where : length is optional, and defaults to the full chart area height. The marker is centered on the data point.
  • x - An X
< color >
The color of the markers for this series, in RRGGBB hexadecimal format .
< series_index >
The zero-based index of the data series on which to draw the markers. Ignored for h markers and markers that specify location by x/y position (start with the @ character). You can use hidden data series as a source for markers; see Compound Charts for more information. Grouped vertical bar charts support a special extended syntax to align markers with specific bars.
< opt_which_points >
[ Optional ] Which point(s) to draw markers on. Default is all markers. Use one of the following values:
  • nd - Where to draw the marker. The meaning depends on the marker type:
    • All types except h - Which data point to draw the marker on, where nd is the zero-based index in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
    • h - A number from 0.0 to 1.0, where 0.0 is the bottom of the chart, and 1.0 is the top of the chart.
  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all data points.
  • - n - Draw a marker on every n -th data point. Floating point value; if n is less than 1 the chart will calculate additional intermediary points for you. For example, -0.5 will put twice as many markers as data points.
  • start:end:n - Draw a marker on every n -th data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3::1 would be from the fourth element to the last, step 1, and omitting this parameter entirely would default to first : last :1. All values can be floating point numbers. start and end can be negative, to count backward from the last value. If both start and end are negative, be sure that they are listed in increasing value (for example, -6:-1:1). If the n step value is less than 1, it will calculate additional data points by interpolating the data values given. Default values are first:last:1
  • x : y - Draw a marker at a specific x/y point on the chart. This point does not have to be on a line. Add the @ character before the marker type to use this option. Specify the coordinates as floating point values, where 0:0 is the bottom left corner of the chart and 1:1 is the top right corner of the chart. For example, to add a red, 15-pixel diamond to the center of a chart, use @d,FF0000,0,0.5:0.5,15 .
< size >
The size of the marker, in pixels. Most take a single number value for this parameter; the V, H, and S markers support the syntax < size >[: width ] where the optional second part specifies the line or marker length.
< opt_z_order >
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).
< opt_offset >
[ Optional ] Let you specify horizontal and vertical offsets from the specified location. Here is the syntax, which uses a : delimiter: reserved :< horizontal_offset >:< vertical_offset > . If specified, you can include an empty ,, value in the chm parameter string for < opt_z_order >. Examples: o,FF9900,0,4,12,, :10 o,FF9900,0,4,12.0,, :-10:20 o,FF9900,0,4,12,1, ::20
  • reserved - Leave blank.
  • < horizontal_offset > - A positive or negative number specifying the horizontal offset, in pixels. Optional; leave blank if not used.
  • < vertical_offset > - A positive or negative number specifying the vertical offset, in pixels. Optional; leave blank if not used.

Examples

Описание Пример

Here's an example of several of the shape and line markers.

  • a,990066,0,0.0,9.0 - Purple arrow, first series, first point, size 9.
  • c,FF0000,0,1.0,20.0 - Red cross, first series, second point, size 9.
  • d,80C65A,0,2,20.0 - Green diamond, first series, third point, size 9.
  • H,000000,0,3,1:40 - Black horizontal line, first series, data point 3, one pixel wide, forty pixels long.
  • o,FF9900,0,4.0,12.0 - Orange circle, first series, fifth point, size 12.
  • s,3399CC,0,5.0,11.0 - Blue square, first series, sixth point, size 11.
  • v,BBCCED,0,6.0,1.0 - Vertical line up to point, first series, seventh point, one pixel wide.
  • V,3399CC,0,7.0,1.0 - Vertical line bottom to top of chart, first series, eighth point, one pixel wide.
  • x,FFCC33,0,8.0,20.0 - Yellow 'X', first series, ninth point, size 20.
  • H,FFFF00,0,9,2 - Horizontal yellow line the width of the chart at data point 9.
  • h,FF0000,0,0.5,1 - Red horizontal line at designated height, first series, halfway up the chart, one pixel wide.
Line chart with markers
chm=
a,990066,0,0.0,9.0|
c,FF0000,0,1.0,20|
d,80C65A,0,2.0,20.0|
H,000000,0,3,1:40|
o,FF9900,0,4.0,12.0|
s,3399CC,0,5.0,11.0|
v,BBCCED,0,6,1.0|
V,3399CC,0,7,1.0|
x,FFCC33,0,8,20|
H,FFFF00,0,9,2|
h,FF0000,0,0.5,1

Here's an example using diamonds for one data series, and circles for the other data series.

If two or more markers occupy the same point, the markers are drawn in the order in which they appear in the chm parameter. Here, the circle is the first marker specified with chm , so it is drawn first. The diamond is specified and drawn second, which results in it being drawn on top of the circle.

Line chart, one line has 15 pixel circles on each data point the other line has 10 pixel diamonds. A diamond is drawn on the point that is common to both lines
chm=
o,FF9900,0,-1,15.0|
d,FF0000,1,-1,10.0

Here's a line chart with a marker on every second data point (-2 means every other point).

Line chart with marker on every second point
chd=t:
0,20,20,50,40,70,70,90,85,45,40,50
chm=
o,0066FF,0,-2,6
Here's a line chart with twice as many markers as data points (-0.5 means every half point). Line chart with marker on every second point
chd=t:
0,20,20,50,40,70,70,90,85,45,40,50
chm=
o,0066FF,0,-.5,6
This example shows how to use h and v markers to create grid lines with custom colors and thickness. The z-order value (the last value) is set to -1 so that the grid lines are drawn beneath the data line.
Line chart with marker on every second point
chm=
h,76A4FB,0,0:1:.2,2,-1|
V,76A4FB,0,::2,0.5,-1

This chart adds vertical fill lines to a line chart:

  • v - Vertical lines to the chart
  • FF0000 - Red lines
  • 0 - Series index
  • : :.5 - Range specifier: from start to end, every 0.5 points.
  • 2 - Thickness 2 pixels.
Line chart with marker on every second point
chm=
v,FF0000,0,::.5,2
This example adds an arrow and text marker to the chart using exact coordinates. The first D marker is the trace line under the bars. The second marker is the arrow, and the third marker is the arrow text.
chm=
D,003971,1,0,3|
@a,000000,0,.25:.75,7|
@tExpected,000000,0,.35:.85,10
A horizontal line fixed to a specific data point ( H ) can be useful for showing relative values, or emphasizing the height of a data value on a chart.
chm=H,FF0000,0,18,1

This graph demonstrates the markers that can specify line thickness and length in the < size > parameter.

  • E,000000,0,6,1:20 - Black error bar with 1 pixel wide lines, top and bottom bars 20 pixels long. The bottom is anchored to series 0 point 8, the top is anchored to series 1 point 8.
  • H,990066,1,2,5:50 - Purple, horizontal line five pixels wide, fifty pixels long centered on data point 2.
  • V,3399CC,0,8,3:50 - Blue, vertical line 3 pixels wide, fifty pixels long, centered on data point 8.
title="cht=lc&chd=s:2gounjqLaCf,jqLaCf2goun&chco=008000,00008033&chls=2.0,4.0,1.0&chs=250x150&chm=H,990066,1,2,5:50%7CV,3399CC,0,8,3:50%7CE,000000,0,6,1:20" src="/chart/image/images/chart_95.png" />
chm=
E,000000,0,6,1:20|
H,990066,1,2,5:50|
V,3399CC,0,8,3:50

Back to top

Candlestick Markers chm=F [ Bar, Line ]

Candlestick markers indicate variance and direction change in a data series. Often they are used to show stock values during the course of a day. The marker includes segments that show the high and low value, as well as the opening and closing value for a specific time period (typically a day). For more about candlestick markers, see here .

A candlestick marker is drawn as a rectangle bisected by a vertical line. It requires four data series to draw a candlestick marker; here is what each series specifies:

  • Series 1 and 4 specify the bottom and top of the vertical line, respectively. These typically represent the low and high values for the day.
  • Series 2 and 3 specify the vertical borders of the rectangle. Series 2 is the opening value, and series 3 is the closing value. The color of the rectangle depends on which is higher: when the opening value (series 2) is lower than the closing value (series 3), the price has increased, and the rectangle is filled with solid green by default; when the opening value (series 2) is higher than the closing value (series 3), the price has decreased, and the rectangle is filled with solid red by default. You can only specify a fill color for the rectangle with decreasing value. When you specify that, the rectangle with increasing value is unfilled (empty). Note that series 2 can be either the top or the bottom of the rectangle, depending on whether the price has gone up or down.

You can combine candlestick markers with any other chm parameters using a pipe character ( | ) to separate the chm parameters.

Note: If you do not want the lines for the data used to draw the markers to appear in the chart, you must include a 0 after the format type. For example: chd=t0:10,20,30,40 in a text format data string. See Compound Charts for more information.

Here's an example, showing the lines for each series:

Syntax

chm=
  F,<opt_declining_color>,<data_series_index>,<opt_which_points>,<width>,<opt_z_order>
Ф
Indicates that this is a candlestick marker.
<opt_declining_color>
[ Optional ] Fill color for the rectangles when the value is decreasing (when series 2 value > corresponding series 3 value). This is an RRGGBB format hexadecimal number . When the values increase, the rectangle will be empty. Default is solid green for increasing, solid red for decreasing (you cannot specify a custom fill color for increasing values).
< data_series_index >
The index of the data series to use as the first series for your candlestick markers. This is a zero-based index. So, if you specify 1 here, and you have six series, the second, third, fourth and fifth will be used to draw candlestick markers.
<opt_which_points>
[ Optional ] Specifies which data points are used to draw markers. Default is all markers. Use one of the following formats:
  • nd - Draw a marker on a single point in the series, where nd is the index of the point in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all markers.
  • - n - Draw a marker on every n -th data point.
  • start:end:n - Draw a marker on every n -th data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3::1 would be from the fourth element to the last, step 1, and omitting this parameter entirely would default to first : last :1. All values can be floating point numbers. start and end can be negative, to count backward from the last value. If both start and end are negative, be sure that they are listed in increasing value (for example, -6:-1:1). If the n step value is less than 1, it will calculate additional data points by interpolating the data values given. Default values are first:last:1
<width>
The width of all rectangles, in pixels.
<opt_z_order>
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).

Examples

Описание Пример

Here's an example of candlestick markers on a line chart with four series. The custom fill color 0000FF (blue) is specified, and this color is used to fill the rectangles when the point in series 3 is smaller than the equivalent point in series 2.

The first and last rectangle are trimmed by the chart. To eliminate these values, you could specify 1:4 for the fourth parameter of chm.

Note the zero in the data string, to hide the lines for the series: chd=t0 . This indicates that all chart data is to be used for markers.

The < which_point > parameter is blank, which draws candlesticks on all data points.

Line chart with four orange lines and four financial markers

chd=t0:
0, 5,10, 7,12, 6|
35,25,45,47,24,46|
15,40,30,27,39,54|
70,55,63,59,80,60
chm=F,0000FF,0,,20

Here's an example of the same chart, using the default colors, and removing the first and last item.

This is a compound chart: it is a combination of a line chart (the base chart type) and candlestick markers. The value of 1 in cht=t:1 means that all data series after the first should be hidden from the basic chart type (line chart). The first 1 in chm=F,, 1 ,1:4,20 means that the candlestick data comes from series 2, 3, 4, and 5 (the 1 is zero-based). See Compound Charts for more information on how to draw a compound chart like this.

Line chart with one orange line and four financial markers.
cht=lc
chm=
F,,1,1:4,20

chd=t1:
15,40,30,27,39,54|
...

Back to top