(Запустить на gist)
строки #503

// Рисуем на первом графике
	hChart.context.strokeStyle = "blue";
	hChart.transform();	// Трансформации контекста холста под формат графика
	hChart.context.beginPath();
	// Рисуем ромб в точке 7,0
	hChart.context.moveTo(7, 1);
	hChart.context.lineTo(7.5, 0);
	hChart.context.lineTo(7, -1);
	hChart.context.lineTo(6.5, 0);
	hChart.context.closePath();
	// Рисуем эллипс в точке 11,0
	hChart.context.moveTo(11, 0);
	hChart.context.ellipse(11, 0, 0.5, 0.5, 0, 0, 2 * Math.PI);
	// Сбрасываем трансформацию, чтобы толшина кисти восстановилась
	hChart.context.setTransform(1, 0, 0, 1, 0, 0);
	// Отображаем ромб и эллипс
	hChart.context.stroke();

Тaк подойдёт (смотрите изображение)?

Изображения то, что нужно!

1. Если, построить ломанную линию (см.рис.1) способом построения геометрической фигуры, то , видимо, нельзя будет определить значения хc и yc в любой точке ломанной линии и площади фигуры под ломанной линией на любом отрезке xn…xk (см. рис.2). Поэтому, наверное, надо данную ломанную линию построить в виде графика функции. Координаты по X : 0, 5, 10, 16, 21, 30, 33. По Y: 0, 2.24, -1.49, 1.5, -1, 0.5, 0.
2. В точках X: 8, 13, 19, 27, 33. Надо построить ромбы, в точках Х: 5, 10, 16, 21, 30. надо построить окружности (не эллипсы). Методом копирования. Приведённые выше числовые данные могут быть произвольными значениями. Хорошо бы было, если были бы удалены теги (строки) относящиеся к остальным графикам и оставлено в коде только то, что относится к графику ломанной линии, ромбов и окружностей. Прошу помочь, так как, мне это точно не осилить….

высыланные в предыдущем сообщении картинки не совсем разборчивы. Высылаю ещё раз

Зaпустите gist: Там я добавил текстовое поле с примером, как чертить ромбы и эллипсы прямо на графике.
Следуйте правилам контекста Canvas и добавляйте свои инструкции.
Кликайте на график, чтобы изменения вступили в силу.

Если допустите ошибку, текстовое поле поменяет цвет.

Этo элементарная математическая задача и сейчас как программист (в математике я не очень) я попытаюсь её решить.

Дан треугольник с длиной основания 8 пунктов.
Вершина треугольника находится в пункте 5 на высоте 2.24 пункта.

Опишем его переменными:

Ax = 0, Bx = 8
Cx = 5, Cy = 2.24

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

Ax = 0, Cx = 5, Cy = 2.24	// левый треугольник
Cx = 5, Bx = 8, Cy = 2.24	// правый прямоугольник

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

Находим площадь:

S_left_rect = (Cx - Ax) * Cy	// площадь левого прямоугольника
S_right_rect = (Bx - Cx) * Cy
S_left_triangle = S_left_rect / 2	// площадь левого треугольника AxCxCy
S_right_triangle = S_right_rect / 2	// площадь правого треугольника CxBxCy
S_triangle = S_left_triangle + S_right_triangle	// площадь целого треугольника AxBxCy

Теперь нужно узнать площадь заштрихованной области xn,yn,xk,yk.
Опишем переменными:

xn = 3	// начало штриховки
xk = 6	// конец штриховки
yn = ??? // нужно найти
yk = ??? // нужно найти

Используя метод вычислительного построения линии, находим yn:

delta_x = Cx - Ax	// длина отрезка AxCx (5 пунктов)
yn = (xn - Ax) / delta_x * Cy	// (3 - 0) / 5 * 2.24 = 1.344

Используя метод вычислительного построения линии, находим yk:

delta_x = Bx - Cx	// длина отрезка CxBx (3 пункта)
yk = (Bx - xk) / delta_x * Cy	// (8 - 6) / 3 * 2.24 = 1.493

Теперь мы имеем:

xn = 3	// начало штриховки
xk = 6	// конец штриховки
yn = 1.344 // минимальная высота начала штриховки
yk = 1.493 // минимальная высота конца штриховки

Для начала нужно разобраться, что мы видим под этой штриховкой вообще:
Прямоугольник №1: xn,Cx,yn
Прямоугольник №2: Cx,xk,yk
Прямоугольный треугольник №1: xn,yn,Cy
Прямоугольный треугольник №2: Cx,xk,Cy

Площадь будем искать подобным методом: Через вычитание суммы площадей двух нештрихованных треугольников над заштрихованной областью.

Находим площадь незаштрихованных треугольников и вычитаем её из общей площади:

S_left_rect = (Cx - xn) * Cy	// Прямоугольник xnCxCy: (5 - 3) * 2.24 = 4.48
S_right_rect = (xk - Cx) * Cy	// Прямоугольник xkCxCy: (6 - 5) * 2.24 = 2.24

S_left_triangle = (Cx - xn) * (Cy - yn) / 2	// Треугольник ynCxCy: (5 - 3) * (2.24 - 1.344) / 2 = 0.896
S_right_triangle = (xk - Cx) * (Cy - yk) / 2	// Треугольник xkCxCy: (6 - 5) * (2.24 - 1.493) / 2 = 0.3735

Теперь складываем площади двух нижних заштрихованных прямоугольников с площадами треугольников над ними:

S_hatching = S_left_rect + S_left_triangle + S_right_rect + S_right_triangle	// 7.9895

Как видно, всё не так уж сложно и требует неких навыков программисткого мышления.
А здесь Вы идёте неверным путём!
Так как нужно всего навсего строить ломанную по координатам из массива, на оси X отмечать начало очередной линии, а вот ромбики нужно чертить в точке прохождения линий через нулевую отметку на Y.

Запустите gist: Я добавил отрисовку ломанной по массиву с ромбиками и кружочками.

Вoт здесь я разместил простой скрипт со всеми нужными формулами расчёта площади фигуры под ломанной линией на любом отрезке (в пределах одного треугольника).
(Расчёт площади по ломанной на отрезке со смежными треугольниками требует простого сложения таких площадей с нехитрой эвристикой…)