How to refresh kendo Graph using SignalR notfication - javascript
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.
Related
Vue.js Realtime Chart with Websocket or Socket.io
I use vue.js for my project. Also I use websocket for my datas. Every one second come datas. I need to use realtime chart on my project. But I dont find any chart to solve my problem. For example I use apexchart but it have not refresh datas in my chart when new datas come. my websocket data like: { "topic": "2", "message": "data" } my database data like this: { "id": "1", "deviceName": "refrigerator", "deviceType": "lineChart", "topic": "1", "message": "", }, { "id": "8", "deviceName": "refrigerator", "deviceType": "lineChart", "topic": "1", "message": "", }, I get my datas from database in this code. And I check my topic, is it same or not. if it is same, I put websocket message to json data to see at screen: let bufferMessage = []; bufferMessage = jsonFromDatabase; socket.on("message", (topic, message) => { bufferMessage.forEach(element => { if (element.topic == topic) { element.message = message.toString(); } }); }); My code is : <div id="chart"> <apexchart type="line" height="350" :options="chartOptions" :series="$store.state.bufferMessage[index].message"></apexchart> </div> <script> import Vue from "vue"; import ApexCharts from "apexcharts"; import VueApexCharts from "vue-apexcharts"; Vue.component("apexchart", VueApexCharts); export default { components: { apexchart: VueApexCharts, }, data() { return { series: [ { name: "Desktops", data: [], }, ], chartOptions: { chart: { height: 350, type: "line", zoom: { enabled: false, }, }, dataLabels: { enabled: false, }, stroke: { curve: "straight", }, title: { text: "Product Trends by Month", align: "left", }, grid: { row: { colors: ["#f3f3f3", "transparent"], opacity: 0.5, }, }, xaxis: { categories: [], }, }, } </script> but the way there is no any error in this code. I just want to convert this chart to realtime chart for my websocket datas.
Unless OP shows the part in the code of updating the data, I only can offer a reference of the official apexcharts documentation, about updating the data : import VueApexCharts from 'vue-apexcharts' export default { name: 'Vue Chart', data: function () { return { chartOptions: { chart: { id: 'vuechart-example', }, xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998], }, }, series: [{ name: 'Vue Chart', data: [30, 40, 45, 50, 49, 60, 70, 81] }] } }, methods: { updateChart() { const max = 90; const min = 20; const newData = this.series[0].data.map(() => { return Math.floor(Math.random() * (max - min + 1)) + min }) // In the same way, update the series option this.series = [{ data: newData }] } } } As you can see in the example above, by just changing the props, we trigger the update event of ApexCharts. (from the docs) Sandbox Example https://codesandbox.io/s/50z5wrmp6k
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>
Infragistics igDataChart dynamic binding
I have a igdatagrid column chart in my application . The requirement is to update the chart as per the change in data. the chart also has Customtooltip on the bars which can be seen on hover . now when the data changes ,chart is rendered if tooltip is not used but when i use tooltip it shows error . initially while loading my page everything works fine but after updating the datasource it shows some error this is my javascript code $("#chart").igDataChart({ width: "98%", height: "350px", dataSource: jsonObj, title: "Sector Comparison", windowResponse: "immediate", axes: [{ name: "xAxis", type: "categoryX", label: "xValue", labelTopMargin: 5, gap: 5 }, { name: "yAxis", type: "numericY", minimumValue: 0, maximumValue: 109, labelLocation: "outsideRight", majorStrokeThickness: 2, majorStroke: "#0856a7", minorStroke: 'black', minorInterval: 10, interval: 50, formatLabel: function (value) { if (value == 50) { return "Medium value"; } }, }, { name: "yAxis1", type: "numericY", title: "Rank", minimumValue: 0, maximumValue: 109, labelLocation: "outsideLeft", interval: 10, formatLabel: function (value) { return value; }, }], series: [{ name: "series1", type: "column", isHighlightingEnabled: true, isTransitionInEnabled: true, xAxis: "xAxis", yAxis: "yAxis", valueMemberPath: "value", showTooltip: true, remove: true, isCustomCategoryStyleAllowed: true, }], assigningCategoryStyle: function (e, ui) { var startIndex = ui.startIndex; var endIndex = ui.endIndex; var items =ui.getItems(startIndex,endIndex); var color = ui.fill; for (var i = 0; i < items.length; i++) { if (items[i].color) { color = items[i].color; } } ui.fill = color; } this is the code i write while binding tooltip initially //get var series = $("#chart").igDataChart("option", "series"); series[0].tooltipTemplate; //Set $("#chart").igDataChart("option", "series", [{ name: "series1", type: "column", isHighlightingEnabled: true, isTransitionInEnabled: true, xAxis: "xAxis", yAxis: "yAxis", valueMemberPath: "value", showTooltip: true, isCustomCategoryStyleAllowed: true, tooltipTemplate: "CustomTooltipTemplate", }] ); "CustomTooltipTemplate" is my custom tooltip template that works completely fine initially when i get the new data after which i try to update chart with tooltip series[0].tooltipTemplate; show error in console as Cannot read property 'tooltipTemplate' of undefined and if i don't use custom template and just use property showTooltip Cannot read property 'updateToolTip' of undefined is shown , is there any way i can use custom tootltip and dataSource dynamically. i used to update the datasource i,e jsonObj . i found the solution . on updation of chart i overwrite the series and assign datasource to the chart and renderseries as below and it works $("#chart").igDataChart({ series: [{ name: "series1", type: "column", isHighlightingEnabled: true, isTransitionInEnabled: true, xAxis: "xAxis", yAxis: "yAxis", valueMemberPath: "value", isCustomCategoryStyleAllowed: true, }], }); $("#chart").igDataChart("option", "dataSource", jsonObj); $("#chart").igDataChart("renderSeries", "xAxis", false); $("#chart").igDataChart("renderSeries", "yAxis", false); $("#chart").igDataChart("renderSeries", "yAxis1", false);
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 }); ... });