cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
RedaElg
Frequent Visitor

Utilising quickchart to visualise data with x/y

Basically, i have a quickchart image :

RedaElg_0-1664376147484.png

utilising the following code :

 

 

"https://quickchart.io/chart?c="&EncodeUrl("{
  'type': 'scatter',
  'data': {
    'datasets': [
      {
        'label': 'MenacesData',
        'showLine': true,
        'lineTension': 0,
        'borderWidth': 2,
        'borderColor': 'rgba(0, 0, 255, 0)',
        'data': [
          {
            'x': '2',
            'y': '2'
          },
        ],
        'fill': false,
        'spanGaps': false,
        'pointRadius': 5,
        'pointHoverRadius': 5,
        'pointStyle': 'circle',
        'borderDash': [
          0,
          0
        ],
        'barPercentage': 0.9,
        'categoryPercentage': 0.8,
        'type': 'scatter',
        'backgroundColor': 'blue',
        'hidden': false
      }
    ],
    'labels': []
  },
  'options': {
    'title': {
      'display': true,
      'position': 'top',
      'fontSize': 12,
      'fontFamily': 'sans-serif',
      'fontColor': '#666666',
      'fontStyle': 'bold',
      'padding': 10,
      'lineHeight': 1.2,
      'text': 'Les Menaces'
    },
    'layout': {
      'padding': {
        'left': 0,
        'right': 0,
        'top': 0,
        'bottom': 0
      }
    },
    'legend': {
      'display': false,
      'position': 'top',
      'align': 'center',
      'fullWidth': true,
      'reverse': false,
      'labels': {
        'fontSize': 12,
        'fontFamily': 'sans-serif',
        'fontColor': '#666666',
        'fontStyle': 'normal',
        'padding': 10
      }
    },
    'scales': {
      'xAxes': [
        {
          'id': 'X1',
          'display': true,
          'position': 'bottom',
          'type': 'linear',
          'stacked': false,
          'time': {
            'unit': false,
            'stepSize': 1,
            'displayFormats': {
              'millisecond': 'h:mm:ss.SSS a',
              'second': 'h:mm:ss a',
              'minute': 'h:mm a',
              'hour': 'hA',
              'day': 'MMM D',
              'week': 'll',
              'month': 'MMM YYYY',
              'quarter': '[Q]Q - YYYY',
              'year': 'YYYY'
            }
          },
          'distribution': 'linear',
          'gridLines': {
            'display': true,
            'color': 'rgba(0, 0, 0, 0.1)',
            'borderDash': [
              0,
              0
            ],
            'lineWidth': 1,
            'drawBorder': true,
            'drawOnChartArea': true,
            'drawTicks': true,
            'tickMarkLength': 1,
            'zeroLineWidth': 1,
            'zeroLineColor': 'rgba(0, 0, 0, 0.25)',
            'zeroLineBorderDash': [
              0,
              0
            ]
          },
          'angleLines': {
            'display': true,
            'color': 'rgba(0, 0, 0, 0.1)',
            'borderDash': [
              0,
              0
            ],
            'lineWidth': 1
          },
          'pointLabels': {
            'display': true,
            'fontColor': '#666',
            'fontSize': 10,
            'fontStyle': 'normal'
          },
          'ticks': {
            'display': true,
            'fontSize': 12,
            'fontFamily': 'sans-serif',
            'fontColor': '#666666',
            'fontStyle': 'normal',
            'padding': 0,
            'min': 1,
            'max': 4,
            'stepSize': 0.25,
            'minRotation': 0,
            'maxRotation': 50,
            'mirror': false,
            'reverse': false
          },
          'scaleLabel': {
            'display': true,
            'labelString': 'Probabilite',
            'lineHeight': 1.2,
            'fontColor': '#666666',
            'fontFamily': 'sans-serif',
            'fontSize': 12,
            'fontStyle': 'normal',
            'padding': 4
          }
        }
      ],
      'yAxes': [
        {
          'id': 'Y1',
          'display': true,
          'position': 'left',
          'type': 'linear',
          'stacked': false,
          'time': {
            'unit': false,
            'stepSize': 1,
            'displayFormats': {
              'millisecond': 'h:mm:ss.SSS a',
              'second': 'h:mm:ss a',
              'minute': 'h:mm a',
              'hour': 'hA',
              'day': 'MMM D',
              'week': 'll',
              'month': 'MMM YYYY',
              'quarter': '[Q]Q - YYYY',
              'year': 'YYYY'
            }
          },
          'distribution': 'linear',
          'gridLines': {
            'display': true,
            'color': 'rgba(0, 0, 0, 0.1)',
            'borderDash': [
              0,
              0
            ],
            'lineWidth': 1,
            'drawBorder': true,
            'drawOnChartArea': true,
            'drawTicks': true,
            'tickMarkLength': 10,
            'zeroLineWidth': 1,
            'zeroLineColor': 'rgba(0, 0, 0, 0.25)',
            'zeroLineBorderDash': [
              0,
              0
            ]
          },
          'angleLines': {
            'display': true,
            'color': 'rgba(0, 0, 0, 0.1)',
            'borderDash': [
              0,
              0
            ],
            'lineWidth': 1
          },
          'pointLabels': {
            'display': true,
            'fontColor': '#666',
            'fontSize': 10,
            'fontStyle': 'normal'
          },
          'ticks': {
            'display': true,
            'fontSize': 12,
            'fontFamily': 'sans-serif',
            'fontColor': '#666666',
            'fontStyle': 'normal',
            'padding': 0,
            'min': 1,
            'max': 4,
            'stepSize': 0.25,
            'minRotation': 0,
            'maxRotation': 50,
            'mirror': false,
            'reverse': false
          },
          'scaleLabel': {
            'display': true,
            'labelString': 'Impact',
            'lineHeight': 1.2,
            'fontColor': '#666666',
            'fontFamily': 'sans-serif',
            'fontSize': 12,
            'fontStyle': 'normal',
            'padding': 4
          }
        }
      ]
    },
    'plugins': {
      'datalabels': {
        'display': false,
        'align': 'center',
        'anchor': 'center',
        'backgroundColor': '#eee',
        'borderColor': '#ddd',
        'borderRadius': 6,
        'borderWidth': 1,
        'padding': 4,
        'color': '#666666',
        'font': {
          'family': 'sans-serif',
          'size': 10,
          'style': 'normal'
        }
      },
      'tickFormat': ''
    },
    'cutoutPercentage': 50,
    'rotation': -1.5707963267948966,
    'circumference': 6.283185307179586,
    'startAngle': -1.5707963267948966
  }
}")

 

 

