How to draw an unknown number of charts using charts.js (or google charts) with a loop
NickName:jason Ask DateTime:2017-09-14T16:37:28

How to draw an unknown number of charts using charts.js (or google charts) with a loop

I'm not really after code but got myself into a loop (no pun). I'm hoping that by the time I write this down, I'll work it out.

I'm trying to think how to draw a number of charts to show a student's grade and the average grade. A student will have have a number of grades which will change over time. I'm trying to work out how to do this.

I've used google charts before and that's fine the issue is how to create and display a number of charts where the number required is unknown.

The data will be in the database and so I use Ajax requests to return JSON data for the grade (student grade, average, and labels). when I know how many charts to produce it's fine.

I think I need to do something like (all in javascript?)

  1. Query to return the number of grades -AJax so useable in Javascript
  2. Use above query to create a loop to process all grades
  3. Within loop -use Ajax to produce data for each chart - query=user and grade
  4. within loop - create chart using JS library like charts.js or google charts
  5. Within loop - create appropriate to attach chart to

step 3 is where I'm stuck: I'm struggling as in the case I don't know how many grades to query and what parameters to use e.g. Ajax query ..../userid/grade-title

In this case, it's unknown until I start looking for the data.

Has anyone done similar? Do you just use Javascript to render all the s required to display charts? Do I initially build an array of grades to query -not just the count of grades to display?

I'm writing this here as it usually helps and as I type I think I've worked it out but just now wondering if anyone has any other suggestions. Just a list of steps is fine.

Copyright Notice:Content Author:「jason」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/46214296/how-to-draw-an-unknown-number-of-charts-using-charts-js-or-google-charts-with

More about “How to draw an unknown number of charts using charts.js (or google charts) with a loop” related questions

How to draw an unknown number of charts using charts.js (or google charts) with a loop

I'm not really after code but got myself into a loop (no pun). I'm hoping that by the time I write this down, I'll work it out. I'm trying to think how to draw a number of charts to show a student's

Show Detail

Draw multiple Google charts in for loop

I am trying to draw multiple Google charts in a for loop, but can't seem to make it work. I have seen some similar questions being asked, but only with PHP. Anyone who can help? This is what I have...

Show Detail

Draw multiple Google charts in for loop

I am trying to draw multiple Google charts in a for loop, but can't seem to make it work. I have seen some similar questions being asked, but only with PHP. Anyone who can help? This is what I have...

Show Detail

Links in bar charts (charts.js)

I am very new to charts.js and I was wondering if it is possible to make bars in bar charts clickable links? I saw that it was possible for doughnut charts. I'd appreciate any help. Thanks!

Show Detail

Getting charts.js to read from Google Sheet JSON data

I have hard coded charts online using charts.js as follows: var config = { type: 'pie', data: { datasets: [{ data: [2574,1663,1670], backgroundColor: [window.chartColors.red,wi...

Show Detail

Creating external JS page to build google charts with dynamic number of and types of charts

I am trying to use the google chart api to display a number of charts. The number of charts is dynamic as is the chart type. Currently, I am only using the pie chart type but will be adding to it...

Show Detail

Charts.js & Bootstrap Accordion

I have been trying to understand why Charts.js wouldn't draw a chart if it's inside a Bootstrap Accordion. After many attempts I managed to understand why it's not drawing the chart! it's because the

Show Detail

How to draw to google charts in one div?

I'm using google Charts API to draw some charts of my data. I have something like: Obj1: At1, at2, etc. Obj2: ... Objx: So, i don't know how many objets come from the web service i'm using. How c...

Show Detail

Google Charts: Drawing Multiple Charts in IE

I am trying to visualize some data into 4 different charts using google charts. Below is a sample of the code I use to draw the charts. It works in every browser except IE (works in edge). In I...

Show Detail

2 Versions of charts.js in single page for dark mode

I have used 2 versions of charts.js on my HTML page. First I used v2, then I realized there is no offset property for the pie chart in v2, so I also used v3 for that pie chart. First I declared v2 ...

Show Detail