chartjs with django - pai-plznw4me/django-initializer GitHub Wiki

plot Line

Single plot

  • js
  • html
  • djagno view

1. js

function create_single_plot(xs, ys, elementId) {
    /*
    * Description
    *   chartjs ์„ ํ™œ์šฉํ•ด ํ•œ ๊ฐœ plot ์„ ๊ทธ๋ฆฝ๋‹ˆ๋‹ค.
    * Args
    *   ys: Array
    *   xs: Array
    *   element_id: html element canvas id
    *  */

    const data = {
        labels: ys,
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: xs,
        }]
    };

    const config = {
        type: 'line',
        data: data,
        options: {}
    };
    //create chart
    return new Chart($(elementId), config)
}

2. templates html

https://releases.jquery.com/ ์—์„œ jquery ์ตœ์‹  script์ฝ”๋“œ ๊ฐ€์ ธ์˜ค๊ธฐ

<h1> Sinlge line plot </h1>
<div style="height: 300px; width: 300px; border: solid 5px blue;">
    <canvas id="myChart1" width="500px" height="300px" style="border: solid 5px red;"></canvas>
</div>

{# jquery #}
<script src="https://code.jquery.com/ ...

{# chartjs  #}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script src='{% static 'visualize/js/plot.js' %}'></script>
<script>
    create_single_plot({{ xs | safe }}, {{ ys | safe}}, "#myChart1")
</script>

3. view

def test(request):
    """
    Description
        result_id ์— ํ•ด๋‹นํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ์‹œ๊ฐํ™” ํ•ด render ๊ฒฐ๊ณผ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
    Args:
        :param request:
        :param str result_id: result ํŒŒ์ผ ์ด๋ฆ„
    """
    context = {}
    ys = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
    xs = [12, 19, 3, 5, 10, 3]

    context['xs'] = [12, 19, 3, 5, 10, 3]
    context['ys'] = ys

    return render(request, template_name='visualize/test.html', context=context)

muilti plot

  • js
  • html
  • djagno view

1. js

function create_multi_plot(datasets, ys, elementId) {
    /*
    * Description
    * chartjs ์„ ํ™œ์šฉํ•ด plot ์„ ๊ทธ๋ฆฝ๋‹ˆ๋‹ค.
    *
    * Usage:
    * Html
    *   <div style="height: 300px; width: 300px; border: solid 5px blue;">
    *   <canvas id="myChart" width="500px" height="300px" style="border: solid 5px red;"></canvas>
    *   </div>
    *
    *   <script src='{% static 'visualize/js/show_results.js' %}'></script>
    *   <script> create_single_plot({{ xs | safe }}, {{ ys | safe}}, "#myChart") </script>
    *
    * Args
    *   ys: Array
    *   xs: Array
    *   element_id: html element canvas id
    *
    *  */

    const data = {
        labels: ys,
        datasets: datasets
    };

    const config = {
        type: 'line',
        data: data,
        options: {}
    };
    //create canvas
    return new Chart($(elementId), config)
}

2. templates html

<h1> multi Chart </h1>
<div style="height: 300px; width: 300px; border: solid 5px blue;">
    <canvas id="myChart2" width="500px" height="300px" style="border: solid 5px red;"></canvas>
</div>

{# jquery #}
<script src="https://code.jquery.com/ ...

{# chartjs  #}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script src='{% static 'visualize/js/plot.js' %}'></script>
<script>
    create_multi_plot({{ datasets | safe }}, {{ ys | safe}}, "#myChart2")
</script>

3. view

def test(request):
    """
    Description
        result_id ์— ํ•ด๋‹นํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ์‹œ๊ฐํ™” ํ•ด render ๊ฒฐ๊ณผ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
    Args:
        :param request:
        :param str result_id: result ํŒŒ์ผ ์ด๋ฆ„
    """
    context = {}
    ys = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
    xs = [12, 19, 3, 5, 10, 3]
    xs_1 = [9, 19, 32, 1, -3, 3]

    context['xs'] = [12, 19, 3, 5, 10, 3]
    context['ys'] = ys
    context['datasets'] = [
        # first data
        {"label": 'My First dataset',
         "backgroundColor": 'rgb(255, 99, 132)',
         "borderColor": 'rgb(255, 99, 132)',
         "data": xs},

        # second data
        {"label": 'My Second dataset',
         "backgroundColor": 'rgb(255, 255, 132)',
         "borderColor": 'rgb(255, 255, 132)',
         "data": xs_1}
    ]

    return render(request, template_name='visualize/test.html', context=context)

reference

โš ๏ธ **GitHub.com Fallback** โš ๏ธ