and in my sharepoint list, i have a bunch of records that have  the following columns:

- Impact (number 1-4)

- Probabilite (number 1-4)

 

basically, what i want to do is utilise this code to represent all the items in the list with "Impact" being the Y coordinate, and "Probabilite" being the X coordinate.

 

Quickcharts uses this code snippet to place the points :

 

 

        'data': [
          {
            'x': '2',
            'y': '2'
          },
        ],

 

 

what i want to do, is repeat the {x, y} part as many times as i have records, and everytime give it it's according impact & probabilite.

 

EX:

Record 1 has impact 2 and probabilite 3.

- Create a new data point in {'x': '3', 'y': '2'}

 

 

How do i go around doing something like this?

If you have any questions i can clarify everything

1 ACCEPTED SOLUTION

Accepted Solutions
v-bofeng-msft
Community Support
Community Support

Hi @RedaElg ,

 

Do you want to show multiple points on the chart according to the records in the table?

 

If so , I've made a test for your reference:

1\I assume there is a table:

ClearCollect(ACollection,{Impact:2,Probabilite:2},{Impact:2,Probabilite:3});Set(cc,JSON(ACollection))

2\The chart should be:

"https://quickchart.io/chart?c="&EncodeUrl("{
  'type': 'scatter',
  'data': {
    'datasets': [
      {
        'label': 'MenacesData',
        'showLine': true,
        'lineTension': 0,
        'borderWidth': 2,
        'borderColor': 'rgba(0, 0, 255, 0)',
        'data': [
"&Concat(ForAll(ACollection,"{x:"&Impact&",y:"&Probabilite&"}"),Value,",")&"
        ],
        'fill': false,
        'spanGaps': false,
        'pointRadius': 5,
        'pointHoverRadius': 5,
        'pointStyle': 'circle',
        'borderDash': [
          0,
          0
        ],
        'barPercentage': 0.9,
        'categoryPercentage': 0.8,
        'type': 'scatter',
        'backgroundColor': 'blue',
        'hidden': false
      }
    ],
    'labels': []
  },
  'options': {
    'title': {
      'display': true,
      'position': 'top',
      'fontSize': 12,
      'fontFamily': 'sans-serif',
      'fontColor': '#666666',
      'fontStyle': 'bold',
      'padding': 10,
      'lineHeight': 1.2,
      'text': 'Les Menaces'
    },
    'layout': {
      'padding': {
        'left': 0,
        'right': 0,
        'top': 0,
        'bottom': 0
      }
    },
    'legend': {
      'display': false,
      'position': 'top',
      'align': 'center',
      'fullWidth': true,
      'reverse': false,
      'labels': {
        'fontSize': 12,
        'fontFamily': 'sans-serif',
        'fontColor': '#666666',
        'fontStyle': 'normal',
        'padding': 10
      }
    },
    'scales': {
      'xAxes': [
        {
          'id': 'X1',
          'display': true,
          'position': 'bottom',
          'type': 'linear',
          'stacked': false,
          'time': {
            'unit': false,
            'stepSize': 1,
            'displayFormats': {
              'millisecond': 'h:mm:ss.SSS a',
              'second': 'h:mm:ss a',
              'minute': 'h:mm a',
              'hour': 'hA',
              'day': 'MMM D',
              'week': 'll',
              'month': 'MMM YYYY',
              'quarter': '[Q]Q - YYYY',
              'year': 'YYYY'
            }
          },
          'distribution': 'linear',
          'gridLines': {
            'display': true,
            'color': 'rgba(0, 0, 0, 0.1)',
            'borderDash': [
              0,
              0
            ],
            'lineWidth': 1,
            'drawBorder': true,
            'drawOnChartArea': true,
            'drawTicks': true,
            'tickMarkLength': 1,
            'zeroLineWidth': 1,
            'zeroLineColor': 'rgba(0, 0, 0, 0.25)',
            'zeroLineBorderDash': [
              0,
              0
            ]
          },
          'angleLines': {
            'display': true,
            'color': 'rgba(0, 0, 0, 0.1)',
            'borderDash': [
              0,
              0
            ],
            'lineWidth': 1
          },
          'pointLabels': {
            'display': true,
            'fontColor': '#666',
            'fontSize': 10,
            'fontStyle': 'normal'
          },
          'ticks': {
            'display': true,
            'fontSize': 12,
            'fontFamily': 'sans-serif',
            'fontColor': '#666666',
            'fontStyle': 'normal',
            'padding': 0,
            'min': 1,
            'max': 4,
            'stepSize': 0.25,
            'minRotation': 0,
            'maxRotation': 50,
            'mirror': false,
            'reverse': false
          },
          'scaleLabel': {
            'display': true,
            'labelString': 'Probabilite',
            'lineHeight': 1.2,
            'fontColor': '#666666',
            'fontFamily': 'sans-serif',
            'fontSize': 12,
            'fontStyle': 'normal',
            'padding': 4
          }
        }
      ],
      'yAxes': [
        {
          'id': 'Y1',
          'display': true,
          'position': 'left',
          'type': 'linear',
          'stacked': false,
          'time': {
            'unit': false,
            'stepSize': 1,
            'displayFormats': {
              'millisecond': 'h:mm:ss.SSS a',
              'second': 'h:mm:ss a',
              'minute': 'h:mm a',
              'hour': 'hA',
              'day': 'MMM D',
              'week': 'll',
              'month': 'MMM YYYY',
              'quarter': '[Q]Q - YYYY',
              'year': 'YYYY'
            }
          },
          'distribution': 'linear',
          'gridLines': {
            'display': true,
            'color': 'rgba(0, 0, 0, 0.1)',
            'borderDash': [
              0,
              0
            ],
            'lineWidth': 1,
            'drawBorder': true,
            'drawOnChartArea': true,
            'drawTicks': true,
            'tickMarkLength': 10,
            'zeroLineWidth': 1,
            'zeroLineColor': 'rgba(0, 0, 0, 0.25)',
            'zeroLineBorderDash': [
              0,
              0
            ]
          },
          'angleLines': {
            'display': true,
            'color': 'rgba(0, 0, 0, 0.1)',
            'borderDash': [
              0,
              0
            ],
            'lineWidth': 1
          },
          'pointLabels': {
            'display': true,
            'fontColor': '#666',
            'fontSize': 10,
            'fontStyle': 'normal'
          },
          'ticks': {
            'display': true,
            'fontSize': 12,
            'fontFamily': 'sans-serif',
            'fontColor': '#666666',
            'fontStyle': 'normal',
            'padding': 0,
            'min': 1,
            'max': 4,
            'stepSize': 0.25,
            'minRotation': 0,
            'maxRotation': 50,
            'mirror': false,
            'reverse': false
          },
          'scaleLabel': {
            'display': true,
            'labelString': 'Impact',
            'lineHeight': 1.2,
            'fontColor': '#666666',
            'fontFamily': 'sans-serif',
            'fontSize': 12,
            'fontStyle': 'normal',
            'padding': 4
          }
        }
      ]
    },
    'plugins': {
      'datalabels': {
        'display': false,
        'align': 'center',
        'anchor': 'center',
        'backgroundColor': '#eee',
        'borderColor': '#ddd',
        'borderRadius': 6,
        'borderWidth': 1,
        'padding': 4,
        'color': '#666666',
        'font': {
          'family': 'sans-serif',
          'size': 10,
          'style': 'normal'
        }
      },
      'tickFormat': ''
    },
    'cutoutPercentage': 50,
    'rotation': -1.5707963267948966,
    'circumference': 6.283185307179586,
    'startAngle': -1.5707963267948966
  }
}")

