I am using amCharts Stock Chart.
How to format the numbers on value axis? Currently it shows me 5,218,923.96 and I need value like 52,18,923.96.
The only way to achieve custom formatting like this is to use labelFunction on your value axis.
You can set it to a custom function, which will take the value and re-format it to your own format using your own logic:
"panels": [{
// ...
"valueAxes": [{
"labelFunction": function(value) {
// reformat and return the value
// ...
return value;
}
}]
}]
Related
I want to display only time series. but by default first label showing date. I want it to show "00:00"
https://i.stack.imgur.com/PdWuZ.png
You can set markPeriodChange to false in your categoryAxis to prevent the axis from bolding and using a different date format for the first date:
AmCharts.makeChart("chartdiv", {
// ...
categoryAxis: {
// ...
markPeriodChange: false,
// ...
}
});
I'm using Keen.io ("version": "3.4.1") JavaScript SDK, along with their integration with C3.js, to produce a donut graph by using the code below. However, I don't want percentages, but rather absolute numbers. i.e. Not 25%, but 7.
From reading the docs and looking at examples (see "var c3gauge") and example, I thought you could modify the output by applying the chartOptions. That doesn't seem to be working. At this point, I feel like I'm doing something stupid I'm just not catching.
How do I display absolute values in my donut, not percentages?
var c3donut = new Keen.Dataviz()
.library('c3')
.chartType('donut')
.el(document.getElementById(elem))
.title("Awesome Sauce")
.parseRawData(data)
.chartOptions({
donut: {
label: {
format: function (value) {
console.log("I never fire, why?");
return value;
}
}
}
})
.render();
This is possible with keen-dataviz.js library. I've created a working example here: https://jsfiddle.net/bx9efr4h/1/
Here's part of the code that made it work:
var chart = new Keen.Dataviz()
.el('#chart')
.type("donut")
.chartOptions({
donut: {
label: {
format: function(value) {
return value;
}
}
}
})
.prepare();
keen-js works a little differently because c3.js is not the default dataviz library for it. This is likely why it isn't working like expected for you.
For example, I have a series which have 5 points and their values are 5,10,15,20,25, now I want to change the color of the part series which contains point1(value:5) to point2(value:10) to be red, and want to change the color of the part series which contains point2(value:10) to point2(value:15) to be green, and so on, How to do that? Now I can change the color of the whole series, but do not know how to change the part of the series according to its value?
change the whole series
function onDataBound(e) {
e.sender.options.series[0].color= "red";
}
Just like this example, I now can change the color of the point, but can not change the line between the start point and end point.my example
The color option of the series can be set to a function which will be called during rendering. Here is a short demo:
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [1, 2],
color: function(point) {
if (point.value > 1) {
return "red";
}
// use the default series theme color
}
}]
});
I want to set the type of graph programaticaly.
So, instead of using, for example, this in seriesDefaults:
renderer:$.jqplot.BarRenderer,
I want to use renderer:$.jqplot.graphtype, where graphtype has been set to BarRenderer, LineRenderer etc.
But it does not work in whatever format I use graphtype (always defaults to default line graph). Advice on passing this value appreciated.
thanks
Setting an option like this renderer:$.jqplot.BarRenderer in your options already is a programmatical way of doing it.
Presumably, you're trying to change this value depending on a text variable (as opposed to a reference to an object like $.jqplot.BarRenderer).
You don't have to define this when you define your options. You could do this later, based on a default set of options. For example:
var myDefaultOptions = {
seriesDefaults:{
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
highlighter: { show: false }
}
// ...
// Note: $.extend(true, ...) for a deep copy, if you're re-using this later.
var myOptions = $.extend(true, {}, myDefaultOptions);
if (graphType == 'bars') {
myOptions.seriesDefaults.renderer = $.jqplot.BarRenderer;
} else if (graphType == '...') {
// Other renderer
}
var plot = $.jqplot('chart1', data, myOptions);
Using this might also give you the opportunity to change other settings that may make more sense depending on the graph type (whether it makes sense to zoom, highlight, ...).
If you want to do this for specific series, you should first create an empty series: {} in your default options, it will make it easier to set individual options there (accessing each series with a number).
I'm using the jQuery tablesorter plugin and I have a column that contains name of month and year like this
April, 1975
January, 2001
I would like to sort this column as if it were a date column. As I understand it, it is possible to sort the column with some other 'hidden' value, but I just can't seem to find the documentation for that feature. Any help out there?
Update
This fork http://mottie.github.com/tablesorter/docs/index.html of the tablesorter had just what I needed; the ability to store the value to sort by in an attribute, worked really great.
Just using the textExtraction function. Set data-sort-value on your TDs. Defaults to normal text if it's not present.
$(".sort-table").tablesorter({
textExtraction: function(node) {
var attr = $(node).attr('data-sort-value');
if (typeof attr !== 'undefined' && attr !== false) {
return attr;
}
return $(node).text();
}
});
I have a fork of tablesorter that allows you to write a parser that can extract data attributes from the table cell as well as assign specific textExtraction for each column.
$(function(){
$.tablesorter.addParser({
// set a unique id
id: 'myParser',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s, table, cell, cellIndex) {
// get data attributes from $(cell).attr('data-something');
// check specific column using cellIndex
return $(cell).attr('data-something');
},
// set type, either numeric or text
type: 'text'
});
$('table').tablesorter({
headers : {
0 : { sorter: 'myParser' }
}
});
});
This is now a STANDARD FEATURE of tablesorter, though it's undocumented for some reason. If you open the file https://github.com/christianbach/tablesorter/blob/master/jquery.tablesorter.js and look at the line # 307 you'll see it supports the "data-sort-value" attribute.
Usage:
<td data-sort-value="42">Answer to the question</td>
It's a bit of a hack (OK, it's a total hack), but if you set the parser for the column to 'text', and pre-fix your pretty output with the string you really want to sort on within a hidden span it will sort correctly.
You can set the parser on a column with the headers option, e.g. to set the parser on the first and second columns to 'text' you would set the following:
headers: {0: {sorter: 'text'}, : {sorter: 'text'}
To do this trick with dates, you can use the ISO8601 date format which sorts lexically. JS's Date objects can generate ISO8601 date strings via the toISOString() function.
Given the CSS:
span.hidden{
display:none;
}
A sample cell in the table would look like this:
<td><span class="hidden">2015-04-18T23:48:33</span>19 April 2015</td>
Not the prettiest code in the world, but it does work.
I am using
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.min.js"></script>
Working with data-text
<td data-text="42">Answer to the question</td>
Not Working with data-sort-value
<td data-sort-value="42">Answer to the question</td>
You need to write your own parser. Your parser might end up looking something like:
var months = {'January':1,'February':2, ...};
$.tablesorter.addParser({
id: 'myDate',
is: function(s) { return false; },
format: function(s) {
var x = s.split(', ');
return x[1]+'-'+months[x[2]];
},
type: 'numeric'
});
Not tested, but general idea.