Here is a full link to the project: Electoral Map
I have this Highchart map that I'm trying to convert to React but can't quite figure it out. I tried using React rappers but didn't succeed.
What I have:
JSON data - will be fetched from an API but I have hard-coded them as below.
Jquery functions that maps the data.
Several highcharts imports.
I have not included the path data, too long it wouldnt post.
$(function() {
var json = [{
"name": "Busia",
"registered": "251305",
"UDA": "0",
"Azimio": "0",
"value": "-5"
},{
"name": "Wajir",
"registered": "118091",
"UDA": "8",
"Azimio": "7",
"value": "-2"
}]
function init() {
function pointClick(json) {
var row = this.options.row,
$div = $('<div></div>')
.dialog({
title: ([this.name]),
width: 400,
height: 300
});
window.chart = new Highcharts.Chart({
chart: {
renderTo: $div[0],
type: 'pie',
width: 370,
height: 240
},
title: {
text: null
},
series: [{
name: 'Votes',
data: [{
name: 'Azimio',
color: '#0200D0',
y: Number(this.Azimio)
}, {
name: 'UDA',
color: '#C40401',
y: Number(this.UDA)
}],
dataLabels: {
format: '<b>{point.name}</b> {point.value:.1f}%'
}
}]
});
}
// Initiate the chart
$('#presidential').highcharts('Map', {
title: {
text: 'Presidential Electoral Map <em>(Kenya)</em>'
},
legend: {
title: {
text: 'Political Affiliation'
}
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: 'Margin'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
colorAxis: {
dataClasses: [{
from: 0.0000001,
to: 100,
color: '#C40401',
name: 'UDA'
}, {
from: -100,
to: -0.00000001,
color: '#0200D0',
name: 'Azimio'
}, {
from: 0,
to: 0,
color: '#C0C0C0',
name: 'Battle Ground(s)'
}]
},
series: [{
name: 'By County Difference',
point: {
events: {
click: pointClick
}
},
"type": "map",
"joinBy": ['name', 'name'],
"data": $.each(json, function() {}),
"mapData": [{
"name": "Busia",
"path": "M40,-534,43,-533,46,-532L46,-530L44,-528,44,-525C44,-525,41,-520,41,-520L40,-516,40,-513,41,-511C41,-511,44,-512,43,-509,43,-506,44,-504,44,-504L38,-499,38,-497,44,-495,45,-493,41,-489,41,-486L36,-486L34,-487,30,-488,28,-487,25,-484,22,-484,20,-486,18,-483,16,-481,15,-478,14,-476L14,-473L15,-471,14,-469L12,-469L10,-467,9,-464,10,-459C10,-459,9,-458,7,-457,5,-456,5,-455,5,-455L3,-459,0,-462,0,-465,2,-470,2,-474L2,-478L5,-481,8,-486,10,-491,13,-493L13,-495L12,-499,13,-503,15,-506,15,-510,16,-513C16,-513,19,-516,20,-517,21,-517,24,-519,24,-519L27,-519,28,-519,31,-520L31,-524L32,-526,33,-527,34,-531,35,-532z"
},
}]
}, {
"type": "mapline",
"data": [{
"name": "path5072",
"path": "M443,-449Z"
}]
}]
});
}
init()
});
I've reproduced your example in the working demo that you can find below.
What's important, I didn't use the dialog popup which is a specific jQuery method. Instead, I show a pie chart inside the tooltip, with the use of several point.events such like mouseOver, mouseOut and click as well.
point: {
events: {
//Show the default tooltip
mouseOver: function () {
let point = this;
this.series.chart.update({
tooltip: {
enabled: true,
formatter: function () {
let s = "";
s += `<span style="color:${point.color}">●</span> <span style="font-size: 10px"> ${point.series.name}</span><br/>`;
s += `${point.name}: ${point.value}<br/>`;
return s;
}
}
});
},
//Show the pie chart
click: function () {
let y1 = Number(this.Azimio);
let y2 = Number(this.UDA);
this.series.chart.update({
tooltip: {
useHTML: true,
enabled: true,
formatter: function () {
setTimeout(function () {
Highcharts.chart("chart", {
chart: {
type: "pie"
},
title: {
text: null
},
series: [
{
name: "Votes",
data: [
{
name: "Azimio",
color: "#0200D0",
y: y1
},
{
name: "UDA",
color: "#C40401",
y: y2
}
],
dataLabels: {
format: "<b>{point.name}</b> {point.value:.1f}%"
}
}
]
});
}, 10);
return '<div id="chart" style="width: 300px; height: 150px;"></div>';
}
}
});
},
//Remove the tooltip
mouseOut: function () {
this.series.chart.update({
tooltip: {
enabled: false
}
});
}
}
},
API REference:
https://api.highcharts.com/highmaps/series.map.point.events
Demo:
https://codesandbox.io/s/highcharts-react-demo-forked-44tmqt
I want to load data dynamically in a graph.
If my data is:
"data": [
{
"A": "11",
"DATE": "2018-02-07",
"B": "100"
},
{
"A": "12",
"DATE": "2018-03-04",
"B": "1"
}
]`
And the view part is
loadChart: function () {
var cha = this.down('#charid');
var iii = null;
Ext.Ajax.request({
url: utils.createUrl('api', 'dashboard-read'),
async: true,
callback: function(opts, success, response) {
try {
if (success) {
var fields = ['A', 'B'];
cha.series.clear();
for(var i=0;i<fields.length;i++){
cha.series.add({
type: 'line',
axis: 'left',
xField: 'DATE',
border: false,
flex: 1,
title: fields[i],
yField: fields[i],
markerConfig: {
radius: 4
},
}
What I need is instead of defining var fields = ['A', 'B']; in view have to push the data from the back end to the fields array dynamically. Because the backend may send different companies in different times. So can't hard coded them.
Use the following approach:
...
callback: function(opts, success, response) {
if (success) {
responseText.data.forEach(function(o){
cha.series.add({
type: 'line',
axis: 'left',
xField: 'DATE',
border: false,
flex: 1,
title: o.A,
yField: o.B,
markerConfig: {
radius: 4
}
});
});
}
}
...
json file:
[{
"key_as_string": "2017-05-09",
"doc_count": 1874
}, {
"key_as_string": "2017-05-10",
"doc_count": 2680
}, {
"key_as_string": "2017-05-11",
"doc_count": 2717
}, {
"key_as_string": "2017-05-12",
"doc_count": 2147
}, {
"key_as_string": "2017-05-13",
"doc_count": 984
}, {
"key_as_string": "2017-05-14",
"doc_count": 1302
}, {
"key_as_string": "2017-05-15",
"doc_count": 2217
}
I couldn't know how to use object data on the HighChart
when i use it
$.getJSON('/data/user_signedup.json', function(data) {
options.series[0].name = "NewUser"
options.series[0].data = data;
console.log("series", options.series);
var chart = new Highcharts.Chart(options);
});
then It dosen't work anything:
so I wonder how to use object data set
(key_as_string vlaue ,match x-value)
(doc_count vlaue ,match y-value)
I can draw only y.value by making only number array
$.getJSON('/data/user_signedup.json', function(data) {
options.series[0].name = "NewUser"
options.series[0].data =[];
data.forEach(function(item){
options.series[0].data.push(item.doc_count)
})
console.log("series", options.series);
var chart = new Highcharts.Chart(options);
});
chart option setting
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Daily New User'
},
subtitle: {
text: ' 2017-05-09 ~2017-06-08'
},
yAxis: {
title: {
text: 'Number of new Users'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x}: {point.y}명',
// maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.key_as_string) + ':<br/> ' +
// this.doc_count + ' visits'
},
plotOptions: {
series: {
allowPointSelect: true
}
},
series: [{},{},{}]
};
You can pass custom data by setting data array with json. for x-axis point, use name key and for y-axis point, use y key.
Try this:
$.getJSON('/data/user_signedup.json', function(data) {
options.series[0].name = "NewUser"
options.series[0].data =[];
data.forEach(function(item){
options.series[0].data.push({name:key_as_string,y:item.doc_count})
})
console.log("series", options.series);
var chart = new Highcharts.Chart(options);
});
and updated highchart configuration to this:
xAxis: {
type: 'category'
}
I fetch data from API by making ajax call then pass this data to the chart.
I am not able to render the chart. Can anyone suggest me what may be the issue?
This is my ajax call
You can see after ajax call i am trying to push to scope variable and trying to add to chart.
for reference please find in this link http://jsfiddle.net/w3vpc35o/41/
angular.module('amChartsDirectiveExample', ['amChartsDirective']).controller('amChartsController', function ($scope) {
$scope.call = function(){
$http({
method: "get",
global: false,
async: true,
url: "server/test.php
}).
success(function(data) {
/*Assume data like like [{
year: 2005,
income: 23.5,
expenses: 18.1
}, {
year: 2006,
income: 26.2,
expenses: 22.8
}, {
year: 2007,
income: 30.1,
expenses: 23.9
}, {
year: 2008,
income: 29.5,
expenses: 25.1
}, {
year: 2009,
income: 24.6,
expenses: 25
}]*/
$scope.rest = data
$scope.amChartOptions = {
data:$scope.res ,
type: "serial",
theme: 'black',
categoryField: "year",
rotate: true,
pathToImages: 'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/images/',
legend: {
enabled: true
},
chartScrollbar: {
enabled: true,
},
categoryAxis: {
gridPosition: "start",
parseDates: false
},
valueAxes: [{
position: "top",
title: "Million USD"
}],
graphs: [{
type: "column",
title: "Income",
valueField: "income",
fillAlphas: 1,
}]
}
});
}
$scope.call();
});
You didn't mentioned if you use some angular wrapper for amCharts or not, but if not, maybe you called var chart = AmCharts.makeChart(...) before the ajax call completed and you forgot to call chart.validateData(); after?
Will greatly help if you will post here some full code related to this issue
EDIT
It's seems that you use GrantMStevens/amCharts-Angular.
Use the technique mentioned in the documentation: 'Promise based chart rendering' to resolve the data in async: http://jsfiddle.net/w3vpc35o/83/
In general, what you need to do is to create the ChartOptions like this:
this.amChartOptions = $timeout(function(){
return {
data: this.dataFromPromise(),
type: "serial",
...
}.bind(this), 1000)
and fetch the data in async using something like this:
this.dataFromPromise = function(){
var deferred = $q.defer();
$http({
method : "GET",
url : "/server/endpoint"
}).then(function mySucces(response) {
deferred.resolve(response);
});
return deferred.promise;
};
I want to put a legend, but I don´t know why it doesn´t appear. Also, I want to put the database in the fragments of my pie charts.
myapp.controller('myctrl', function ($scope) {
var data = [
['APP Android', 45.0],
['APP Ios', 26.8],
]
$scope.highchartsNG = {
options: {
chart: { type: 'pie'}
},
legend: {
enabled: true
},
series: [ {
name: 'Avisos',
innerSize: '50%'
},
{
name: 'Plataforma',
size: '80%',
innerSize: '65%',
showInLegend: false,
data: data
}],
loading: false
}
});
This example is public in http://jsfiddle.net/Cp73s/2038/
Check this out
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function($scope) {
var data = [
['APP Android', 45.0],
['APP Ios', 26.8],
['Widget Web', 12.8],
['MTC BAckoffice', 8.5],
['Correo electrónico', 6.2],
['Facebook', 6.2],
['Twitter', 6.2],
['Teléfono', 6.2],
['Presencial', 6.2],
]
$scope.highchartsNG = {
options: {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
dataLabels: {
distance: -25 //adjust this value to change label distance
}
}
},
},
title: {
text: '550<br>AVISOS',
align: 'center',
verticalAlign: 'middle'
},
legend: {
enabled: true
},
series: [{
name: 'Avisos',
innerSize: '50%'
}, {
name: 'Plataforma',
size: '80%',
innerSize: '65%',
showInLegend: true,
data: data
}],
loading: false
}
});
Fiddles
fiddle with updated label
Fiddle with updated legend display