jQuery UI Widgets › Forums › Chart › formatSettings usage
Tagged: chart, formatSettings, jqxChart, settings
This topic contains 3 replies, has 4 voices, and was last updated by Hristo 5 years, 9 months ago.
-
AuthorformatSettings usage Posts
-
hey
i was going through the API documentation of the jqxChart and came through the property formatSettings under categoryAxis “formatSettings – settings used to format the displayed values.”
what attributes are used by this function??Hello adnanzahid,
Here are the properties you may set in the formatSettings object: decimalSeparator, thousandsSeparator, prefix, sufix, decimalPlaces, negativeWithBrackets.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi!
I was check the api documentation. i am using a line Chart but i have a trouble.
i am using two functions.
the first one is to get the settings just like this:var getSettingsDefault = function(data){
var settings = {
title: “TITULO DE LA GRAFICA”,
description: “DESCRIPCIÓN DE LA GRAFICA”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 11, bottom: 5 },
titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
source: data,
xAxis:
{
dataField: ‘nombre’,
unitInterval: 1,
tickMarks: { visible: true, interval: 1 },
gridLinesInterval: { visible: true, interval: 1 },
valuesOnTicks: false,
labels:
{ text: ‘Numero de semana<br>’}
},
valueAxis:
{
labels: {horizontalAlignment: ‘right’},
title: { text: ‘Monto<br>’ }
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘line’,
series: [
{
dataField: ‘dataField’,
displayText: ‘displayText’,
symbolType: “square”,
labels:
{
visible: true,
backgroundColor: ‘#FEFEFE’,
backgroundOpacity: 0.2,
borderColor: ‘#7FC4EF’,
borderOpacity: 0.7,
formatSettings: {thousandSeparator:’,’, prefix:’$’},
padding: { left: 5, right: 5, top: 0, bottom: 0 }
}
},]
}
]
};
return settings;
}
the second one is for set the title and datafield where the chart is going to get the source.var GraficaMonto = function(data){
var s = getSettingsDefault(data);
s.title = “COBRANZA”;
s.description = “$ de Malas”;
s.valueAxis.title.text = ‘Pesos<br>’;
s.seriesGroups[0].series[0].dataField = ‘monto_malas’;
//s.seriesGroups[0].series[0].labels.formatSettings = {prefix:’$’};
s.seriesGroups[0].series[0].displayText = ‘$ de Malas’;
$(“#ContenedorGraficaMonto”).jqxChart(s);
}My question is, How can i set the formatSettings? because i am sending my data like numbers, but i need to show it in the page with de comma separator and the $ simbol.
I hope you can help me
best regards
Hello GuillermoRL,
I would like to mention something important.
I saw that you use a function to get the settings of the jqxChart and to prepare the data.
It is important to make the initialization just once.
If you want to update the jqxChart you should use its methods and properties.The “formatFunction” callback is a suitable option that you could use to fully overwrite the result.
Please, take a look at this example:<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <script type="text/javascript" src="../../scripts/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare chart data as an array var sampleData = [ { Day: 'Monday', Running: 3000, Swimming: 10000, Cycling: 250, Goal: 4000 }, { Day: 'Tuesday', Running: 2050, Swimming: 14500, Cycling: 100, Goal: 5000 }, { Day: 'Wednesday', Running: 300, Swimming: 10000, Cycling: 250, Goal: 6000 }, { Day: 'Thursday', Running: 4000, Swimming: 2000, Cycling: 250, Goal: 4000 }, { Day: 'Friday', Running: 405, Swimming: 2500, Cycling: 205, Goal: 5000 }, { Day: 'Saturday', Running: 300, Swimming: 2600, Cycling: 300, Goal: 6000 }, { Day: 'Sunday', Running: 200, Swimming: 3800, Cycling: 100, Goal: 9000 } ]; var source = { datatype: "array", datafields: [ { name: 'Day', type: 'date' }, { name: 'Running' }, { name: 'Swimming' }, { name: 'Cycling' }, { name: 'Goal' } ], localdata: sampleData }; var dataAdapter = new $.jqx.dataAdapter(source); // prepare jqxChart settings var settings = { title: "Fitness & exercise weekly scorecard", description: "Time spent in vigorous exercise by activity", enableAnimations: true, showLegend: true, padding: { left: 10, top: 10, right: 15, bottom: 10 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, // sampleData, colorScheme: 'scheme05', xAxis: { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1 }, gridLinesInterval: { visible: true, interval: 1 }, valuesOnTicks: false, padding: { bottom: 10 } }, valueAxis: { unitInterval: 500, minValue: 0, maxValue: 15000, title: { text: 'Time in minutes<br><br>' }, labels: { horizontalAlignment: 'right' } }, seriesGroups: [ { type: 'line', series: [ { dataField: 'Swimming', symbolType: 'square', formatSettings: { prefix: '$' }, labels: { visible: true, backgroundColor: '#FEFEFE', backgroundOpacity: 0.2, borderColor: '#7FC4EF', borderOpacity: 0.7, padding: { left: 5, right: 5, top: 0, bottom: 0 } } }, { dataField: 'Running', symbolType: 'square', labels: { visible: true, backgroundColor: '#FEFEFE', backgroundOpacity: 0.2, borderColor: '#7FC4EF', borderOpacity: 0.7, padding: { left: 5, right: 5, top: 0, bottom: 0 } }, formatFunction: function (value) { var formattedNumber = dataAdapter.formatNumber(value, 'n'); return '$' + formattedNumber; } } ] } ] }; // setup the chart $('#chartContainer').jqxChart(settings); }); </script> </head> <body> <div id='chartContainer' style="width: 850px; height: 500px;"></div> </body> </html>Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.