Как создать диаграмму выполнения?

Question

[magic_healthy_hair]

здравствуйте, подскажите как можно сделать круговую диаграмму , на сайте выводится число из бд например - 1, максимальное выводимое число - 100 , нужно чтобы на диаграмме показывало 1 из 100, 2 из 100 и т.д или в процентах, при этом как-то подставить исходное число ,которое находится в бд в настоящий момент и максимально допустимое число. как можно реализовать данную задачу?

Answer 1

[xmoonlight]

circle.firchow.net

Answer 2

[netrox]

www.chartjs.org

Comments

[magic_healthy_hair]

netrox не подскажете пожалуйста, можно ли как-то вывести в этот скрипт цифру которая выводится через smarty?

"data":[0,0,'{$total_views}'],

<script>
new Chart(document.getElementById("myChart"),
{"type":"doughnut",
"data":{"labels":["Red","Blue","Yellow"],
"datasets":[{"label":"My First Dataset",


"data":[0,0,'{$total_views}'],


"backgroundColor":["rgb(255, 99, 132)",
"rgb(54, 162, 235)",
"rgb(255, 205, 86)"]}]}});
</script>

[netrox]

magic_healthy_hair, С помощью ajax обратись к серверу. Сервер в свою очередь вернёт в качестве ответа на запрос total_views в формате json. После получения , парсишь total_views и рисуешь диаграмму.

[magic_healthy_hair]

netrox, не совсем понимаю как обратиться к серверу через ajax

$.ajax({
dataType: 'json',
success: function(data){


}
});

[netrox]

magic_healthy_hair,

$.ajax({
url: 'script.php',
dataType: 'json',
method: 'post',
success: function(data)
{
  var all_views = JSON.parse(data);
// рисуешь диаграмму
}
});

[magic_healthy_hair]

netrox, ошибка в консоли показывает на $.ajax

<div style="width:200px;height:200px;display:block;">
    <canvas id="myChart" width="200" height="200"></canvas>
    </div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
$.ajax({
url: 'k.html',
dataType: 'json',
method: 'post',
success: function(data)
{
  var all_views = JSON.parse(data);
// рисуешь диаграмму
new Chart(document.getElementById("myChart"),
{"type":"doughnut",
"data":{"labels":["Red","Blue","Yellow"],
"datasets":[{"label":"My First Dataset",
"data":[0,0,'{$total_views}'],
"backgroundColor":["rgb(255, 99, 132)",
"rgb(54, 162, 235)",
"rgb(255, 205, 86)"]}]}});
}
});
</script>

а что должно быть в url: ? я указал непосредственно сам файл в котором все это происходит

[netrox]

magic_healthy_hair, Название "url" само за себя говорит . Туда надо писать или роут или путь к файлу который обрабатывает запрос. Всё зависит от проекта

[magic_healthy_hair]

netrox, так получается правильно указал, файл в котором этот код ,т.е сам на себя указывает, но выходит ошибка почему-то.. и диаграмма не отображается вообще

[netrox]

magic_healthy_hair, что за ошибка ?

[magic_healthy_hair]

netrox, в консоли показывает на вот эту строку почему-то $.ajax({

[magic_healthy_hair]

netrox, проблема в том что без {literal}{/literal} выдает ошибку 500,
если поставить в {literal}

{literal}
<script>
$.ajax({
url: 'useraccount.php',
dataType: 'json',
method: 'post',
success: function(data)
{
  var all_views = JSON.parse(data);
// рисуешь диаграмму
new Chart(document.getElementById("myChart"),
{"type":"doughnut",
"data":{"labels":["Red","Blue","Yellow"],
"datasets":[{"label":"My First Dataset",
"data":[0,0,{$total_views}],
"backgroundColor":["rgb(255, 99, 132)",
"rgb(54, 162, 235)",
"rgb(255, 205, 86)"]}]}});
}
});
</script>
{/literal}

то сразу начинает работать, кроме диаграммы в обертке ajax, если ajax убрать, то диаграмма начинает работать, естественно без тегов smarty, сами теги smarty внутри {literal} не работают, как возможно решить эту проблему?...