Как перебрать данные SQL и нарисовать график, используя ChartJS? - PullRequest
0 голосов
/ 06 января 2019

Это часть моих данных

| Firm       | Product     | Sales        |
|:-----------|------------:|:------------:|
| A          |        TV1  |     This     |
| A          |        TV2  |    column    |
| B          |        TV3  |     will     |
| C          |        TV4  |      be      |
| C          |        TV5  |    number    |

Я хотел бы сделать такой график, используя ChartJS и bottle / Flask

(https://i.imgur.com/Nw09P4A.jpg)

Код в бутылке.py:

c.execute("SELECT DISTINCT Firm FROM database")
result1 = c.fetchall()
firms=[j[0] for j in result1]
c.execute("SELECT * FROM database")
database = c.fetchall()

Код в Javascript:

 data: {
    labels: [
        % for firm in firms:
        '{{ firm[0] }}',
        %end        
    ],
    datasets: [
        % for item in database:
        {
        label: '{{ item[1] }}',
            %if '{{ item[0] }}' == 'A':
                data: [{{ item[2] }},null,null],
                backgroundColor: "#0e7a0d"
            elif '{{ item[0] }}' == 'B':   
                data: [null,{{ item[2] }},null],
                backgroundColor: "##e4000f"
            else:
                data: [null,null ,{{ item[2] }}],
                backgroundColor: "#003791"
            %end 
        },
        %end 
    ]

Но это показывает только пустой холст.

Редактировать: Чтобы получить такой результат:

data: {
labels: ["A", "B", "C"],
datasets: [{
  label: 'TV1',
  backgroundColor: "rgba(153,255,51,1)",
  data: [10, 0, 0],
}, {
  label: 'TV2',
  backgroundColor: "rgba(255,153,0,1)",
  data: [0,30, 0],
  }]
 }

У меня должен быть мой код Js, подобный этому:

        %if  item[0]  == 'A':
            data: [{{ item[2] }},null,null],
            backgroundColor: "#0e7a0d"
        elif  item[0]  == 'B':   
            data: [null,{{ item[2] }},null],
            backgroundColor: "##e4000f"
        else:
            data: [null,null ,{{ item[2] }}],
            backgroundColor: "#003791"
        %end    
...