Fusion chart , h1 알고리즘 추가, 서비스 디벨롭하기

👉 구현되어야 할 부분

일단, h1 도 Protocol 명만 다르게 해서 들어갈 뿐, 업로드 되는 과정은 같다.

업로드 이후 처리가 바뀌어야 한다.

group_chart 로 가면, file_group 별로 h1과 h2를 구분지어서 두가지의 그래프를 그려야 한다.

무엇이 더 비교가 잘될까..?

막대그래프로 결정.

Fusion Chart 에서 Multi-series Charts 이부분을 찾았고, 어떻게 생겨먹었는지 보았다.

https://www.fusioncharts.com/charts/column-bar-charts/grouped-column-chart-with-multiple-series?framework=python

아래 코드 첨부한 거를 Django에서 작동하게 돌려서 확인해보면 위와 같다.

single 일 때 상태 (어떤 값이 어떻게 바뀌어야 할지 한눈에 보기 쉽게 정리했다.)

html 은 아래와 같다. ( 사이트 제공)

<!DOCTYPE html>
<html>
  <head>
    <title>Django Wrapper | FusionCharts</title>
    {% load static %}
    <script
      type="text/javascript"
      src="{% static 'fusioncharts/fusioncharts.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'fusioncharts/themes/fusioncharts.theme.fint.js' %}"
    ></script>
  </head>
  <body>
    <!-- FusionCharts will render here-->
    <div id="chart-1"></div>
    <!-- dumping JavaScript code here -->
    {{ output|safe }}
  </body>
</html>

python 코드는 아래와 같다. (사이트 제공)

# multi_chart_template
def multi_chart(request):
   chartObj = FusionCharts( 'mscolumn2d', 'ex1', '600', '400', 'chart-1', 'json', """{
  
  "chart": {
    "caption": "App Publishing Trend",
    "subcaption": "2012-2016",
    "xaxisname": "Years",
    "yaxisname": "Total number of apps in store",
    "formatnumberscale": "1",
    "plottooltext": "<b>$dataValue</b> apps were available on <b>$seriesName</b> in $label",
    "theme": "fusion",
    "drawcrossline": "1"
  },
  "categories": [
    {
      // nums 가 들어가야함       
      "category": [
        {
          "label": "2012"
        },
        {
          "label": "2013"
        },
        {
          "label": "2014"
        },
        {
          "label": "2015"
        },
        {
          "label": "2016"
        }
      ]
    }
  ],
  "dataset": [
    {
        // h1, h2 = seriesname
      "seriesname": "iOS App Store",
      "data": [
        {
          "value": "125000"
        },
        {
          "value": "300000"
        },
        {
          "value": "480000"
        },
        {
          "value": "800000"
        },
        {
          "value": "1100000"
        }
      ]
    },
    {
      "seriesname": "Google Play Store",
      "data": [
        {
          "value": "70000"
        },
        {
          "value": "150000"
        },
        {
          "value": "350000"
        },
        {
          "value": "600000"
        },
        {
          "value": "1400000"
        }
      ]
    },
    {
      "seriesname": "Amazon AppStore",
      "data": [
        {
          "value": "10000"
        },
        {
          "value": "100000"
        },
        {
          "value": "300000"
        },
        {
          "value": "600000"
        },
        {
          "value": "900000"
        }
      ]
    }
  ]
}""")
   return render(request, 'multi_chart.html', {'output': chartObj.render()})

어떻게 생겨먹었는지 확인 했으니 내 서비스에 맞게 적용해보자!

(이전 포스트에 작성한 h1에 해당하는 알고리즘도 적용해야 한다.)

json 인코딩 : Python Object (Dictionary, List, Tuple 등) 를 JSON 문자열로 변경하는 것을 JSON Encoding

1. 원하는 값들로 json 형식에 맞게 구현된 딕셔너리를 만든다.

json.loads(jsonString) 함수로 String 으로 구현되어있는 json 을 Python 딕셔너리 형태로 바꾼 것을 확인 한 후에

데이터를 넣어주기 용이하게 위해서 딕셔너리 형태로 관리할 수 있도록 구현!

(http://pythonstudy.xyz/python/article/205-JSON-%EB%8D%B0%EC%9D%B4%ED%83%80)

2. 인코딩하여 함수내의 json 을 대체한다.

Fusion Chart 사용 하며 참고한 요소 값 설명

- plottooltext : 툴팁 관련

실제 수행한 코드는 gitHub 아래 링크 참조

https://github.com/JiYoungDo/Capstone-Design

저작자표시 비영리 변경금지

'Django_Web' 카테고리의 다른 글

[Django] 업로드한 파일 내가 원하는 대로 처리하기 (0)	2021.07.19
[Django][FusionCharts] 사용방법 & 장고 그래프 그리기 (0)	2021.06.13
[Django] 파일 업로드 글로벌 서비스 구현하기 (0)	2021.06.09
Django - PythonAnywhere 글로벌 서비스 시작하기 (0)	2021.06.02
Django Model/ DB (0)	2021.04.13

CARRIEDO's

Fusion chart , h1 알고리즘 추가, 서비스 디벨롭하기

Fusion Chart 에서 Multi-series Charts 이부분을 찾았고, 어떻게 생겨먹었는지 보았다.

'Django_Web' 카테고리의 다른 글

댓글

티스토리툴바

Fusion chart , h1 알고리즘 추가, 서비스 디벨롭하기

Fusion Chart 에서 Multi-series Charts 이부분을 찾았고, 어떻게 생겨먹었는지 보았다.

'Django_Web' 카테고리의 다른 글

관련글

댓글

티스토리툴바