We Keep Coding

How to Create synchronized High chart with different no of series per chart

I want to create a synchronized High chart with two charts and the 1st chart will have one series and 2nd chart will have 2 series.
this link contains the sync chart with two series each chart, but when I reduced data to my required condition crosshair did not work properly.
data for chart.
var activity = {
"xData": [1, 1056, 2161, 3215, 4267],
"datasets": [{
"name": "Chart 1 series 1",
"data": [0, 10, 20, 30, 20],
"unit": "ms",
"type": "line",
"valueDecimals": 1
}, {
"name": "Chart 1 series 2",
"data": [23, 84, 22, 5, 75],
"unit": "ms",
"type": "line",
"valueDecimals": 1
}, {
"name": "Chart 2 series 1",
"data": [0, 10, 20, 30, 20],
"unit": "%",
"type": "line",
"valueDecimals": 1
}]

You are going from 2 series on each chart to 2 series on the 1st chart and 1 series on the 2nd chart, so you will be getting an error while trying your updated activity data. You need to add a conditional check like this (comments in uppercase):
/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/
$(function () {
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove', function (e) {
var chart,
points,
i;
for (i = 0; i < Highcharts.charts.length; i++) {
chart = Highcharts.charts[i];
e = chart.pointer.normalize(e); // Find coordinates within the chart
// CHECK IF WE HAVE 2:
if ( chart.series.length === 2 ){
points = [chart.series[0].searchPoint(e, true), chart.series[1].searchPoint(e, true)]; // Get the hovered point
if (points[0] && points[1]) {
points[0].onMouseOver(); // Show the hover marker
points[1].onMouseOver(); // Show the hover marker
chart.tooltip.refresh(points); // Show the tooltip
chart.xAxis[0].drawCrosshair(e, points[0]); // Show the crosshair
}
// CHECK IF WE HAVE 1 CHART:
} else {
points = [chart.series[0].searchPoint(e, true)]; // Get the hovered poi
if (points[0]) {
points[0].onMouseOver(); // Show the hover marker
chart.tooltip.refresh(points); // Show the tooltip
chart.xAxis[0].drawCrosshair(e, points[0]); // Show the crosshair
}
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function () {};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max);
}
}
});
}
// Get the data. The contents of the data file can be viewed at
// https://github.com/highslide-software/highcharts.com/blob/master/samples/data/activity.json
//$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) {
var activity = {
"xData": [1, 1056, 2161, 3215, 4267],
"datasets": [{
"name": "Chart 1 series 1",
"data": [0, 10, 20, 30, 20],
"unit": "ms",
"type": "line",
"valueDecimals": 1
}, {
"name": "Chart 1 series 2",
"data": [23, 84, 22, 5, 75],
"unit": "ms",
"type": "line",
"valueDecimals": 1
}, {
"name": "Chart 2 series 1",
"data": [0, 10, 20, 30, 20],
"unit": "%",
"type": "line",
"valueDecimals": 1
}]
},
lastChart;
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, i) {
return [activity.xData[i], val];
});
if(i%2 == 0) { //first series of chart
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20,
// zoomType: 'x'
// pinchType: null // Disable zoom on touch devices
},
title: {
text: dataset.name.slice(0,7),
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
labels: {
format: '{value} km'
}
},
yAxis: {
title: {
text: null
}
},
tooltip: {
shared: true,
headerFormat: '',
valueDecimals: dataset.valueDecimals
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
visible:true
}
}]
});
} else { //second series of chart
lastChart = Highcharts.charts[Highcharts.charts.length-1];
lastChart.addSeries({
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
});
}
});
//});
});
Working JSFiddle: http://jsfiddle.net/kostasx/kfwtv1zj/

How to click map Bubble in Amcharts and call server request

