Есть два canvas для отображения графиков с помощью библиотеки
Chartjs:
<canvas id="chart_followers_unfollowers" width="400" height="200"></canvas>
<canvas id="chart_followers" width="400" height="200"></canvas>
Графики я строю не при загрузке страницы, а при получении данных с помощью ajax, не знаю имеет ли это значение.
Далее скрипт для генерации графиков:
function data_for_chart_follow_unfollow(dates_range, followers, unfollowers) {
var data = {
labels: dates_range,
datasets: [ Пропустим данные для краткости ]
};
return data
}
function data_for_chart_growth_followers(dates_range, followers) {
var data = {
labels: dates_range,
datasets: [ Пропустим данные для краткости ]
};
return data
}
function show_charts(dates_range, followers, unfollowers) {
var ctx = document.getElementById('chart_followers_unfollowers').getContext('2d');
var chart_follow_unfollow = new Chart(ctx, {
type: 'line',
data: data_for_chart_follow_unfollow(dates_range, followers, unfollowers),
options: {
title: {
display: true,
text: 'Динамика добавления подписчиков и отписки',
fontSize: 21
},
responsive: true
}
});
var ctx = document.getElementById('chart_followers_unfollowers').getContext('2d');
var chart_growth_followers = new Chart(ctx, {
type: 'line',
data: data_for_chart_growth_followers(dates_range, followers),
options: {
title: {
display: true,
text: 'Динамика роста подписчиков',
fontSize: 21
},
responsive: true
}
});
}
Так вот, первые две функции для формирования данных, а функция show_charts как раз для отображения наших графиков.
Суть проблемы: Отображается только второй график, я так понимаю он рисует последний график, пробовал менять var ctx = document.getElementById('chart_followers_unfollowers').getContext('2d') на разные переменные - не помогает. Гуглилить пробовал, найденные варианты не помогают.
Понимаю что проблема элементарная, но уже потратил на неё много времени, пните в нужную сторону.