vbofengmsft_0-1664415707001.png

 

Best Regards,

Bof

 

View solution in original post

2 REPLIES 2
v-bofeng-msft
Community Support
Community Support

Hi @RedaElg ,

 

Do you want to show multiple points on the chart according to the records in the table?

 

If so , I've made a test for your reference:

1\I assume there is a table:

ClearCollect(ACollection,{Impact:2,Probabilite:2},{Impact:2,Probabilite:3});Set(cc,JSON(ACollection))

2\The chart should be:

"https://quickchart.io/chart?c="&EncodeUrl("{
  'type': 'scatter',
  'data': {
    'datasets': [
      {
        'label': 'MenacesData',
        'showLine': true,
        'lineTension': 0,
        'borderWidth': 2,
        'borderColor': 'rgba(0, 0, 255, 0)',
        'data': [
"&Concat(ForAll(ACollection,"{x:"&Impact&",y:"&Probabilite&"}"),Value,",")&"
        ],
        'fill': false,
        'spanGaps': false,
        'pointRadius': 5,
        'pointHoverRadius': 5,
        'pointStyle': 'circle',
        'borderDash': [
          0,
          0
        ],
        'barPercentage': 0.9,
        'categoryPercentage': 0.8,
        'type': 'scatter',
        'backgroundColor': 'blue',
        'hidden': false
      }
    ],
    'labels': []
  },
  'options': {
    'title': {
      'display': true,
      'position': 'top',
      'fontSize': 12,
      'fontFamily': 'sans-serif',
      'fontColor': '#666666',
      'fontStyle': 'bold',
      'padding': 10,
      'lineHeight': 1.2,
      'text': 'Les Menaces'
    },
    'layout': {
      'padding': {
        'left': 0,
        'right': 0,
        'top': 0,
        'bottom': 0
      }
    },
    'legend': {
      'display': false,
      'position': 'top',
      'align': 'center',
      'fullWidth': true,
      'reverse': false,
      'labels': {
        'fontSize': 12,
        'fontFamily': 'sans-serif',
        'fontColor': '#666666',
        'fontStyle': 'normal',
        'padding': 10
      }
    },
    'scales': {
      'xAxes': [
        {
          'id': 'X1',
          'display': true,
          'position': 'bottom',
          'type': 'linear',
          'stacked': false,
          'time': {
            'unit': false,
            'stepSize': 1,
            'displayFormats': {
              'millisecond': 'h:mm:ss.SSS a',
              'second': 'h:mm:ss a',
              'minute': 'h:mm a',
              'hour': 'hA',
              'day': 'MMM D',
              'week': 'll',
              'month': 'MMM YYYY',
              'quarter': '[Q]Q - YYYY',
              'year': 'YYYY'
            }
          },
          'distribution': 'linear',
          'gridLines': {
            'display': true,
            'color': 'rgba(0, 0, 0, 0.1)',
            'borderDash': [
              0,
              0
            ],
            'lineWidth': 1,
            'drawBorder': true,
            'drawOnChartArea': true,
            'drawTicks': true,
            'tickMarkLength': 1,
            'zeroLineWidth': 1,
            'zeroLineColor': 'rgba(0, 0, 0, 0.25)',
            'zeroLineBorderDash': [
              0,
              0
            ]
          },
          'angleLines': {
            'display': true,
            'color': 'rgba(0, 0, 0, 0.1)',
            'borderDash': [
              0,
              0
            ],
            'lineWidth': 1
          },
          'pointLabels': {
            'display': true,
            'fontColor': '#666',
            'fontSize': 10,
            'fontStyle': 'normal'
          },
          'ticks': {
            'display': true,
            'fontSize': 12,
            'fontFamily': 'sans-serif',
            'fontColor': '#666666',
            'fontStyle': 'normal',
            'padding': 0,
            'min': 1,
            'max': 4,
            'stepSize': 0.25,
            'minRotation': 0,
            'maxRotation': 50,
            'mirror': false,
            'reverse': false
          },
          'scaleLabel': {
            'display': true,
            'labelString': 'Probabilite',
            'lineHeight': 1.2,
            'fontColor': '#666666',
            'fontFamily': 'sans-serif',
            'fontSize': 12,
            'fontStyle': 'normal',
            'padding': 4
          }
        }
      ],
      'yAxes': [
        {
          'id': 'Y1',
          'display': true,
          'position': 'left',
          'type': 'linear',
          'stacked': false,
          'time': {
            'unit': false,
            'stepSize': 1,
            'displayFormats': {
              'millisecond': 'h:mm:ss.SSS a',
              'second': 'h:mm:ss a',
              'minute': 'h:mm a',
              'hour': 'hA',
              'day': 'MMM D',
              'week': 'll',
              'month': 'MMM YYYY',
              'quarter': '[Q]Q - YYYY',
              'year': 'YYYY'
            }
          },
          'distribution': 'linear',
          'gridLines': {
            'display': true,
            'color': 'rgba(0, 0, 0, 0.1)',
            'borderDash': [
              0,
              0
            ],
            'lineWidth': 1,
            'drawBorder': true,
            'drawOnChartArea': true,
            'drawTicks': true,
            'tickMarkLength': 10,
            'zeroLineWidth': 1,
            'zeroLineColor': 'rgba(0, 0, 0, 0.25)',
            'zeroLineBorderDash': [
              0,
              0
            ]
          },
          'angleLines': {
            'display': true,
            'color': 'rgba(0, 0, 0, 0.1)',
            'borderDash': [
              0,
              0
            ],
            'lineWidth': 1
          },
          'pointLabels': {
            'display': true,
            'fontColor': '#666',
            'fontSize': 10,
            'fontStyle': 'normal'
          },
          'ticks': {
            'display': true,
            'fontSize': 12,
            'fontFamily': 'sans-serif',
            'fontColor': '#666666',
            'fontStyle': 'normal',
            'padding': 0,
            'min': 1,
            'max': 4,
            'stepSize': 0.25,
            'minRotation': 0,
            'maxRotation': 50,
            'mirror': false,
            'reverse': false
          },
          'scaleLabel': {
            'display': true,
            'labelString': 'Impact',
            'lineHeight': 1.2,
            'fontColor': '#666666',
            'fontFamily': 'sans-serif',
            'fontSize': 12,
            'fontStyle': 'normal',
            'padding': 4
          }
        }
      ]
    },
    'plugins': {
      'datalabels': {
        'display': false,
        'align': 'center',
        'anchor': 'center',
        'backgroundColor': '#eee',
        'borderColor': '#ddd',
        'borderRadius': 6,
        'borderWidth': 1,
        'padding': 4,
        'color': '#666666',
        'font': {
          'family': 'sans-serif',
          'size': 10,
          'style': 'normal'
        }
      },
      'tickFormat': ''
    },
    'cutoutPercentage': 50,
    'rotation': -1.5707963267948966,
    'circumference': 6.283185307179586,
    'startAngle': -1.5707963267948966
  }
}")

vbofengmsft_0-1664415707001.png

 

Best Regards,

Bof

 

RedaElg
Frequent Visitor

@v-bofeng-msft thank you very much!

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Top Solution Authors
Top Kudoed Authors
Users online (1,519)