I want to click the bubble in Am chart and call the server through ajax call and manipulate some data in a view is it possible ?
I am loading my map through ajax call . below is the code . I tried it using eventlistener clickable object , but wont get success.
function StatisticsMap(item, categoryID, statusID) {
languageShortName = $("#languageShortName").val();
$("[relf-map-tab]").removeClass("active");
var url = "/" + languageShortName + "/saudiprojects/statistics/map-data?categoryID=" + categoryID + "&statusID=" + statusID;
dataPoints = [];
$.ajax({ type: "GET", url: url }).done(function (data) {
$(data).each(function (index, value) {
dataPoints.push({
longitude: value.Longitude,
latitude: value.Latitude,
type: 'circle',
color: '#E98C3E',
label: value.CountNo,
labelPosition: "middle",
labelColor: "#ffffff",
labelFontSize: 20,
fixedSize: false,
labelBackgroundAlpha: 1,
labelBackgroundColor: "#E98C3E",
height: 50 + (value.CountNo * 10),
width: 50 + (value.CountNo * 10),
centered: true,
title: value.Status
});
});
var map = AmCharts.makeChart("mapdiv", {
"type": "map",
"theme": "light",
"dataProvider": {
"map": "saudiArabiaHigh",
"images": dataPoints
}
});
$(item).addClass("active");
});
}
Here is my HTML
<div class="graph">
<div id="mapdiv" style="width:100%;height:100%;"></div>
</div>

You can use the clickMapObject listener on the map to capture what bubble was clicked. The image itself is stored in the mapObject property of the event:
"listeners": [{
"event": "clickMapObject",
"method": function(ev) {
alert('clicked on ' + ev.mapObject.title)
}
}]
Note that in order to make the image clickable, you have to set selectable to true in imagesSettings:
"imagesSettings": {
"selectable": true
}
Demo below:
var dataPoints = [{
longitude: 45,
latitude: 25,
type: 'circle',
color: '#E98C3E',
label: "1",
labelPosition: "middle",
labelColor: "#ffffff",
labelFontSize: 20,
fixedSize: false,
labelBackgroundAlpha: 1,
labelBackgroundColor: "#E98C3E",
height: 60,
width: 60,
centered: true,
title: "Example"
}];
var map = AmCharts.makeChart("mapdiv", {
"type": "map",
"theme": "light",
"dataProvider": {
"map": "saudiArabiaHigh",
"images": dataPoints
},
"imagesSettings": {
"selectable": true
},
"listeners": [{
"event": "clickMapObject",
"method": function(ev) {
alert('clicked on ' + ev.mapObject.title)
}
}]
});
#mapdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/saudiArabiaHigh.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<div id="mapdiv"></div>

Highcharts doesn't plot series with lots of data

I trying to get highcharts to draw a linked graph. It works when I have not so much data in my data set. Now I have tried to put a dataset with ~30.000 points. I see the mouse over with the points, but the line is not plot?
I have read about turboThreshold: and have set it to turboThreshold: 40000 but it does still not plot the line??
Any ideas what I do wrong?
/Jesper
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.chart {
min-width: 200px;
max-width: 1250px;
height: 350px;
margin: 0 auto;
}
</style>
<!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
</style>
<title>Highcharts Demo</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<script type='text/javascript'>//<![CDATA[
/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function (event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
}
}
});
}
}
// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
$.getJSON('http://vels.dk/beer/getdata.php?name=velsdk002', function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
title: {
//text: dataset.name,
text: null,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
type: 'datetime',
crosshair: true,
events: {
setExtremes: syncExtremes
}
},
yAxis: {
title: {
text: dataset.name
},
opposite: true, //flytter skala til højre
labels: {
align: 'left',
x: 0,
y: -2
},
plotLines: [{
value: dataset.min,
color: 'grey',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Estimated Final Gravity - XX SG',
x: 30
}
}, {
value: dataset.max,
color: 'grey',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Estimated Starting Gravity - XX SG',
x: 30
}
}]
},
plotOptions: {
series: {
turboThreshold: 40000,
marker: {
enabled: false
}
}
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
});
//]]>
</script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "None"
}], "*")
}
</script>
</body>
</html>

