Develop Reference

Drilldown Map using JSON file Highcharts

I would like to do map drilldown using Highcharts by following this US Map Drilldown example : US Map Drilldown Highcharts
This is the sample of my drilldown javascript file
var data = Highcharts.geojson(Highcharts.maps['countries/my/my-all']),
separators = Highcharts.geojson(Highcharts.maps['countries/my/my-all'], 'mapline'),
// Some responsiveness
small = $('#container').width() < 400;
// Set drilldown pointers
$.each(data, function (i) {
this.drilldown = this.properties['hc-key'];
this.value = i; // Non-random bogus data
});
// Instantiate the map
Highcharts.mapChart('container', {
chart: {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
mapKey = 'countries/my/' + e.point.drilldown + '-all',
// Handle error, the timeout is cleared on success
fail = setTimeout(function () {
if (!Highcharts.maps[mapKey]) {
chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
fail = setTimeout(function () {
chart.hideLoading();
}, 1000);
}
}, 3000);
// Show the spinner
chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
// Load the drilldown map
$.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {
data = Highcharts.geojson(Highcharts.maps[mapKey]);
// Set a non-random bogus value
$.each(data, function (i) {
this.value = i;
});
// Hide loading and add series
chart.hideLoading();
clearTimeout(fail);
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
});
}
this.setTitle(null, { text: e.point.name });
},
drillup: function () {
this.setTitle(null, { text: '' });
}
}
This is sample code for states.json
"features": [
{
"type": "Feature",
"id": "MY.SA",
"properties": {
"hc-group": "admin1",
"hc-middle-x": 0.32,
"hc-middle-y": 0.6,
"hc-key": "my-sa",
"hc-a2": "SA",
"labelrank": "6",
"hasc": "MY.SA",
"alt-name": "North Borneo",
"woe-id": "2346310",
"subregion": null,
"fips": "MY16",
"postal-code": "SA",
"name": "Sabah",
"country": "Malaysia",
"type-en": "State",
"region": null,
"longitude": "117.095",
"woe-name": "Sabah",
"latitude": "5.31115",
"woe-label": "Sabah, MY, Malaysia",
"type": "State"
},
This is sample code for district in district.json
{
"type": "Feature",
"properties": {
"GID_0": "MYS",
"NAME_0": "Malaysia",
"GID_1": "MYS.13_1",
"NAME_1": "Sabah",
"NL_NAME_1": null,
"GID_2": "MYS.13.1_1",
"NAME_2": "Beaufort",
"VARNAME_2": null,
"NL_NAME_2": null,
"TYPE_2": "Daerah",
"ENGTYPE_2": "District",
"CC_2": null,
"HASC_2": "MY.SA.BF",
"ISO": "MY-12",
"ISO_district": "MY-12.1"
},
I need to use getJSON function right? Can someone help me how to do the declaration in the javascript file?

JavaScript-Amscharts categoryAxis parseDate

First I am a beginner in JS
I am using Amcharts to display some sensor values.
First i wrote it s´traight forward as in the Amcharts documentation.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 200,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD-JJ:NN:SS",
"valueAxes": [{
"id": "v1",
"axisAlpha": 1,
"position": "left",
"ignoreAxisWidth":true,
"precision": 2,
"axisColor": PosColor1,
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"valueAxis": "v1",
"id": "Graph1",
"lineColor": PosColor1,
"negativeLineColor": NegColor1,
//"bullet": "round",
//"bulletBorderThickness": 1,
//"hideBulletsCount": 30,
"title": ChartValue1,
"valueField": ChartValue1,
//"fillAlphas": 0,
"balloonText": "<span style='font-size:22;'>[[Heizkurve]]</span>",
"balloonFunction": function(item, graph) {
var result = graph.balloonText;
for (var key in item.dataContext) {
if (item.dataContext.hasOwnProperty(key) && !isNaN(item.dataContext[key])) {
var formatted = AmCharts.formatNumber(item.dataContext[key], {
precision: chart.precision,
decimalSeparator: chart.decimalSeparator,
thousandsSeparator: chart.thousandsSeparator
}, 2);
result = result.replace("[[" + key + "]]", formatted);
}
}
return result;
}
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":10,
"scrollbarHeight": 40,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA"
},
"chartCursor": {
//"pan": true,
//"valueLineEnabled": true,
//"valueLineBalloonEnabled": true,
"categoryBalloonDateFormat": "MMM DD JJ:NN",
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
//"valueZoomable":true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"minPeriod": "fff",
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataLoader": {
"url": file,
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reload": 0,
//"timestamp": true,
"delimiter": ",",
"useColumnNames": true
},
........;
Now I tried to generate the chart object based, cause I want to update it dynamically with different data.
But when I added the "categoryAxis.oarseDate = true" then no chart will be displayed.
If i comment it out, graph is drawn but X axis is not formatted as date like before.
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.addListener("dataUpdated", zoomChart);
var categoryAxis = chart.categoryAxis;
categoryAxis.minPeriod="fff";
categoryAxis.parseDates = true;
Using the same .csv als data source.
Just load it with the Amcharts function "AmChartsLoadCSV"
function AmChartsLoadCSV(file,chart){
var newchart = new AmCharts.AmSerialChart();
newchart = chart;
AmCharts.loadFile(file, {}, function(data) {
var chartData = AmCharts.parseCSV(data, {
"delimiter": ",",
"useColumnNames": true,
"showCurtain": true,
"showErrors": true
});
var chart1 = MakeChart(chartData);
AddGraphtoChart(chart1,6);
return chart1;
});

solved!
according to the samples and democode I had a double definition for the Date axis.
I defined a general DateFormat for the Chart chart.dataDateFormat="YYYY-MM-DD-JJ:NN:SS";cause it was in the Amcharts doc.
After deleting this, the categoryAxis.parseDates = true; works fine

AMChars, Zoom to certain countries with external buttons

OK, so I have this map in AMCharts where I have external buttons that contain IDs, LAT and Long of certain countries, and when I hover over them I want the map to zoom and center itself to that country, here's the code example ...
http://codepen.io/sheko_elanteko/pen/rjYvgE
var map = AmCharts.makeChart("chartdiv", {
"type": "map",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"areas": [ {
"id": "EG",
"color": "#67b7dc",
"rollOverOutlineColor": "#000",
"autoZoom": true,
"balloonText": "Egypt"
}, {
"id": "KZ",
"color": "#67b7dc",
"rollOverOutlineColor": "#000",
"autoZoom": true,
"balloonText": "Kazakistan"
}, {
"id": "US",
"color": "#67b7dc",
"rollOverOutlineColor": "#000",
"autoZoom": true,
"balloonText": "United States"
}]
},
"areasSettings": {
"color": "#999",
"autoZoom": false,
// "selectedColor": "#CC0000",
"balloonText": "",
"outlineColor": "#fff",
"rollOverOutlineColor": "#fff"
},
"listeners": [{
"event": "rendered",
"method": function(e) {
// Let's log initial zoom settings (for home button)
var map = e.chart;
map.initialZoomLevel = map.zoomLevel();
map.initialZoomLatitude = map.zoomLatitude();
map.initialZoomLongitude = map.zoomLongitude();
}
}]
});
function centerMap() {
map.zoomToLongLat(map.initialZoomLevel, map.initialZoomLongitude, map.initialZoomLatitude);
}
$("button.country").mouseenter(function(event) {
event.stopPropagation();
var countryID = $(this).data("id");
var country = map.getObjectById(countryID);
var lat = $(this).data("lat");
var long = $(this).data("long");
country.color = '#000';
// map.zoomToSelectedObject(country);
map.zoomToLongLat(3, lat, long);
country.validate();
}).mouseleave(function(event){
event.stopPropagation();
var countryID = $(this).data("id");
var country = map.getObjectById(countryID);
country.color = '#CC0000';
country.validate();
centerMap();
});
As you can see I have the coordinates of each country hard coded, as well as the zoom level, but the zooming doesn't work properly, especially for US!!
I also wonder if there's a way to get the LAT and Long of each country so that I don't hard-code them.
There's a function in AMCharts called "zoomToSelectedObject", but I tried that and gave it the object with no luck.

You could try amCharts' selectObject method. Its default function is to zoom to the map object provided (the one that you already get by using getObjectById. Example:
$("button.country").mouseenter(function(event) {
event.stopPropagation();
var countryID = $(this).data("id");
var country = map.getObjectById(countryID);
map.selectObject(country);
}).mouseleave( ... );
Just make sure that you add "selectable": true to your areasSettings. Without it, the selectObject method won't work.
amCharts maps have excellent docs that you'll find here: https://docs.amcharts.com/3/javascriptmaps/AmMap#selectObject.

Highchart and timeline does not work with large dataset

I have been working on a large dataset : http://jsfiddle.net/470bddfp/1/
It's about 2600 entries
I don't want to group data, but use zoomtype feature instead
Unfortunately it does not work, I just change selection, and I have empty data.
What is even worst, is when I use smaller dataset like I made in this exemple http://jsfiddle.net/470bddfp/2/ zoomtype is working !
$(function() {
var chart = new Highcharts.Chart({
chart: {
"renderTo": "container",
"zoomType": "x",
"panning": true,
"panKey": "shift"
},
plotOptions: {
"series": {
"states": {
"hover": {
"enabled": false
}
}
}
},
series: [{
"name": "First Timeline",
"type": "line",
"data": [
[1447608100000, 4.256],
[1447608070000, 4.471],
[1447608045000, 4.916],
[1447608042000, 2.946],
[1447608029000, 3.517],
[1447608003000, 5.801],
[1447607954000, 4.162],
[1447607924000, 2.415],
[1447607908000, 3.314],
[1447607898000, 2.765],
[1447607888000, 3.581],
[1447607861000, 7.016],
[1447607740000, 3.485],
[1447607719000, 4.264],
[1447607700000, 2.855],
[1447607694000, 3.142],
[1447607676000, 4.92],
[1447607613000, 2.899],
[1447607603000, 2.729],
[1447607594000, 4.054],
[1447607538000, 2.61],
[1447607526000, 2.43],
[1447607515000, 5.984],
[1447607467000, 2.529],
[1447607445000, 3.398],
[1447607391000, 4.9],
[1447607365000, 4.829],
[1447607310000, 2.935],
[1447607287000, 4.811],
[1447607242000, 4.897],
[1447607219000, 3.354],
[1447607157000, 5.929],
[1447607156000, 4.444],
[1447607128000, 6.542],
[1447607125000, 8.854],
[1447607121000, 5.693],
[1447607118000, 3.906],
[1447607092000, 2.843],
[1447607085000, 2.615],
[1447607076000, 2.651],
[1447607060000, 5.015],
[1447607057000, 2.441],
[1447607045000, 4.417],
[1447607015000, 5.198],
[1447607012000, 7.056],
[1447607006000, 4.014],
[1447606988000, 3.363],
[1447606965000, 2.329],
[1447606925000, 4.209],
[1447606922000, 4.095],
[1447606892000, 3.021],
[1447606879000, 4.54],
[1447606815000, 3.73],
[1447606783000, 7.097],
[1447606781000, 4.336],
[1447606732000, 2.786],
[1447606714000, 2.774],
[1447606675000, 6.027],
[1447606626000, 3.349],
[1447606576000, 3.147],
[1447606565000, 4.873],
[1447606518000, 4.064],
[1447606500000, 2.458],
[1447606484000, 2.601],
[1447606480000, 3.839],
[1447606429000, 5.348],
[1447606390000, 5.665],
[1447606287000, 7.904],
[1447606079000, 4.976],
[1447606055000, 5.577],
[1447606016000, 4.474],
[1447605931000, 5.43],
[1447605893000, 2.979],
[1447605889000, 6.101],
[1447605758000, 2.608],
[1447605757000, 5.77],
[1447605732000, 4.056],
[1447605701000, 5.834],
[1447605668000, 3.143],
[1447605665000, 2.924],
[1447605647000, 2.941],
[1447605631000, 3.544],
[1447605589000, 3.78],
[1447605566000, 7.102],
[1447605564000, 4.404],
[1447605563000, 5.95],
[1447605536000, 3.158],
[1447605499000, 2.618],
[1447605470000, 4.327],
[1447605456000, 4.384],
[1447605434000, 6.955],
[1447605307000, 3.632],
[1447605289000, 3.25],
[1447605276000, 3.711],
[1447605266000, 4.151],
[1447605224000, 4.985],
[1447605186000, 3.37],
[1447605163000, 2.553],
[1447605136000, 6.708],
[1447605042000, 6.076],
[1447604944000, 2.934],
[1447604923000, 6.721],
[1447604660000, 5.824],
[1447604608000, 4.777],
[1447604572000, 2.702],
[1447604560000, 3.34],
[1447604512000, 8.953],
[1447604509000, 7.409],
[1447604399000, 6.201],
[1447604327000, 2.912],
[1447604317000, 3.708],
[1447604280000, 4.575],
[1447604251000, 6.961],
[1447604248000, 3.878],
[1447604237000, 3.699],
[1447604232000, 4.066],
[1447604194000, 2.265],
[1447604182000, 4.943],
[1447604135000, 2.764],
[1447604132000, 7.494],
[1447603986000, 6.042],
[1447603983000, 3.071],
[1447603948000, 5.029],
[1447603887000, 7.517],
[1447603762000, 6.409],
[1447603758000, 4.375],
[1447603729000, 6.743],
[1447603584000, 2.78],
[1447603561000, 5.06],
[1447603536000, 5.109],
[1447603499000, 3.178],
[1447603433000, 6.729],
[1447603368000, 4.771],
[1447603278000, 4.775],
[1447603256000, 2.522],
[1447603242000, 6.729],
[1447603065000, 5.433],
[1447603016000, 3.842],
[1447602983000, 7.156],
[1447602780000, 7.057],
[1447602609000, 5.594],
[1447602566000, 6.967],
[1447602420000, 4.171],
[1447602345000, 5.094],
[1447602311000, 3.869],
[1447602293000, 4.59],
[1447602290000, 2.944],
[1447602271000, 6.146],
[1447602174000, 2.749],
[1447602161000, 2.713],
[1447602116000, 7.074],
[1447602065000, 3.175],
[1447602053000, 3.326],
[1447601987000, 3.973],
[1447601984000, 5.376],
[1447601933000, 3.106],
[1447601899000, 6.304],
[1447601822000, 2.749],
[1447601773000, 5.92],
[1447601650000, 7.701],
[1447601547000, 2.893],
[1447601532000, 3.036],
[1447601523000, 6.992],
[1447601392000, 7.213],
[1447601061000, 6.555],
[1447600809000, 5.283],
[1447600771000, 4.829],
[1447600748000, 2.75],
[1447600719000, 5.896],
[1447600632000, 4.905],
[1447600607000, 2.821],
[1447600583000, 2.98],
[1447600582000, 4.549],
[1447600568000, 4.821],
[1447600527000, 3.244],
[1447600521000, 6.498],
[1447600404000, 4.902],
[1447600380000, 5.754],
[1447600287000, 4.958],
[1447600250000, 3.106],
[1447600235000, 2.655],
[1447600231000, 3.266],
[1447600194000, 5.529],
[1447600152000, 4.377],
[1447600086000, 3.799],
[1447600083000, 3.085],
[1447600072000, 5.024],
[1447600036000, 4.372],
[1447600024000, 2.653],
[1447600024000, 3.836],
[1447600015000, 3.173],
[1447600007000, 5.187],
[1447599920000, 3.063],
[1447599914000, 3.986],
[1447599898000, 4.572],
[1447599817000, 4.282],
[1447599807000, 4.841],
[1447599802000, 4.515],
[1447599764000, 2.617],
[1447599749000, 2.932],
[1447599724000, 7.049],
[1447599720000, 4.841],
[1447599695000, 6.434],
[1447599692000, 3.248],
[1447599687000, 3.738],
[1447599680000, 4.174],
[1447599625000, 4.691],
[1447599575000, 3.657],
[1447599561000, 3.93],
[1447599506000, 7.645],
[1447599243000, 7.372],
[1447599242000, 5.109],
[1447599212000, 3.965],
[1447599188000, 3.358],
[1447599177000, 5.133],
[1447599177000, 2.737],
[1447599168000, 3.591],
[1447599104000, 3.627],
[1447599094000, 4.185],
[1447599079000, 4.75],
[1447599040000, 3.388],
[1447599029000, 2.608],
[1447599020000, 2.721],
[1447598998000, 3.548],
[1447598983000, 4.117],
[1447598967000, 3.311],
[1447598953000, 4.011],
[1447598911000, 3.208],
[1447598886000, 4.261],
[1447598878000, 5.554],
[1447598845000, 4.951],
[1447598783000, 4.79],
[1447598728000, 4.677],
[1447598665000, 3.013],
[1447598648000, 3.199],
[1447598630000, 5.953],
[1447598556000, 2.935],
[1447598549000, 3.082],
[1447598521000, 4.991],
[1447598493000, 5.14]
],
"tooltip": {
"valueSuffix": " secondes"
}
}],
title: {
"text": "Temps de r\u00e9ponse de RISe"
},
xAxis: [{
"type": "datetime",
"dateTimeLabelFormats": {
"hours": "%H:%M"
}
}],
yAxis: {
"labels": {
"format": "{value}s"
},
"title": {
"text": null
},
"min": 0,
"max": 9
},
});
});
I didn't found anything in documentation relating on limitations for zoomtype
Thanks by advance for any help

Google charts: identify a specific control

Is there a way to identify which control in a set of bound controls is changed by the user?
In this instance I want to know that in a set of 5 bound controls, the user just changed control 3.
I want to resize the div that the control is within, based on the number of distinct values the user has chosen. I can get these, but I cannot identify which control has been changed.
So, something like:
var controlPicker1 = new google.visualization.ControlWrapper({
"controlType": "CategoryFilter",
"containerId": "control1",
"options": {
"filterColumnLabel": "Media source",
"ui": {
"labelStacking": "horizontal",
"allowTyping": true,
"allowMultiple": true
}
}
});
var view = new google.visualization.DataView(data);
barChart = new google.visualization.ChartWrapper({
"chartType": "BarChart",
"containerId": "chart_div",
"options": {
"width": "100%",
"height": "120%",
"vAxis": {title: "Media source (Branch - Dialled number)"},
"hAxis": {title: "Number of calls"},
"fontSize": 14,
"chartArea": {top: 0, right: 0, bottom: 0, height:"100%", width:"70%"}
},
"view": {"columns": [0,6,7,8,9,10,11]}
});
google.visualization.events.addListener(dashboard, "ready", function() {
barChart.draw();
resizeControl("control1", 50, barChart.getDataTable().getDistinctValues(1), 500);
}
});
dashboard.bind(controlPicker1, controlPicker2);
dashboard.bind(controlPicker2, controlPicker3);
dashboard.bind(controlPicker3, controlPicker4);
dashboard.bind(controlPicker4, controlPicker5);
dashboard.bind(controlPicker5, barChart);
dashboard.draw(view);
}
function resizeControl(name, total, div1, length) {
var control=div1.length;
if(total>control){
var div=document.getElementById(name);
var w=parseInt(div.style.width);
var revs=($(this).width()/length);
var newh = 35;
for (var i=0; i <(control / revs); i++) {
if(i>0)newh = newh+25;
}
newh + "px";
$(div).height(newh);
}
}
Thanks,
H.

There's not a lot of information in your post. So I'll show you how to responder to a sort event in a Table.
google.visualization.events.addListener(table, 'sort',
function(event) {
data.sort([{column: event.column, desc: !event.ascending}]);
chart.draw(view);
});
So depending on your chart type:
google.visualization.events.addListener(map, 'select',
function() {
table.setSelection(map.getSelection());
});
Find the event you want, add the listener to the chart.