[yodaParticipant]

It’s great to see that TypeScript definitions and Angular2 integration are coming soon.
Looking forward to getting these in some of the next releases.

Are you planning to post these here:
https://github.com/DefinitelyTyped/DefinitelyTyped

Cheers!

[yodaParticipant]

Try this:

                seriesGroups:
                    [
                        {
                            type: 'line',
                            series: [
                                { dataField: 'a', lineWidth: 1, showLegend: false },
                                { dataField: 'b', lineWidth: 1}
                            ]
                        }
                    ]

[yodaParticipant]

According to the API doc the property name is ‘angle’. Just replace textRotatioAngle with angle and it should work for you.
Here’s how I use it in one of my charts:

     seriesGroups: [{
         type: 'column',
         valueAxis: {
             title: {text: 'Price'}
         },
         series: [{
             dataField: 'Purchase',
             labels: {visible: true, angle: 90}
         }, {
             dataField: 'Sale',
             labels: {visible: true, angle: 90}
         }]

[yodaParticipant]

Check this post:

http://www.jqwidgets.com/community/topic/column-chart-does-not-plot-all-series/

Based on your description adding skipOverlappingPoints: false might help in your case as well.

[yodaParticipant]

Hi David,

Are you actually looking for labels and not tooltips?

See the example below or just add the following to your series: labels: {visible: true}

Code:

  $('#chartContainer').jqxChart({
        title: false,
        description: false,
        showBorderLine: false,
        padding: {
            left: 5,
            top: 5,
            right: 5,
            bottom: 5
        },
        showToolTips: true,
        toolTipShowDelay: 0,
        toolTipHideDelay: 2000,
        xAxis: {
            dataField: "X",
            valuesOnTicks: false,
            gridLines: {
                visible: true
            },
            title: {text: "XXXX"}
        },
        colorScheme: "scheme01",
        seriesGroups: [
            {
                type: "scatter",
                valueAxis: {
                    minValue: 0,
                    maxValue: 105.60000000000001,
                    visible: false
                },
                series: [
                    {
                        dataField: "Event",
                        displayText: "Event",
                        labels: {
                            visible: true   
                        }
                    }
                ]
            }
        ],
        source: [
            {
                "Event": "50"
            },
            {
                "Event": "154"
            },
            {
                "Event": "96"
            },
            {
                "Goal": "90.0"
            },
            {
                "Event": "45"
            },
            {
                "Goal": "90.0"
            }
        ]
    });

[yodaParticipant]

You can use the legendFormatFunction as noted in the docs:

$(document).ready(function () {
	/* input data */
	var data = [
	{Browser: 'Internet Explorer', Share: '24.6'},
	{Browser: 'Firefox', Share: '18'},
	{Browser: 'Chrome', Share: '49.7'},
	{Browser: 'Safari', Share: '4.7'},
	{Browser: 'Opera', Share: '1.5'},
	{Browser: 'Others', Share: '1.6'}];
	
	/* data adapter settings */
	var dataAdapter = new $.jqx.dataAdapter({
		localdata: data,
		datafields: [
			{name: "Browser", type: "string"},
			{name: "Share", type: "number"}
		]
	});

	/* chart settings */
	var chartSettings = {
		source: dataAdapter,
		title: "Desktop browsers market share",
		description: "",
		legendLayout: {
			left: 10,
			top: 80,
			width: 150,
			height: 200,
			flow: "vertical"
		},
		padding: {
			left: 5,
			top: 5,
			right: 5,
			bottom: 5
		},
		titlePadding: {
			left: 5,
			top: 5,
			right: 5,
			bottom: 5
		},
		enableAnimations: false,
		xAxis: {
			dataField: "Browser",
			valuesOnTicks: true
		},
		valueAxis: {
			valuesOnTicks: true
		},
		seriesGroups: [			
			{
				type: "pie",
				series: [					
					{
						dataField: "Share",
						displayText: "Browser",
						labels: {
							visible: true,
							radius: 90
						},
						formatSettings: {
							sufix: "%"
						},
						legendFormatFunction: function(value, itemIndex, serie, group) {
                            return 'item ' + itemIndex + ': '+ value;
						}
					}
				]
			}
		]
	}
	
	/* create chart in the container element */
	$('#chartContainer').jqxChart(chartSettings);
});

Inside the function you have all the paramters that are needed to provide a dynamic string. You can even reference the data in your data source like this:

data[itemIndex][‘propertyName’] where property name is the name of the field you need to access, e.g. in this sample ‘Browser’ or ‘Share’.

[yodaParticipant]

There you go:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='description'>Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var sampleData = [

                    { Month: 'Mar 2014', Actual: 10, Plan: 25 },
                    { Month: 'Apr 2014', Actual: 34, Plan: 25 },
                    { Month: 'May 2014', Actual: 23, Plan: 25 },
                    { Month: 'Jun 2014', Actual: 21, Plan: 25 },
                    { Month: 'Jul 2014', Actual: 25, Plan: 25 },
                    { Month: 'Aug 2014', Actual: 33, Plan: 25 },
                    { Month: 'Sep 2014', Actual: 11, Plan: 25 },
                    { Month: 'Oct 2014', Actual: 32, Plan: 25 },
                    { Month: 'Nov 2014', Actual: 14, Plan: 25 },
                    { Month: 'Dec 2014', Actual: 18, Plan: 25 },
                    { Month: 'Jan 2014', Actual: 21, Plan: 31 },
                    { Month: 'Feb 2015', Actual: 25, Plan: 31 }

            ];

            var settings = {
                title: "SAC Montlhy KPI Graphs",
                description: "Average Age of Contracts Definitized",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                {
                    dataField: 'Month',
                    unitInterval: 1,
                    textRotationAngle: -75,
                    gridLines: { visible: false }
                },
                colorScheme: 'scheme07',
                valueAxis:
                {
                    minValue: 0,
                    maxValue: 40,
                    unitInterval: 5,
                    title: { text: 'Days<br>' },
                    labels: {
                        horizontalAlignment: 'right'
                    }
                },
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 20,
                            series: [
                                        { dataField: 'Actual', displayText: 'Actual', opacity: 1,
                                            labels: {
                                                visible: true,
                                                verticalAlignment: 'top',
                                                offset: { x: 0, y: -20 }
                                            },
                                            colorFunction: function (value, itemIndex, serie, group) {
                                                if (isNaN(itemIndex))
                                                    return '#55CC55'; 
                                                
                                                return (value > sampleData[itemIndex]['Plan']) ? '#CC1133' : '#55CC55';
                                            }
                                        }

                                ]
                        },
                        {
                            type: 'line',
                            series: [
                                    { dataField: 'Plan', displayText: 'Target', opacity: 1, lineWidth: 2 }
                                ]
                        }
                    ]
            };

            $('#chartContainer').jqxChart(settings);
        });   
    </script>
</head>
<body>
	<div id='chartContainer' style="width:600px; height: 400px"/>
</body>
</html>

[yodaParticipant]

Hi Vipin,

If you run your code in a debugger you’ll see that the root cause of your problem is that the objects you defined dynamically don’t have a hasOwnProperty function. See the following for more details and more specifically the accepted answer (the 2nd one):
http://stackoverflow.com/questions/12017693/why-use-object-prototype-hasownproperty-callmyobj-prop-instead-of-myobj-hasow

Btw some your js code is outside of the $.ready function and hence won’t work as expected. So you need to reorder it a bit. For example, on my laptop it didn’t.

Cheers!

[yodaParticipant]

I don’t see the axis type and unit in the the code.
You should specify the type of the axis and set it to ‘date’ if you’re using dates. Also provide the unit (like ‘year’, ‘month’, ‘day’, ‘hour’, etc…):

xAxis 
{
  dataField: 'datetime',
  formatFunction: function (value) {
     return $.jqx.dataFormat.formatdate(value, 'dd/MM/yyyy');
  },
  type: 'date',
  baseUnit: 'day'
}

[yodaParticipant]

Hi Carlo,

I guess the issue here is that in your example the unitInterval is bigger. Ticks and grid lines align to unitInterval so that implies they need to be multiples of the unitInterval. You can get to what you’re trying to do very easily – just make the unitInterval the smallest and then you can skip some labels in the formatFunction if you want the labels like 0,4,8,…,n*4

Here’s as a fiddle:

http://jsfiddle.net/yodadev/w8vfxLvd/3/

Cheers!

[yodaParticipant]

You can check “jQuery 2 Recipes: A Problem-Solution Approach” by Arun Pande.
It has a chapters about jQWidgets which is a good intro to the library.

Here’s a link to the Kindle edition:

http://www.amazon.com/jQuery-Recipes-Problem-Solution-Arun-Pande-ebook/dp/B00M7WRX2W/ref=dp_kinw_strp_1

[yodaParticipant]

Btw, the same works for the value axis.

[yodaParticipant]

You can use the visible property:

categoryAxis: {
dataField: ‘Year’,
description: ”,
showGridLines: false,
showTickMarks: false,
valuesOnTicks: false,
visible: false
}

[yodaParticipant]

There are references to symbolSize in the source code. Is it something not released yet?

[yodaParticipant]

Hi atomic,

You seem to be upgrading from a much older version of the chart. According to the APIs the color property was deprecated and I guess it was kept for backwards compatibility:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-api.htm

You should be able to replace with a combination of these (copy-pasted from the documentation):

color – (Deprecated) fill color for the serie.
lineColor – Line color for the serie.
lineColorSelected – Line color for the serie when selected.
fillColor – Fill color for the serie.
fillColorSelected – Fill color for the serie when selected.
lineColorSymbol – Line color for the marker symbols in serie.
lineColorSymbolSelected – Line color for the marker symbols in the serie when selected.
fillColorSymbol – Fill color for the marker symbols in the serie.
fillColorSymbolSelected – Fill color for the the marker symbols in serie when selected.

Also I find it useful to work with the custom color functions like here:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_series_conditional_colors.html

[Author]

Posts