How to determine the number of edges of the radarchart?

Navigation
1

I'm using RadarChart from Chart.js . I have this Fiddle working. Home Notice that in this example the graph is mounted dynamically according to the data entered. Home Well, but I would like to determine the amount of edges generated, regardless of the values, that is, instead of the 4 edges that were generated in Fiddle, I would like 10 edges. The result would look like the image:

Inadditiontotheedges,isthereanywaytoaddcaptionforboththerowsandtheitemsonthechart?HomeDespitethedocumentationand other settings available, unfortunately I'm not so good in English, and even using Translate and making trial and error I could not get the result so required.
Save Stackoverflow in English!
Could someone help me?

    
asked by anonymous 13.08.2015 / 21:52

1 answer

1

I got everything on this Fiddle . Attempt and error. Home Here is the complete code: 

var radarChartData = {
		labels: ["Eating", "Drinking", "Sleeping", "Designing"],
    datasets: [
			{
				label: "My First dataset",
				fillColor: "rgba(220,220,220,0)",
				strokeColor: "rgba(220,220,220,1)",
				pointColor: "rgba(220,220,220,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(220,220,220,1)",
				data: [2,2,2,2]
			},
			{
				label: "My Second dataset",
				fillColor: "rgba(151,187,205,0)",
				strokeColor: "rgba(151,187,205,1)",
				pointColor: "rgba(151,187,205,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(151,187,205,1)",
				data: [8,8,8,8]
			}
		]
	};

	window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
            responsive: true,
        //scaleShowLabels : true,
        animationSteps: 80,
        animationEasing: "easeOutQuart",
        scaleOverride: true,
        scaleSteps: 10,
        scaleStepWidth: 1,
        scaleStartValue: 0,
        angleShowLineOut : false,
        scaleLineColor: "rgba(0, 0, 0, 1)",
        
        legendTemplate : '<% for (var i=0; i<datasets.length; i++) { %>'
                    +'<h3 style=\"color:<%=datasets[i].strokeColor%>\">.'
                    +'<% if (datasets[i].label) { %><%= datasets[i].label %><% }%>'
                +'<% } %></h3>'
        });

document.getElementById("legendDiv").innerHTML = window.myRadar.generateLegend();
#canvas-container {
        width: 100%;
        text-align: center;
    }

    canvas {
        display: inline;
    }
<script src="http://www.chartjs.org/assets/Chart.js"></script><divid="canvas-container">
            <canvas id="canvas"></canvas>
        </div>
<div id="legendDiv"></div>


For most options, I've used global settings . Home In the matter of a static scale, just change the option scaleOverride which by default comes false to true , and this will force you to specify some other values, such as scaleSteps (How far is your scale? case 10, then scaleSteps = 10 ), scaleStepWidth (how much in how much will be incremented, in my case 1 in 1), and last scaleStartValue that determines the starting value. Home For the caption, I relied on in this answer , where I only changed in legendTemplate lineColor to strokeColor , because the link in question solves the problem for another type of chart.

    
13.08.2015 / 22:03
Select subcategory by category Strange error in class method call