Develop Reference

Invert jQuery Sparkline Graph

I am using jQuery Sparkline graphs by Omnipotent and want to know if there is any way to invert the graph?
$(".sparkline").sparkline("html", {
height: "1.5em",
width: "8em",
lineColor: '#23c6c8',
fillColor: '#23c6c85e',
minSpotColor: !1,
maxSpotColor: !1,
spotColor: '#f0f0f0',
spotRadius: 3,
tooltipFormat: '#{{offset:offset}} #{{value}}',
tooltipValueLookups: {
'offset': {!! json_encode($dateArray) !!}
},
});
Currently the higher the number supplied the higher the graph point, I want it to be the reverse.

I managed to work around this by reversing the chart and unreversing the tooltip using the formatter.
Multiplied everything by -1 and added to the sparkline chart
Added this:
tooltipFormatter: function(sparkline, options, point) {
return Math.abs(point.y)+'º '+Math.abs(options.userOptions.tooltipValueLookups.points.map[point.y]) + ' pts.';
},
To the options, which returns Xº Z pts. (in my case that just did it).

jQPlot charts- Pie chart disappears on passing high values

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.

How can I programatically control the visibility of each point in areaspline c3 charts?

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.

Fill Chart js with $http.get() data

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

Add Legend to Donut Chart - jqPlot

OK, this should be relatively simple :
I'm adding a donut chart, which does work
However, the 'legend' (like Head (+) along with the corresponding colour) does NOT show up.
Code :
$(document).ready(function(){
var s1 = [['Head (+)',<?php echo $headScore; ?>], ['Head (-)',<?php echo 6-$headScore; ?>]];
var s2 = [['Body (+)',<?php echo $totalScore-$headScore; ?>], ['Body (-)',<?php echo 7-$totalScore+$headScore; ?>]];
var plot3 = $.jqplot('linkchart', [s1,s2], {
title:"Score Profile",
seriesDefaults: {
// make this a donut chart.
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
// Donut's can be cut into slices like pies.
sliceMargin: 3,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: false
},
legend: { show:true, location: 'e' }
}
});
});
What am I doing wrong?

Kameleon,
It looks like you have done a silly mistake. : )
First end the seriesDefaults property and then define the legend.
You have placed the legend inside the seriesDefaults.
var plot3 = $.jqplot('linkchart', [s1,s2], {
title:"Score Profile",
seriesDefaults: {
// make this a donut chart.
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
// Donut's can be cut into slices like pies.
sliceMargin: 3,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: false
} // Not here...
},
//Place the legend here....
legend: { show:true, location: 'e' }
});
});
I have not tested it. But I think it should work.
Thank you.