Trying to get some data off of a webservice and display it in a chart. I figured chart js would be a good means to do so. (actually using tc-angular-chartjs). The $http.get( ) call I am using to test is:
$http.get('http://myjson.com/1chr1').success(function(data2) {
data2.forEach(function(r) {
$scope.labels.push(r.name);
$scope.scores.push(r.score);
});
});
and here is the whole js file for just the doughnut chart:
'use strict';
angular
.module( 'app.doughnut', [] )
.controller( 'DoughnutCtrl', function ( $scope ) {
$scope.labels = [];
$scope.scores = [];
$scope.data = [
{
value: 700,
color:'#F7464A',
highlight: '#FF5A5E',
label: 'Red'
},
{
value: 50,
color: '#46BFBD',
highlight: '#5AD3D1',
label: 'Green'
},
{
value: 100,
color: '#FDB45C',
highlight: '#FFC870',
label: 'Yellow'
}
];
$scope.options = {
// Sets the chart to be responsive
responsive: true,
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke : true,
//String - The colour of each segment stroke
segmentStrokeColor : '#fff',
//Number - The width of each segment stroke
segmentStrokeWidth : 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout : 50, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps : 100,
//String - Animation easing effect
animationEasing : 'easeOutBounce',
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate : true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale : false,
//String - A legend template
legendTemplate : '<ul class="tc-chart-js-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
};
});
The issue I am running into is that most of these examples use the same format to supply the chart with data (static data with the same labels like value/label/color/highlight).
For my needs the colors or highlight dont really matter but I need the data pulled from a wesbervice where the value I need for the chart is called name and the label for the chart is called score.
So I was thinking I could do the $http.get( ) call and put the labels and scores into 2 different arrays and then the data portion in the js would look something like:
$scope.data = {
labels : ["option 1","option 2","option 3"],
values : [ 10, 20, 30 ],
datasets: [ value : values, color : #F7484A, highlight : #FF5A5E, label : labels]
};
I saw something like this done for a Chart.js bar graph, but not for a doughnut graph, and I cannot seem to get it to work. Maybe it isnt possible?
Are there any other alternatives? I mean I cannot be the only person who needs to display dynamic data into a nice responsive chart, but all of the examples use static data.
EDIT ANSWER I took dubhov's advice. Also found out my webservice link was messed up so I wasnt getting any data :p. Here is the new js for future reference:
'use strict';
angular
.module('app.doughnut', [])
.controller('DoughnutCtrl', function($scope, $http) {
$http.get('https://api.myjson.com/bins/1chr1').success(function(data2) {
$scope.data = [];
data2.forEach(function(r) {
$scope.data.push({
'value': r.score,
'color': '#F7464A',
'highlight': '#FF5A5E',
'label': r.name
});
});
});
$scope.options = {
// Sets the chart to be responsive
responsive: true,
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: '#fff',
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout: 50, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: 'easeOutBounce',
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//String - A legend template
legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
};
});
Chart.js expects the data to be formatted like it is with the static examples. Can't you just add an object to the data array with the data you need? Like this:
$scope.data.push({'value':r.score,
'label':r.name,
'color':'#RANDOMCOLOR',
'highlight':'#SLIGHTLYSHADEDRANDOMCOLOR'});
As far as the colors, which may or may not be required by the API (I think they will be), you can either go random, or if you know that your dataset is limited, you can select from a static list of colors. Here's some ideas on randoms: https://stackoverflow.com/a/25709983/769971
Related
When i run the code the chart disappears
$(document).ready(function(){
var d1=${views};
var d2=${comoneviews};
var d3=${comtwoviews};
var plot1 = $.jqplot('piechart', [[['Your Organisation',d1],['Competitor#1',d2],['Competitor#2',d3]]], {
gridPadding: {top:0, bottom:38, left:0, right:0},
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
trendline:{ show:false },
rendererOptions: { padding: 7, showDataLabels: true , dataLabels: 'value'}
},
legend:{
show:true,
placement: 'outside',
rendererOptions: {
numberRows: 1
},
location:'s',
marginTop: '15px'
}
});
});
the input values i am getting for d1 is 20700000 , d2 is 2300000, and d3 is 3040000. So does the chart does not appear because of higher values?
Per your comment, you just need to refer to the d1,d2 and d3 array values correctly. As you've mentioned, you are getting them as arrays - so the problem must be with your access to the actual values.
Access them as d1[0] d2[0] d3[0] (assuming you have a one sized array like you wrote)
var d1=[20700000];
var d2=[2300000];
var d3=[3040000];
var plot1 = $.jqplot('piechart', [[['Your Organisation',d1[0]],
['Competitor#1',d2[0]],['Competitor#2',d3[0]]]], {
...rest of plot code...
here is a working example with d1-d3 modified to arrays.
I'm working with highcharts and aiming to make a chart similar to this:
Now I've been playing around with the whole ordeal for a while now and I've come been able to reach the following point: http://jsfiddle.net/ccjSy/24/
$(function () {
$(document).ready(function () {
var chart = null;
var categories = ['Body Fat', 'Lean Mass'],
name = 'Body Fat vs. Lean Mass',
data = [{
y: 69,
color: '#F0CE0C',
drilldown: {
name: 'Body Fat',
color: '#F0CE0C'
}
}, {
y: 207,
color: '#23A303',
drilldown: {
name: 'Lean Mass' ,
color: '#23A303'
}
}];
// Build the data array
var browserData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
}
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'donutchart',
type: 'pie',
spacingTop: 0
},
title: {
text: 'Your Body Fat vs Lean Mass',
style: {"color": '#7d7d7d'}
},
series: [{
name: 'Weight',
data: browserData,
dataLabels: {
style: {
fontFamily: 'ArialMT',
fontSize: '15px',
fontWeight: 'bold',
color: '#7d7d7d'
}
},
innerSize: '70%'
}],
tooltip: {
valueSuffix: ' lbs'
},
plotOptions: {
series: {
cursor: 'pointer'
}
}
});
});
});
I am thinking of leaving the space empty in the donut chart and inserting a custom circle with the Weight labeling.
However, I'm not certain how to tackle the following problems:
1) Leave more defined white spaces in between my two columns
2) How to properly align my two data labels? (As you can see in the model, they are in a straight line with neutral lines attached)
3) How to display the data underneath the two labels with both, the pounds and the percentage, as shown in the image.
Answering each of your three questions:
"More white space between columns?" -- add a plotOptions.pie.borderWidth element. The default value is 1. I used 5 to give it more white space.
"Properly align the two data labels?" -- You can compute a custom startAngle based on the two data values which will give you the correct angle to start with. Since you only have two data values in the series, that's easy.
Calculate startAngle for pie chart
var startAngle = 0 - (90 + (180 * (data[0].y / (data[0].y + data[1].y))));
Notice that if you change the y value for the first data object, the "Body Fat" portion of the pie chart will still maintain it's correct position, even as the portion of the chart grows larger or smaller.
"Display data underneath the two labels with custom formatting?" -- use plotOptions.pie.format to apply custom formatting to the pie value labels.
format: '<div style="position: relative; top: -20px; text-align: center">{point.name}<br><b><span style="font-size: 29px">{point.percentage:.0f}%</span></b> ({point.y} lbs)</div>'
Here's a working JSFiddle to see the results. You'll still need to add a dark gray circle behind the pie chart and add the "Total Weight" text but that shouldn't be too difficult.
Since I'm sure you'll be wondering about this, I should mention that there's a lot of white space under the pie chart title because it's leaving enough room for other labels that may appear above or below the pie. Since you're only using two values that will always be on the left/right sides of the pie chart, that doesn't change the fact that HighCharts is preparing to have other labels that may need to be displayed in the surrounding area.
Programmatically control visibility (CSS and show / hide) of each point in C3 charts type Area Spline.
Here is the jsFiddle example.
var chart = c3.generate({
data: {
columns: [
['data1', 100, 200, 150, 300, 200]
],
type: 'area-spline'
},
point: {
show: true
}
});
Points in the C3 configuration only allows for all or none, but afterwards the visibility of the points can be altered through selection of the circles via the c3 css classes. These circles are bound to the data points so then writing a function that picks out the data points you want can be used to control visibility as below:
var chart = c3.generate({
data: {
columns: [
['pete', 30, 200, 100, 400, 150, 250],
['steve', 50, 20, 10, 40, 15, 25]
]
},
point: {
show: true
}
});
var visx = d3.set([2,4]);
d3.selectAll(".c3-chart-line .c3-circles").selectAll(".c3-circle").style("display", function(d) {
//return visx.has(d.x) ? null : "none"; // show points at x values 2 and 4
return d.value > 150 ? null : "none"; // or show points when value is above 150
})
http://jsfiddle.net/ud8gyphw/
The simple answer to:
Is it possible to do through C3 configuration instead of writing code through D3.
Is yes this is because C3 is used to generate D3-based charts by wrapping the code required to construct the entire chart meaning we don't have to write D3 code any more.
You should be able to configure C3js without D3js because we don't have to write D3 code any more.
NOTE: C3 depends on D3, so please load D3 too.
You can read more about C3js over on the Official Website.
You can also check out the C3js Docs.
I wanted to ask, if there is a way to push chart to right side, so there will not be any free space. I attached simple image, red line show, that this space should be filled also by chart.
Also is possible to create vertical lines as dots ? I can't find answers to my questions, on official doc.
An this is my javsacript code:
var lineChartData = {
labels : ["January","February","March","April"],
datasets : [
{
label: "Dataset",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [0,3,4,11]
}
]
};
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
scaleOverride: true,
scaleSteps: Math.ceil((max-start)/step),
scaleStepWidth: step,
pointDot : false,
});
}
The space is there because the last x axis label (April). Chart.js leaves enough space so that the label does not get clipped off. This also ensures that the tooltip for the last point shows without clipping off.
You could set the last (or all) labels to an empty string to get rid of the space. However, you won't see any labels in the tooltips. If you want to see the labels in the tooltips you need to extend the chart to remove the x axis labels like so
Chart.types.Line.extend({
name: "LineAlt",
initialize: function (data) {
var labels = data.labels;
data.labels = data.labels.map(function () { return '' });
Chart.types.Line.prototype.initialize.apply(this, arguments);
this.datasets[0].points.forEach(function (point, i) {
point.label = labels[i]
})
}
});
Note that you need to use LineAlt instead of Line.
Fiddle - http://jsfiddle.net/0u2c7tez/
However this will still clip off the tooltip for the last point. If you are going to enable tooltips and don't want them to be clipped off, then you need to use custom tooltips so that the tooltip is rendered in an external element (instead of the canvas) and not clipped off (see https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html)
This question already has answers here:
Chart.js - Doughnut show tooltips always?
(5 answers)
Closed 7 years ago.
I want to show the labels by default when the page loads. But default chart.js will not show any labels until we do mouseover. I am writing code like below.
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData,{
animationSteps: 100,
animationEasing: 'easeInOutQuart',
scaleShowLabels : true
});
This is my data.
var pieData = [
{
value: 100,
color:"#F7464A",
highlight: "#FF5A5E",
label: "New",
},
{
value: 220,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "In Progress"
}];
What is the property to show the labels by default? I am not able to find under the documentation of chart.js
Actually it is quite easy, you only have to override 2 options properties :
// Draw the tooltips when the animation is completed
onAnimationComplete: function() {
this.showTooltip(this.segments);
},
// Block the mouse tooltip events so the tooltips
// won't disapear on mouse events
tooltipEvents: []
First you force to draw the tooltips when animation is completed, and then you block the mouse events to override the default behaviour as you don't need it anymore (this behaviour is to show only the active tooltip and hide the others)
See my JSFiddle here
You add it in pieData ex:
var pieData = [
{
value : 30,
color : "#F38630",
label : 'Sleep',
labelColor : 'white',
labelFontSize : '16'
},
...
];