How to refresh kendo Graph using SignalR notfication

I want to refresh kendo graph once I am getting notification from SignalR.
Here is my code
function CreateChart()
{
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Import Log"
},
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= dataItem.CategoryField #: \n #= dataItem.Percentage#%"
}
},
dataSource: [{ "CategoryField": "Success", "Percentage": 0 }, { "CategoryField": "Error", "Percentage": 0 }, { "CategoryField": "Info", "Percentage": 0 }, { "CategoryField": "Total", "Percentage": 100}],
series: [{
type: "donut",
field: "Percentage",
categoryField: "CategoryField"
}],
seriesColors: ["Green", "red", "#FFD54C", "#EEEEEE"]
});
}
updateProgress = function (successPct, errPct, infoPct)
{
var selectedChart = $("#chart").data("kendoChart");
var ds = selectedChart.dataSource;
var progress = ds.at(0);
var error = ds.at(1);
var info = ds.at(2);
var total = ds.at(3);
progress.set("Percentage", data.SuccessPercentage);
error.set("Percentage", data.ErrorPercentage);
info.set("Percentage", data.InfoPercentage);
total.set("Percentage", 100 - data.SuccessPercentage - data.ErrorPercentage - data.InfoPercentage);
selectedChart.refresh();
}
$(document).ready(function () {
CreateChart();
var importNotifier = $.connection.runImport;
importNotifier.client.sendMessage = function (data) {
$("#chart").append(data.SuccessPercentage + " " + data.ErrorPercentage + " " + data.InfoPercentage)
updateProgress(data.SuccessPercentage, data.ErrorPercentage, data.InfoPercentage);
};
$.connection.hub.start().done(function () {
importNotifier.server.import();
});
});
Here I created method Update Progress to update chart. But chart is not refreshed until entire server side processing is completed. Once All server side processing is completed then only chart update works. I want to update my chart only when I get any notification from SignalR.

HighMap displaying issue with customized json file

