I recently received a development assignment that asked me to do a statistic on the customer feedback answers in the “Customer satisfaction Survey questionnaire for after-sales service”.

Examples of questions are as follows:

  • When was the last time you purchased our product?
  • Is the service staff friendly and conscientious?
  • How do you feel about our after-sales service in general?

.

What I want to achieve is a report that shows the total number of occurrences for each question and each answer on the same page.

I implemented a simple effect, as shown below:

Of course, all six ICONS use the same test data, which mainly solves the layout problem of multiple charts appearing on the same page.

Use the link below to test the effect. Use Chrome developer tools to see the 093_chart.html implementation.

I042416. Making. IO/FioriODataT…

Open effect on the phone.

A quick look at the code:

Each of the two divs contains six canvas. The first div is responsible for displaying the results of the problem with six pie charts, and the six canvas charts in the second div display the bar chart. I marked each canvas as! Important’s display:inline property forces the graphs in the Canvas node to be displayed from left to right instead of the default line wrap.

function loaded(){

   var totalWidth = getBodyNode().clientWidth;

   console.log("width in load: " + totalWidth);

   var aCharts = document.getElementsByTagName("canvas");

   for( var i = 0; i < aCharts.length; i++){

         aCharts[i].width = totalWidth / 6.5;

   }

   var option = {

       type: "pie".xAxisData: ["Red"."Blue"."Yellow"."Green"."Purple"."Orange"].yAxisData: [12.19.3.5.2.3].yAxisLabel: "Number of Votes"

   };

   for( var i = 1; i <= 6; i++ ){

         createChartOnCanvas("myChart" + i, option);

   }

   option.type = "bar";

   for( var i = 1; i <= 6; i++ ){

        createChartOnCanvas("barChart"+ i, option); }}Copy the code

Line 41 takes the total width of the current window from the clientWidth property of the body node and divides it by 6.5 to get the width of each graph. The reason why we divide by 6.5 instead of 6 is to leave some space between the graphs in each row.

The graph type, X and Y coordinate data, and label are passed to the createChartOnCanvas function through the Option object.

For more of Jerry’s original technical articles, please follow the public account “Wang Zixi” or scan the following QR code: