Develop Reference

Swimlane ngx-charts in Angular2 - Different styles on a single line chart

I have a single line chart, with dates on the X axis. After a certain date,
I would like the line to be a different color. Is this possible using ngx-charts?

Let us assume the date after which you want to change the color as T.
Now you can divide the series into 2 parts
The from start date to T
From T to end date.
And now you can plot the graph using different color for different series
The following data will generate the desired graph.
var data = [
{
"name": "Current",
"series": [
{
"value": 5599,
"name": "2016-09-20T01:04:28.176Z"
},
{
"value": 6247,
"name": "2016-09-20T12:51:24.713Z"
},
{
"value": 4283,
"name": "2016-09-18T15:42:04.800Z"
},
{
"value": 2643,
"name": "2016-09-13T20:10:53.904Z"
},
{
"value": 4105,
"name": "2016-09-18T06:15:10.845Z"
},
{
"name": "2016-09-18T13:08:42.085Z",
"value": 4401
},
{
"name": "2016-09-20T01:04:28.176Z",
"value": 3443
}
]
},
{
"name": "Future",
"series": [
{
"value": 3443,
"name": "2016-09-20T01:04:28.176Z"
},
{
"value": 2604,
"name": "2016-09-20T12:51:24.713Z"
},
{
"value": 2158,
"name": "2016-09-18T15:42:04.800Z"
},
{
"value": 5519,
"name": "2016-09-13T20:10:53.904Z"
},
{
"value": 4532,
"name": "2016-09-18T06:15:10.845Z"
},
{
"name": "2016-09-18T13:08:42.085Z",
"value": 2474
}
]
}
]

Multiline Highchart based on Dates

I want to create a multiline highchart which takes 24hrs in x axis and for each date plot one line.
[{
"date": "2017-05-01T02:50:26",
"value": 764.88
},
{
"date": "2017-05-02T12:29:07",
"value": 978.66
},
{
"date": "2017-05-04T08:30:20",
"value": 522.61
},
{
"date": "2017-05-04T12:29:34",
"value": 762.7
},
{
"date": "2017-05-02T11:09:56",
"value": 809.96
},
{
"date": "2017-05-03T03:32:35",
"value": 736.94
},
{
"date": "2017-05-04T12:56:53",
"value": 339.68
}
]
Here we have 4 unique dates i.e
2017-05-01 , 2017-05-02 , 2017-05-03 , 2017-05-04
and we want four lines of each date. But the x axis has to be hour:minute and y axis is value. I created a fiddle.

To change the way xAxis labels display, you can use Highcharts.dateFormat() function inside xAxis.labels.formatter. Take a look at the example posted below.
API Reference:
http://api.highcharts.com/highcharts/xAxis.labels.formatter
http://api.highcharts.com/highcharts/Highcharts.dateFormat
Example:
http://jsfiddle.net/x41vev1p/

Jquery dataTable handle json data with pagination

First, I have data from url like this GET /api/fruit?per_page=10&page=1 and this is what I got :
{
"data": [
{
"id": "1",
"name": "Orange",
"price": "200"
},
{
"id": "2",
"name": "Manggo",
"price": "300"
},
...(display 10 data)
],
"meta": {
"pagination": {
"total": 69487,
"count": 10,
"per_page": 10,
"current_page": 1,
"total_pages": 4633
}
}
}
Then I following this code fiddle and success render data, and pagination work as well. But input search not working. My question is how to use jquery dataTable properly with data from api like this GET /api/fruit?per_page=10&page=1

LabelDisplay for fusion charts MScombi3d charts

I need some help in displaying the xaxis labels for a MSCombi3d chart. I have checked and for 2d charts, there are below two attributes available. which when we set in the chart, the x axis labels will display in a rotated format.
labelDisplay='Rotate' & slantLabels='1'
But when I try to use the above for a MScombi3d chart it doesnot work. I have gone through the documentation and could only find this attribute xLabelGap='50'. But it does not rotate/display the x axis labels in a slant.
Can someone please suggest the attribute that needs to be used for MSCombi3d charts to display the x axis labels in a slant.
Any help on this is much appreciated.