I am trying to load json file with three variables into HighMap.
In my revised JSON I included three columns:
1. Code 2. Value 3. Median Wage
I was able to load JSON file through main.js, but with Median Wage added, the map lost its gradient and I was not able to start a new line for Median Wage in the hover-over displaying box.
The demo from HighCharts looks like this:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/color-axis/
Any input will be much appreciated.
Thank you!
HTM File
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highmaps Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
</head>
<body>
<script src="js/main.js"></script>
<script src="js/highmaps.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<script src="js/modules/data.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>
Main js
function create_chart() {
$.getJSON('data.json', function (data) {
// Make codes uppercase to match the map data
$.each(data, function () {
this.Code = this.Code.toUpperCase();
});
console.log(data);
// Instanciate the map
$('#container').highcharts('Map', {
chart : {
borderWidth : 1
},
title : {
text : 'US Density vs Median Wage'
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#eefff1',
maxColor: '#000022',
stops: [[0, '#effff5'],
[0.67, '#61ae0e'],
[1, '#000022']]
},
series : [{
animation: {
duration: 1000
},
data : data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: ['postal-code','Code'],
dataLabels: {
enabled: true,
color: 'white',
format: '{point.Code}'
},
name: 'US Density vs Median Wage',
tooltip: {
pointFormat: '{point.Code}: {point.Value}% \n Median Wage: ${point.MedianW}'
}
}]
});
});
}
$(document).ready(create_chart);
json file
[
{
"Code":"AL",
"Value":11.8,
"MedianW":40120
},
{
"Code":"AK",
"Value":24.5,
"MedianW":53804
},
{
"Code":"AZ",
"Value":6,
"MedianW":42107
},
{
"Code":"AR",
"Value":4.1,
"MedianW":36505
},
{
"Code":"CA",
"Value":17.4,
"MedianW":48415
},
{
"Code":"CO",
"Value":9.2,
"MedianW":49549
},
{
"Code":"CT",
"Value":14.3,
"MedianW":58337
},
{
"Code":"DE",
"Value":11,
"MedianW":48284
},
{
"Code":"DC",
"Value":10.9,
"MedianW":50186
},
{
"Code":"FL",
"Value":6.9,
"MedianW":41915
},
{
"Code":"GA",
"Value":6.3,
"MedianW":41214
},
{
"Code":"HI",
"Value":23.6,
"MedianW":49919
},
{
"Code":"ID",
"Value":5.8,
"MedianW":41785
},
{
"Code":"IL",
"Value":16.3,
"MedianW":47485
},
{
"Code":"IN",
"Value":10.2,
"MedianW":42089
},
{
"Code":"IA",
"Value":12,
"MedianW":42207
},
{
"Code":"KS",
"Value":8.4,
"MedianW":42577
},
{
"Code":"KY",
"Value":13,
"MedianW":40020
},
{
"Code":"LA",
"Value":5.5,
"MedianW":37967
},
{
"Code":"ME",
"Value":13.1,
"MedianW":41488
},
{
"Code":"MD",
"Value":13.1,
"MedianW":58269
},
{
"Code":"MA",
"Value":14.6,
"MedianW":55602
},
{
"Code":"MI",
"Value":16.8,
"MedianW":45029
},
{
"Code":"MN",
"Value":15,
"MedianW":48097
},
{
"Code":"MS",
"Value":4.2,
"MedianW":36240
},
{
"Code":"MO",
"Value":10.4,
"MedianW":41092
},
{
"Code":"MT",
"Value":14.8,
"MedianW":42301
},
{
"Code":"NE",
"Value":9,
"MedianW":41861
},
{
"Code":"NV",
"Value":16.1,
"MedianW":44924
},
{
"Code":"NH",
"Value":10.7,
"MedianW":52588
},
{
"Code":"NJ",
"Value":16.6,
"MedianW":61146
},
{
"Code":"NM",
"Value":7.4,
"MedianW":38349
},
{
"Code":"NY",
"Value":25.8,
"MedianW":47790
},
{
"Code":"NC",
"Value":4.7,
"MedianW":40710
},
{
"Code":"ND",
"Value":8.5,
"MedianW":41557
},
{
"Code":"OH",
"Value":14.1,
"MedianW":42814
},
{
"Code":"OK",
"Value":9.5,
"MedianW":40665
},
{
"Code":"OR",
"Value":14.9,
"MedianW":43160
},
{
"Code":"PA",
"Value":13.7,
"MedianW":47439
},
{
"Code":"RI",
"Value":17.8,
"MedianW":46896
},
{
"Code":"SC",
"Value":4.6,
"MedianW":39238
},
{
"Code":"SD",
"Value":5.8,
"MedianW":38071
},
{
"Code":"TN",
"Value":7.4,
"MedianW":39891
},
{
"Code":"TX",
"Value":6,
"MedianW":41225
},
{
"Code":"UT",
"Value":5.4,
"MedianW":50976
},
{
"Code":"VT",
"Value":13.2,
"MedianW":46019
},
{
"Code":"VA",
"Value":6.4,
"MedianW":53328
},
{
"Code":"WA",
"Value":19.7,
"MedianW":52724
},
{
"Code":"WV",
"Value":13.6,
"MedianW":41499
},
{
"Code":"WI",
"Value":13.1,
"MedianW":43661
},
{
"Code":"WY",
"Value":6.4,
"MedianW":45336
}
]

The problem is that you use Code and Value parameters instead of lowercase. So if you replace it, and add informaiton about median to pointFormat, when all will work.
Data:
{
"code": "AL",
"value": 11.8,
"MedianW": 40120
}
Tooltip: pointFormat: '{point.code}: {point.value}/km² : MedianW: {point.MedianW}'
Example: http://jsfiddle.net/9NMbm/