Need a guide

21 views

Skip to first unread message

Ha

unread,

Jun 21, 2020, 7:33:23 PM6/21/20

to Django users

Hello django-users , how are you doing ?

I need someone to guide me in this, I want to do a chart like this :

from my function I need to use from_office for my seriesNames and taux for data and Day for my categories , so it can show me the "rank achieved for every office per day" , this is my function I am using in my views.py :

def chart(request):
  
  dataset = Evenement.objects.annotate(Day=TruncDay('date_Evt')).values('Day','from_office')\
  .annotate(depot=Count('from_office',filter=Q(status='déposé')),
            affecte=Count('from_office',filter=Q(status='affecté')),
            livre=Count('from_office',filter=Q(status="livré")),
            taux=F('livre')/F('affecte')).all()

  return render(request, 'charts_event_list.html', {'dataset':dataset} )

this is the code of the chart above :

<script>
    const dataSource = {
      chart: {
        caption: "Reach of Social Media Platforms amoung youth",
        yaxisname: "% of youth on this platform",
        subcaption: "2012-2016",
        showhovereffect: "1",
        numbersuffix: "%",
        drawcrossline: "1",
        plottooltext: "<b>$dataValue</b> of youth were on $seriesName",
        theme: "fusion"
      },
      categories: [{
        category: [{
            label: "2012"
          },
          {
            label: "2013"
          },
          {
            label: "2014"
          },
          {
            label: "2015"
          },
          {
            label: "2016"
          }
        ]
      }],
      dataset: [{
          seriesname: "Facebook",
          data: [{
              value: "62"
            },
            {
              value: "64"
            },
            {
              value: "64"
            },
            {
              value: "66"
            },
            {
              value: "78"
            }
          ]
        },
        {
          seriesname: "Instagram",
          data: [{
              value: "16"
            },
            {
              value: "28"
            },
            {
              value: "34"
            },
            {
              value: "42"
            },
            {
              value: "54"
            }
          ]
        },
        {
          seriesname: "LinkedIn",
          data: [{
              value: "20"
            },
            {
              value: "22"
            },
            {
              value: "27"
            },
            {
              value: "22"
            },
            {
              value: "29"
            }
          ]
        },
        {
          seriesname: "Twitter",
          data: [{
              value: "18"
            },
            {
              value: "19"
            },
            {
              value: "21"
            },
            {
              value: "21"
            },
            {
              value: "24"
            }
          ]
        }
      ]
    };
    FusionCharts.ready(function() {
      var myChart = new FusionCharts({
        type: "msline",
        renderAt: "chart-container",
        width: "100%",
        height: "100%",
        dataFormat: "json",
        dataSource
      }).render();
    });
  </script>
  <div id="chart-container"></div>