The attribute xLabelGap is perhaps a deprecated or at least not applicable in FusionCharts Javascript version. Although I found some usage of this attribute here, but nowhere in the official FusionCharts docs
I found the attributes labelDisplay and slantLabels in MSCombi3d charts(JS version) functional since its 3.4.0 version. Might work before that too! :D
Below snippet illustrates the use of these attributes with its latest version. You can visit the download page.
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'stackedcolumn3dlinedy',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Business Results 2005 v 2006",
"xaxisname": "Month",
"yaxisname": "Revenue",
"showvalues": "0",
"numberprefix": "$",
"labelDisplay": "rotate",
"slantLabels": "1",
"animation": "1"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "2006",
"data": [{
"value": "27400"
}, {
"value": "29800"
}, {
"value": "25800"
}, {
"value": "26800"
}, {
"value": "29600"
}, {
"value": "32600"
}, {
"value": "31800"
}, {
"value": "36700"
}, {
"value": "29700"
}, {
"value": "31900"
}, {
"value": "34800"
}, {
"value": "24800"
}]
}, {
"seriesname": "2005",
"renderas": "Area",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}, {
"value": "11000"
}, {
"value": "9800"
}, {
"value": "11800"
}, {
"value": "19700"
}, {
"value": "21700"
}, {
"value": "21900"
}, {
"value": "22900"
}, {
"value": "20800"
}]
}, {
"seriesname": "2004",
"renderas": "Line",
"data": [{
"value": "7000"
}, {
"value": "10500"
}, {
"value": "9500"
}, {
"value": "10000"
}, {
"value": "9000"
}, {
"value": "8800"
}, {
"value": "9800"
}, {
"value": "15700"
}, {
"value": "16700"
}, {
"value": "14900"
}, {
"value": "12900"
}, {
"value": "8800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "22000",
"color": "91C728",
"displayvalue": "Target"
}]
}],
"styles": {
"definition": [{
"name": "bgAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}],
"application": [{
"toobject": "BACKGROUND",
"styles": "bgAnim"
}]
}
}
}).render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- Stacked Column 3D + Line Dual Y axis chart showing quarterly cost analysis for the last year. -->
<div id="chart-container">FusionCharts will render here</div>
A fiddle link for the avobe implementation.
Get to know more about the supported attributes in MSCombination 3d charts from here.

Need help on Pie Chart transition on taking DATA from mouse hover to a STATE of the Map

I need some help about D3js about connecting data.
here is the one iam working on::
http://jsfiddle.net/2emnt8m3/16/
The value should be taken only from the state that the mouse hover for generating PIE chart . but i am facing some difficulty in taking the DATA
from the mouse hover, Any help would be appreciated.
dataSet = [
{
"label": "Assault on women ",
"value": 64131,
"color": "#1ee675"
},
{
"label": "Dowry Deaths",
"value": 57618,
"color": "#44b9ae"
},
{
"label": "Cruelty",
"value": 18812,
"color": "#7b37c0"
},
{
"label": "Dowry Prohibition Act",
"value": 114384,
"color": "#bca349"
},
{
"label": "Immoral Traffic (P) Act",
"value": 67706,
"color": "#8b6834"
},
{
"label": "Importation of Girls",
"value": 36344,
"color": "#cc9fb0"
},
{
"label": "Kidnapping and Abduction",
"value": 36344,
"color": "#cc9fb0"
},
{
"label": "Total Crimes against Women",
"value": 36344,
"color": "#cc9fb0"
},
{
"label": "INSULT TO MODEST",
"value": 32170,
"color": "#7c9058"
}
];
Here is one of the example I have look on:
http://simonbjohnson.github.io/Ebola_Dashboard/