How to click map Bubble in Amcharts and call server request - javascript
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>
Related
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/
amcharts' stockChart mouse move listener
I'm trying to add a listener to amCharts' stockChart but can't find where. According to the docs of chartCursor you can set changed event on chartCursor however chartCursor does not exist on stockChart, only regular charts according to the docs of the StockChart. As far as I can see the only semi-relevant settings is chartCursorSettings but it does not allow setting any listeners. How can I catch mouse move/changed event over amCharts' amStockChart ?
The changed event can be caught at the panel level: var chart = AmCharts.makeChart("chartdiv", { // ... "panels": [{ // ... "listeners": [{ "event": "changed", "method": function(e) { console.log('changed event fired') } }], }], // ... }); Demo below: var chart = AmCharts.makeChart("chartdiv", { "type": "stock", "theme": "light", "categoryAxesSettings": { "minPeriod": "mm" }, "dataSets": [{ "fieldMappings": [{ "fromField": "value", "toField": "value" }], "dataProvider": generateChartData(), "categoryField": "date" }], "panels": [{ "stockGraphs": [{ "valueField": "value", "type": "smoothedLine" }], "listeners": [{ "event": "changed", "method": function(e) { console.log('changed event fired') } }], }], "chartCursorSettings": { "valueBalloonsEnabled": true } }); function generateChartData() { var chartData = []; var firstDate = new Date( 2012, 0, 1 ); firstDate.setDate( firstDate.getDate() - 1000 ); firstDate.setHours( 0, 0, 0, 0 ); for ( var i = 0; i < 1000; i++ ) { var newDate = new Date( firstDate ); newDate.setHours( 0, i, 0, 0 ); var a = Math.round( Math.random() * ( 40 + i ) ) + 100 + i; chartData.push( { date: newDate, value: a } ); } return chartData; } #chartdiv { width: 100%; height: 300px; } <script src="//www.amcharts.com/lib/3/amcharts.js"></script> <script src="//www.amcharts.com/lib/3/serial.js"></script> <script src="//www.amcharts.com/lib/3/themes/light.js"></script> <script src="//www.amcharts.com/lib/3/amstock.js"></script> <div id="chartdiv"></div>
i cant link local json file to the webpage
i am doing a school proget where i have to link a json data local file to a http webpage to get the data but i can't get the results. the code below is the json local code which i want to put in the webpage instead of this code $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) ?({ "xData": [0.001567,0.011765,0.022194,0.032316,0.04266,0.063668,0.074477,0.085323,0.09576,0.106078,0.116096,0.137524,0.148342,0.159059,0.170005,0.180716,0.191407,0.212538,0.222819,0.233929,0.244239,0.255301,0.266081,0.287527,0.298115,0.309392,0.320217,0.330928,0.341401,0.361717,0.372173,0.382337,0.39294,0.403072,0.413454,0.434618,0.444845,0.455745,0.465785,0.475987,0.486064,0.507086,0.517517,0.527961,0.538242,0.548414,0.558444,0.578941,0.589212,0.599472,0.60977,0.620178,0.630189,0.650782,0.661001,0.671137,0.681175,0.691235,0.702012,0.722644,0.733166,0.743824,0.754059,0.764109,0.774519,0.795597,0.805721,0.81592,0.826139,0.836369,0.846826,0.86771,0.87803,0.888342,0.898695,0.908723,0.91922,0.939802,0.950378,0.960776,0.971377,0.981843,0.992312,1.013125,1.023302,1.033488,1.043822,1.054203,1.065019,1.086078,1.09635,1.106421,1.117028,1.127541,1.138599,1.159588,1.170167,1.180741,1.190794,1.201112,1.211355,1.233278,1.243477,1.254957,1.265227,1.276378,1.285656,1.297311,1.308367,1.318715,1.329589,1.340834,1.352388,1.375063,1.385369,1.396291,1.408156,1.418989,1.429535,1.451141,1.462205,1.473011,1.483844,1.494311,1.514761,1.525336,1.535858,1.546476,1.557325,1.567512,1.590091,1.600925,1.612303,1.622558,1.633071,1.643555,1.66484,1.675722,1.685986,1.696733,1.706895,1.719102,1.741295,1.752144,1.762688,1.773713,1.784052,1.795705,1.817305,1.827465,1.838408,1.849369,1.860023,1.871438,1.89257,1.90323,1.914398,1.924634,1.934642,1.945212,1.966275,1.976294,1.986422,1.996652,2.008005,2.018309,2.041139,2.051221,2.0613,2.072507,2.08342,2.094075,2.114574,2.125286,2.135765,2.146845,2.157966,2.169391,2.190921,2.200899,2.212709,2.222671,2.232908,2.244001,2.264898,2.275703,2.286885,2.298115,2.310186,2.32059,2.344695,2.354843,2.366387,2.379001,2.390328,2.402215,2.423134,2.433156,2.444912,2.457061,2.468253,2.478978,2.499832,2.513223,2.52561,2.538429,2.548659,2.560809,2.581308,2.592816,2.603963,2.615992,2.626242,2.638223,2.660346,2.671583,2.681938,2.69265,2.70588,2.716296,2.740081,2.75085,2.761319,2.772027,2.782659,2.793531,2.816194,2.828031,2.839243,2.851443,2.863884,2.874359,2.895246,2.906506,2.91761,2.92786,2.938937,2.950218,2.973357,2.98366,2.994639,3.005213,3.01666,3.02761,3.050025,3.061713,3.071828,3.082787,3.093422,3.105289,3.127231,3.138982,3.149755,3.160217,3.171299,3.191571,3.202226,3.213225,3.223987,3.234092,3.244644,3.265939,3.276411,3.286489,3.297156,3.307909,3.319018,3.34064,3.351107,3.361683,3.373136,3.384768,3.395457,3.417722,3.429096,3.439122,3.449679,3.459868,3.469997,3.492679,3.503647,3.514941,3.525858,3.538746,3.550422,3.572255,3.58452,3.595367,3.605736,3.617401,3.628324,3.652523,3.663679,3.67378,3.684605,3.695595,3.705843,3.728706,3.739169,3.750205,3.761258,3.771771,3.781911,3.804724,3.81631,3.826313,3.837847,3.85049,3.860999,3.88262,3.892937,3.903053,3.913656,3.924698,3.935126,3.956362,3.966543,3.976899,3.98752,3.997644,4.008721,4.029852,4.040633,4.051006,4.06126,4.071761,4.083526,4.10749,4.117855,4.128661,4.13934,4.151117,4.1624,4.184736,4.194826,4.205098,4.215261,4.225325,4.236367,4.262012,4.273794,4.285743,4.297226,4.308086,4.318245,4.340246,4.351486,4.363196,4.374465,4.387109,4.398635,4.421101,4.432135,4.444666,4.456226,4.467413,4.477804,4.498505,4.510413,4.522595,4.534044,4.545944,4.558048,4.580379,4.59312,4.605616,4.618065,4.631266,4.644086,4.667943,4.67948,4.691266,4.703019,4.715923,4.725932,4.752312,4.765224,4.777128,4.787361,4.800435,4.823353,4.836044,4.848602,4.860302,4.871112,4.882779,4.904695,4.914823,4.927074,4.938111,4.949586,4.960761,4.982911,4.9942,5.004246,5.016296,5.027215,5.038043,5.058885,5.070303,5.080649,5.093865,5.104424,5.114903,5.134965,5.146346,5.15634,5.168547,5.179066,5.191167,5.214242,5.224914,5.237573,5.249537,5.261586,5.272517,5.296154,5.306348,5.316773,5.327153,5.339961,5.350638,5.376502,5.389277,5.402142,5.412197,5.42399,5.434873,5.458466,5.470907,5.482679,5.493339,5.50574,5.516349,5.538897,5.549552,5.56083,5.571879,5.583764,5.59509,5.619028,5.629925,5.640716,5.650957,5.661787,5.671957,5.693974,5.704919,5.717491,5.731152,5.744728,5.755687,5.778668,5.791951,5.80409,5.815697,5.828482,5.840501,5.864145,5.875704,5.887893,5.900147,5.912517,5.924894,5.948897,5.959155,5.970262,5.981632,5.992996,6.00356,6.027256,6.038776,6.050959,6.061351,6.071864,6.082436,6.104054,6.115602,6.127623,6.139058,6.150639,6.161323,6.183013,6.194359,6.206269,6.218033,6.2281,6.240494,6.262584,6.275326,6.287166,6.298953,6.310644,6.321583,6.345676,6.356738,6.366782,6.377931,6.388519,6.397159], "datasets": [{ "name": "Speed", "data": [10,20,30,40,50,60,70,80,90,100], "unit": "km/h", "type": "line", "valueDecimals": 1 }, { "name": "Elevation", "data": [10,20,30,40,50,60,70,80,90,100], "unit": "m", "type": "area", "valueDecimals": 0 }, { "name": "Consumo Carburante", "data": [10,20,30,40,50,60,70,80,90,100], "unit": "l", "type": "area", "valueDecimals": 0 }] }); <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <style type="text/css"> .chart { min-width: 320px; max-width: 800px; height: 220px; 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> <script type="text/javascript"> /* 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, point, i; for (i = 0; i < Highcharts.charts.length; i = i + 1) { chart = Highcharts.charts[i]; e = chart.pointer.normalize(e); // Find coordinates within the chart point = chart.series[0].searchPoint(e, true); // Get the hovered point if (point) { point.onMouseOver(); // Show the hover marker chart.tooltip.refresh(point); // Show the tooltip chart.xAxis[0].drawCrosshair(e, point); // Show the crosshair } } }); /** * Override the reset function, we don't need to hide the tooltips and crosshairs. */ Highcharts.Pointer.prototype.reset = function () { return undefined; }; /** * 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 // here i want to add my own json file which is local but i cant add it.. //********************** Problem ************************************** $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', 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, zoomType: 'x' }, title: { text: dataset.name, 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: { positioner: function () { return { x: this.chart.chartWidth - this.label.width, // right aligned y: -1 // align to title }; }, borderWidth: 0, backgroundColor: 'none', pointFormat: '{point.y}', headerFormat: '', shadow: false, style: { fontSize: '18px' }, valueDecimals: dataset.valueDecimals }, series: [{ data: dataset.data, name: dataset.name, type: dataset.type, color: Highcharts.getOptions().colors[i], fillOpacity: 0.3, tooltip: { valueSuffix: ' ' + dataset.unit } }] }); }); }); }); </script> <body> <script src="https://code.highcharts.com/highcharts.js"></script> <div id="container"></div> <!-- ******************************************************************************************** --> </body> </html>
save the below structure into local json file: { "xData": [0.001567,0.011765,0.022194,0.032316,0.04266,0.063668,0.074477,0.085323,0.09576,0.106078,0.116096,0.137524,0.148342,0.159059,0.170005,0.180716,0.191407,0.212538,0.222819,0.233929,0.244239,0.255301,0.266081,0.287527,0.298115,0.309392,0.320217,0.330928,0.341401,0.361717,0.372173,0.382337,0.39294,0.403072,0.413454,0.434618,0.444845,0.455745,0.465785,0.475987,0.486064,0.507086,0.517517,0.527961,0.538242,0.548414,0.558444,0.578941,0.589212,0.599472,0.60977,0.620178,0.630189,0.650782,0.661001,0.671137,0.681175,0.691235,0.702012,0.722644,0.733166,0.743824,0.754059,0.764109,0.774519,0.795597,0.805721,0.81592,0.826139,0.836369,0.846826,0.86771,0.87803,0.888342,0.898695,0.908723,0.91922,0.939802,0.950378,0.960776,0.971377,0.981843,0.992312,1.013125,1.023302,1.033488,1.043822,1.054203,1.065019,1.086078,1.09635,1.106421,1.117028,1.127541,1.138599,1.159588,1.170167,1.180741,1.190794,1.201112,1.211355,1.233278,1.243477,1.254957,1.265227,1.276378,1.285656,1.297311,1.308367,1.318715,1.329589,1.340834,1.352388,1.375063,1.385369,1.396291,1.408156,1.418989,1.429535,1.451141,1.462205,1.473011,1.483844,1.494311,1.514761,1.525336,1.535858,1.546476,1.557325,1.567512,1.590091,1.600925,1.612303,1.622558,1.633071,1.643555,1.66484,1.675722,1.685986,1.696733,1.706895,1.719102,1.741295,1.752144,1.762688,1.773713,1.784052,1.795705,1.817305,1.827465,1.838408,1.849369,1.860023,1.871438,1.89257,1.90323,1.914398,1.924634,1.934642,1.945212,1.966275,1.976294,1.986422,1.996652,2.008005,2.018309,2.041139,2.051221,2.0613,2.072507,2.08342,2.094075,2.114574,2.125286,2.135765,2.146845,2.157966,2.169391,2.190921,2.200899,2.212709,2.222671,2.232908,2.244001,2.264898,2.275703,2.286885,2.298115,2.310186,2.32059,2.344695,2.354843,2.366387,2.379001,2.390328,2.402215,2.423134,2.433156,2.444912,2.457061,2.468253,2.478978,2.499832,2.513223,2.52561,2.538429,2.548659,2.560809,2.581308,2.592816,2.603963,2.615992,2.626242,2.638223,2.660346,2.671583,2.681938,2.69265,2.70588,2.716296,2.740081,2.75085,2.761319,2.772027,2.782659,2.793531,2.816194,2.828031,2.839243,2.851443,2.863884,2.874359,2.895246,2.906506,2.91761,2.92786,2.938937,2.950218,2.973357,2.98366,2.994639,3.005213,3.01666,3.02761,3.050025,3.061713,3.071828,3.082787,3.093422,3.105289,3.127231,3.138982,3.149755,3.160217,3.171299,3.191571,3.202226,3.213225,3.223987,3.234092,3.244644,3.265939,3.276411,3.286489,3.297156,3.307909,3.319018,3.34064,3.351107,3.361683,3.373136,3.384768,3.395457,3.417722,3.429096,3.439122,3.449679,3.459868,3.469997,3.492679,3.503647,3.514941,3.525858,3.538746,3.550422,3.572255,3.58452,3.595367,3.605736,3.617401,3.628324,3.652523,3.663679,3.67378,3.684605,3.695595,3.705843,3.728706,3.739169,3.750205,3.761258,3.771771,3.781911,3.804724,3.81631,3.826313,3.837847,3.85049,3.860999,3.88262,3.892937,3.903053,3.913656,3.924698,3.935126,3.956362,3.966543,3.976899,3.98752,3.997644,4.008721,4.029852,4.040633,4.051006,4.06126,4.071761,4.083526,4.10749,4.117855,4.128661,4.13934,4.151117,4.1624,4.184736,4.194826,4.205098,4.215261,4.225325,4.236367,4.262012,4.273794,4.285743,4.297226,4.308086,4.318245,4.340246,4.351486,4.363196,4.374465,4.387109,4.398635,4.421101,4.432135,4.444666,4.456226,4.467413,4.477804,4.498505,4.510413,4.522595,4.534044,4.545944,4.558048,4.580379,4.59312,4.605616,4.618065,4.631266,4.644086,4.667943,4.67948,4.691266,4.703019,4.715923,4.725932,4.752312,4.765224,4.777128,4.787361,4.800435,4.823353,4.836044,4.848602,4.860302,4.871112,4.882779,4.904695,4.914823,4.927074,4.938111,4.949586,4.960761,4.982911,4.9942,5.004246,5.016296,5.027215,5.038043,5.058885,5.070303,5.080649,5.093865,5.104424,5.114903,5.134965,5.146346,5.15634,5.168547,5.179066,5.191167,5.214242,5.224914,5.237573,5.249537,5.261586,5.272517,5.296154,5.306348,5.316773,5.327153,5.339961,5.350638,5.376502,5.389277,5.402142,5.412197,5.42399,5.434873,5.458466,5.470907,5.482679,5.493339,5.50574,5.516349,5.538897,5.549552,5.56083,5.571879,5.583764,5.59509,5.619028,5.629925,5.640716,5.650957,5.661787,5.671957,5.693974,5.704919,5.717491,5.731152,5.744728,5.755687,5.778668,5.791951,5.80409,5.815697,5.828482,5.840501,5.864145,5.875704,5.887893,5.900147,5.912517,5.924894,5.948897,5.959155,5.970262,5.981632,5.992996,6.00356,6.027256,6.038776,6.050959,6.061351,6.071864,6.082436,6.104054,6.115602,6.127623,6.139058,6.150639,6.161323,6.183013,6.194359,6.206269,6.218033,6.2281,6.240494,6.262584,6.275326,6.287166,6.298953,6.310644,6.321583,6.345676,6.356738,6.366782,6.377931,6.388519,6.397159], "datasets": [{ "name": "Speed", "data": [10,20,30,40,50,60,70,80,90,100], "unit": "km/h", "type": "line", "valueDecimals": 1 }, { "name": "Elevation", "data": [10,20,30,40,50,60,70,80,90,100], "unit": "m", "type": "area", "valueDecimals": 0 }, { "name": "Consumo Carburante", "data": [10,20,30,40,50,60,70,80,90,100], "unit": "l", "type": "area", "valueDecimals": 0 }] } Anyway, the most preferable way is to use getJson method: $.getJSON( "test.json", function( data ) { var items = []; $.each( data, function( key, val ) { ... process data }); ... });
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.
Flot Chart : Adding Checkbox's to Toggle Chart Series
After setting up my first chart I'm looking to add check-boxs to toggle which series are selected. Flot provides an example here : http://www.flotcharts.org/flot/examples/series-toggle/ Now when i tried to replicate this I'm getting error: 'datasets' is undefined could anyone explain why?? Also bonus points if anyone can tell my why the legend still display's inside the graph? Chart Looks like : View Code : <div class="legend-container"></div> <div class="graph-container"> <div id="placeholder" class="graph-placeholder"></div> </div> <p id="choices"></p> Chart Code: $(document).ready(function fetchData() { function onDataReceived(series) { console.log('recieved data now parsing the data'); var currentdata = $.parseJSON(series); //Testing console.log(currentdata); console.log("series sub-arrays"); console.log(currentdata[0]); console.log(currentdata[1]); console.log(currentdata[2]); var datasets = [ { label: "Current_Out", data: currentdata[0], yaxis: 2, color: '#00C932', points: { fillColor: "#00C932", show: true }, lines: { show: true } }, { label: "Temperature", data: currentdata[1], yaxis: 1, color: "#0062FF", points: { fillColor: "#0062FF", show: true }, lines: {show:true } }] var options = { legend: { show: true, placement: 'outsideGrid', container: $("#legend-container") }, lines: { show: true, fill: false, }, axisLabels: { show: true }, xaxes: [{ mode: "time", timeformat: "%H:%M:%S", axisLabel:'Date', axisLabelUseCanvas: false, axisLabelFontSizePixels: 12, axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif', axisLabelPadding: 5 }], yaxes: [{ position: "left", axisLabel:'Celcius', axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif', axisLabelPadding: 5 }, { position: "right", axisLabel: 'mA' }], grid: { hoverable: true, clickable: true, borderWidth: 1 }, legend: { labelBoxBorderColor: "none", position: "right" }, points: { show: true, fillColor: "#000000" } }; $.plot($("#placeholder"), datasets, options); } $.ajax({ url: '/Ajax/GetGraphData', type: "GET", dataType: "json", success: onDataReceived, failure: function() { console.log('Fail!'); } }); Jquery for Checkbox's // insert checkboxes var choiceContainer = $("#choices"); $.each(datasets, function (key, val) { choiceContainer.append('<br/><input type="checkbox" name="' + key + '" checked="checked" id="id' + key + '">' + '<label for="id' + key + '">' + val.label + '</label>'); }); choiceContainer.find("input").click(plotAccordingToChoices); function plotAccordingToChoices() { var data = []; choiceContainer.find("input:checked").each(function () { var key = $(this).attr("name"); if (key && datasets[key]) data.push(datasets[key]); }); if (data.length > 0) $.plot($("#placeholder"), data, { yaxis: { min: 0 }, xaxis: { tickDecimals: 0 } }); } plotAccordingToChoices();
Scoping issue. var datasets is local to the onDataReceived function. It is not accessible outside that function. Initing it to null in the $(document).ready( handler should make it accessible to everything in that scope. As for your second question, you need to show us the CSS attached to those divs. I'm guessing your graph-container is absoluting positioned. Also, in your options, you have two different configurations for legend. Delete the second one.