I want to display my current location and get location coordinates to search nearby. Starting with the code below to display my location on the map, but its not working.
{
xtype: 'map',
useCurrentLocation: true
}
I defined a custom map class:
Ext.define("FindMyMoney.view.MapView", {
extend: "Ext.Map",
xtype: 'mapview',
config: {
useCurrentLocation: true,
listeners: {
maprender : function(comp, map){
new google.maps.Marker({
position: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude()),
map: map
});
}
}
}
});
So it would render a marker on my current position. Simple.
Here is the code. It will show multiple markers with bounds:
Ext.define("iME.view.Maps", {
extend: "Ext.Map",
xtype: 'mapview',
config: {
mapOptions: {
center: new google.maps.LatLng(28.80010128657071, 77.28747820854187),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
},
listeners: {
maprender: function (comp, map) {
var markersll = [
['Noida', 28.80010128657071, 77.28747820854187],
['Coogee Beach', 24.80010128565, 73.2874782084457],
['Cronulla Beach', 25.80010128657071, 76.28747820854187],
['Manly Beach', 28.80010128657071, 72.28747820854187],
['Maroubra Beach', 9.052234, 75.243685]
];
var infowindow = new google.maps.InfoWindow();
var marker, i, pos;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markersll.length; i++) {
pos = new google.maps.LatLng(markersll[i][1], markersll[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
animation: google.maps.Animation.BOUNCE,
icon: 'http://thumb10.shutterstock.com/thumb_small/429058/131292377/stock-vector-map-super-marker-icon-131292377.jpg',
map: map,
title: 'Click Me ' + i
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(markersll[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
map.fitBounds(bounds);
}
}
}
}
});
I think this is a bug in ST2. I asked (I think you did :-) ) this question also in Sencha Forums: http://www.sencha.com/forum/showthread.php?156501-Maps-with-sencha-touch
My code in that forum did not worked. The code that I was using is as follows:
The index.html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample app</title>
<script type="text/javascript" src="lib/touch/sencha-touch-all-debug.js"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
Ext.Loader.setConfig({
enabled : true,
path : {
PPL : 'ppl.js'
}
});
Ext.setup({
tabletStartupScreen : 'tablet_startup.png',
phoneStartupScreen : 'phone_startup.png',
icon : 'phone_startup.png',
onReady : function() {
Ext.create('PPL.App', {
fullscreen : true
});
}
})
</script>
</head>
<body>
</body>
</html>
And my ppl.js looks like this:
Ext.define('PPL.App', {
extend: 'Ext.Panel',
layout: 'vbox',
config: {
items: [{
xtype: 'toolbar',
title: 'Sample MAP'
}, {
xtype: 'panel',
layout: 'fit',
items: [{
xtype: 'map',
useCurrentLocation: true
}]
}]
}
});
If I change my ppl.js into the following:
Ext.define('PPL.App', {
extend: 'Ext.Map',
layout: 'fit',
config: {
items: [{
xtype: 'map',
useCurrentLocation: false
}]
}
});
Then it is working!
So, I think we need to wait untill next release, in the mean time learn ST2 :-)
Cheers!
Here is the code to show location current location
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate: false,
listeners: {
locationupdate: function(geo) {
var currentLat = geo.getLatitude();
var currentLng = geo.getLongitude();
var altitude = geo.getAltitude();
var speed = geo.getSpeed();
var heading= geo.getHeading();
},
locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if(bTimeout)
Ext.Msg.alert('Timeout occurred',"Could not get current position");
else
alert('Error occurred.');
}
}
}
});
geo.updateLocation();
Related
I have developed a very simple column chart from a json three dimensional array:
0: timestamp in millliseconds
1:given recognition
2:received recognition
[[1490288274653,7,175],[1490374674653,1,1],[1490806674653,1,1],[1490979474653,3,3],[1491065874653,4,4],[1491411474653,6,0],[1491497874653,2,0],[1491584274653,18,0],[1491843474653,8,0],[1491929874653,1,0],[1492621074653,25,0],[1492707474653,12,0],[1492793874653,2,0],[1501174674653,2,0],[1503593874653,2,2],[1510765074653,1,0],[1510851474653,1,1],[1510937874653,5,0],[1511197074653,7,3],[1511369874653,7,2],[1511542674653,1,0],[1511801874653,7,3],[1511974674653,1,0],[1512493074653,1,1],[1512665874653,2,2],[1512752274653,9,4],[1513184274653,2,2],[1513270674653,2,2],[1513616274653,3,0],[1513789074653,4,2],[1514912274653,1,0],[1515430674653,1,0]]
The array displays timestamp on the xAxis and given recognition on the y axis.
How do I create a stacked column with "received recognition" stacked on "given recognition" on the yAxis?
I have searched google for hours and I can't find an example that uses same json array like mine, without strings as catagories.
I assume I will have to customise series or plotOptions and identify the data columns via the number data[1], data[2]?
How will I achieve a similar column like this CSV column:
http://marialaustsen.com/columncsv.html
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>myGraph</title>
<!--
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>-->
<!-- Highcharts is already included in Highstock, so it is not necessary to load both. The highstock.js file is included in the package. -->
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<!-- But the separate files can't run in the same page along with each other or with highcharts.js. So if stock or maps are required in the same page as each other or with basic Highcharts, they can be loaded as modules: -->
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="height: 400px; width: 100%"></div>
<script>
$(function() {
console.log($);
$.getJSON('http://localhost:3000/recognition', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
type: 'column',
renderTo: 'container'
},
legend: {
enabled: true,
},
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF </span> <b>{point.series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>',
valueSuffix: ' k',
shared: true,
},
series: [{
name: 'Brands',
data: data
}],
rangeSelector: {
selected: 1,
inputDateFormat: '%Y-%m-%d',
floating: true,
y: -75,
verticalAlign: 'bottom'
},
title: {
text: 'Team members received and sent recognition'
},
navigator: {
margin: 50
},
xAxis: {
type: 'datetime',
title: {
text: 'DATES'
}
},
yAxis: {
title: {
text: 'BRANDS'
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
}, function(chart) {
// apply the date pickers
setTimeout(function() {
$('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()
}, 0)
});
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText) {
chart.xAxis[0].setExtremes($('input.highcharts-range-selector:eq(0)').datepicker("getDate").getTime(), $('input.highcharts-range-selector:eq(1)').datepicker("getDate").getTime());
//this.onchange();
this.onblur();
}
});
});
</script>
</body>
</html>
You need to prepare your data - split it into 2 separate series:
series: (function() {
var series = [{
name: 'received recognition',
data: []
}, {
name: 'given recognition',
data: []
}];
data.forEach(function(p) {
series[0].data.push([p[0], p[1]]);
series[1].data.push([p[0], p[2]]);
});
return series;
})()
Live demo: http://jsfiddle.net/kkulig/88sr9ofn/
I need to create bar chart showing up various values, such as "Created", "Closed", "Submitted" data with count on Y Axis and dates on x axis.
I am able to do this successfully, for any one criteria. However I am not able to get multiple bars being shown.
Below is the code I am using currently:
<!DOCTYPE html>
<html>
<head>
<title>Defect Trend App</title>
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
return this.createTrendChart();
},
createTrendChart: function() {
var ProjectOid;
ProjectOid = this.getContext().getProject().ObjectID;
var ReleaseOID = <My Release ID>;
Ext.define('My.TrendCalc', {
extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
getMetrics: function() {
return [
{
as: 'Defects',
display: 'column',
f: 'count'
}
];
}
});
this.myTrendChart = Ext.create('Rally.ui.chart.Chart', {
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: {
find: {
_TypeHierarchy: "Defect",
State: {
$lt: "Closed"
},
_ProjectHierarchy: ProjectOid,
Release: ReleaseOID
},
fetch: ["_ValidFrom", "_ValidTo", "ObjectID"]
},
calculatorType: 'My.TrendCalc',
calculatorConfig: {},
chartConfig: {
chart: {
zoomType: 'x',
type: 'column'
},
title: {
text: 'Defects over Time'
},
xAxis: {
type: 'datetime',
minTickInterval: 1
},
yAxis: {
title: {
text: 'Number of Defects'
}
}
}
});
return this.add(this.myTrendChart);
}
});
}).call(this);
Rally.launchApp('CustomApp', {
name:"Defect Trend App",
parentRepos:""
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>
I do not consider myself an expert in this area, but I believe this will work for you...
I took your code as a base and modified it based on some other code to get what I think appears to be a working version of what you want. Below is a screenshot of the code running in Rally.
The data I had did not have a lot of variance in the series (most were released) so it looks uninteresting.
You will probably want to exclude the final state (as I believe you did in your code via the $lt:'Completed'... which i changed to $lte:'Completed' temporarily).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>
Defect Trend App </title>
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
var states = ['Accepted','Released']; // all enum values for 'State'
var field = 'ScheduleState'; // or 'State'
var ReleaseOID = XXXXXX; // your release Oid
Rally.onReady(function () {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
return this.createTrendChart();
},
createTrendChart: function() {
var ProjectOid;
ProjectOid = this.getContext().getProject().ObjectID;
Ext.define('My.TrendCalc', {
extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
getDerivedFieldsOnInput: function() {
var m = _.map(states, function(state) {
return {
"as": state,
"f" : function(snapshot) {
var value = (snapshot[field] == state) ? 1 : 0;
return value;
}
}
})
return m;
},
getMetrics : function() {
var m = _.map(states, function(state) {
return {
field: state,
as: state,
f: 'sum'
}
})
return m;
}
});
this.myTrendChart = Ext.create('Rally.ui.chart.Chart', {
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: {
find: {
_TypeHierarchy: "Defect",
State: {$lte: "Closed" },
_ProjectHierarchy: ProjectOid,
Release: ReleaseOID
},
fetch: ["_ValidFrom", "_ValidTo", "ObjectID", field],
hydrate: [field],
sort: { "_ValidFrom" : 1}
},
calculatorType: 'My.TrendCalc',
calculatorConfig : {},
chartConfig: {
chart: {
zoomType: 'xy',
type:'column'
},
title: {
text: 'Defects over Time'
},
xAxis: {
type: 'datetime',
title: { text: 'When'},
minTickInterval: 5,
labels : { rotation: 90 }
},
yAxis: { title: { text: 'Count' } },
plotOptions: {
series: {
stacking: 'normal'
}
}
}
});
return this.add(this.myTrendChart);
}
});
});
console.log("launching application");
Rally.launchApp('CustomApp', {
name:'Defect Trend App',
parentRepos:""
});
</script>
</head>
<body>
</body>
Pastebin - http://pastebin.com/Vf6jniGZ
I'm not familiar with Rally's App SDK wrappers, but I'm the primary author of Lumenize where the TimeSeriesCalculator comes from. Your situation is exactly what the group-by functionality in Lumenize.TimeSeriesCalculator was designed for. See the documentation for a careful walkthrough of how the TimeSeriesCalculator works. Look at the second example titled, "Time-series group-by example". Also, here is a functioning jsfiddle of that group-by example.
The key bit that you need is:
metrics = [
...
{f: 'groupByCount', groupByField: 'ScheduleState', allowedValues: allowedValues, prefix: 'Count '},
...
]
Can you help me solve the issue I'm running into with the loadData function as part of the Ext.data.JsonStore? I've created a basic example of the problem I'm running into:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ext JSON example</title>
<script type="text/javascript" src="lib/ext-base.js"></script>
<script type="text/javascript" src="lib/ext-all.js"></script>
<script>
function example() {
var exampleData = "{'exampleJSON' : {'exampleArray':[{'exampleID':1,'name':'Fred','description':'a guy'},{'exampleID':2,'name':'sue','description':'a girl'}]}}";
var exampleStore = new Ext.data.JsonStore({
data: new Ext.data.MemoryProxy(exampleData),
autoLoad: false,
root: 'exampleJSON.exampleArray',
fields: [
{mapping: "exampleID", name: 'exampleID'},
{mapping: "name", name: 'name'},
{mapping: "description", name: 'description'}
],
listener: {
load: function (oStore, ayRecords, oOptions )
{
alert('loaded successfully');
}
}
});
exampleStore.loadData(exampleData);
}
</script>
</head>
<body>
<center><button onclick="example();">Click for Example</button></center>
</body>
</html>
The problem I'm running into is I'm getting this error reported by Firebug:
obj.exampleJSON is undefined
This is likely being caused when I set the root as 'exampleJSON.exampleArray'.
Can someone help point out what I'm doing wrong?
(using ExtJs 4.1.0)
Thanks guys.
EDIT: to set this up, place ext-all.js and ext-base.js in a lib folder.
Your code is wrong in a number of places:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['exampleID', 'name', 'description']
});
function example() {
var exampleData = [{
exampleID: 1,
name: 'Fred',
description: 'a guy'
}, {
exampleID: 2,
name: 'sue',
description: 'a girl'
}];
var exampleStore = new Ext.data.Store({
model: 'MyModel',
data: exampleData
});
}
Also, there's no ext-base file for Ext 4, so it's a redundant include.
Thanks for your replies, they were useful in sending me down the right path. I was able to get my original example to work by removing the 'data' field. I'm guessing it was causing conflicts when I tried to call loadData. Solution listed beflow
function example() {
var exampleData = {'exampleJSON' : {'exampleArray':[{'exampleID':1,'name':'Fred','description':'a guy'},{'exampleID':2,'name':'sue','description':'a girl'}]}};
var exampleStore = new Ext.data.JsonStore({
autoLoad: false,
root: "exampleJSON.exampleArray",
fields: [
{mapping: "exampleID", name:"exampleID"},
{mapping: "name", name:"name"},
{mapping: "description", name:"description"}
],
listeners: {
load: function (oStore, ayRecords, oOptions )
{
alert('loaded successfully: ' + ayRecords.length);
}
}
});
exampleStore.loadData(exampleData);
}
I have sencha donut chart in window panel and text sprite in another panel. but i need to integrate this sprite with donut chart, so that if i will move the chart, the added text sprite will move accordingly.
Here is my code:
Ext.setup({
tabletStartupScreen: 'tablet_startup.jpg',
phoneStartupScreen: 'phone_startup.jpg',
tabletIcon: 'icon-ipad.png',
phoneIcon: 'icon-iphone.png',
glossOnIcon: false,
requires: ['Ext.chart.Panel',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.chart.series.Pie'],
onReady: function () {
var donut = false;
window.initExample('Pie Chart',
"This example's uses many interactions.<br><ul>" +
"<li>Dragging the Pie Chart will rotate it.</li>" +
"<li>Tap and hold will bring up additional information about a slice</li>" +
"<li>Double-Tap will reset the chart back to the initial state (after confirmation)</li>");
window.createPanel(new Ext.chart.Chart({
themeCls: 'pie1',
theme: 'Demo',
store: store1,
shadow: false,
animate: true,
insetPadding: 20,
legend: {
position: 'left'
},
interactions: [
{
type: 'reset',
confirm: true
},
{
type: 'rotate'
},
'itemhighlight',
{
type: 'iteminfo',
gesture: 'longpress',
listeners: {
show: function (interaction, item, panel) {
var storeItem = item.storeItem;
panel.setHtml(['<ul><li><b>Month: </b>' + storeItem.get('name') + '</li>', '<li><b>Value: </b> ' + storeItem.get('2007') + '</li></ul>'].join(''));
}
}
}
],
series: [
{
type: 'pie',
field: '2007',
showInLegend: true,
highlight: false,
donut: 50,
listeners: {
'labelOverflow': function (label, item) {
item.useCallout = true;
}
},
// Example to return as soon as styling arrives for callouts
callouts: {
renderer: function (callout, storeItem) {
callout.label.setAttributes({
text: storeItem.get('name')
}, true);
},
filter: function () {
return false;
},
box: {
//no config here.
},
lines: {
'stroke-width': 2,
offsetFromViz: 20
},
label: {
font: 'italic 14px Arial'
},
styles: {
font: '14px Arial'
}
},
label: {
field: 'name'
}
}
]
}));
mydrawComponent = new Ext.draw.Component({
id:'mydrawComponent',
fill:'blue',
height: '100%',
width: '100%',
fullscreen: true,
items: [{type: 'text',
'text-anchor':'center',
fill: 'black',
font: '20px Arial',
text: 'Investment',
x: 860,
y: 380,
zIndex: 2},
{type: 'text',
'text-anchor':'center',
fill: 'black',
font: 'Bold 30px Arial',
text: '$165m',
x: 860,
y: 410,
zIndex: 3}]
}).show();
new Ext.chart.Panel({
fullscreen: true,
title: 'Text',
items: mydrawComponent
});
}
});
This is the sencha touch donut chart javascript code. and here is the html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="../CSS/sencha-touch.css" type="text/css">
<link rel="stylesheet" href="../CSS/touch-charts-demo.css" type="text/css">
<title>Donut Chart</title>
<script type="text/javascript" src="../JS/sencha-touch.js"></script>
<script type="text/javascript" src="../JS/touch-charts.js"></script>
<script type="text/javascript" src="../JS/examples.js"></script>
<script type="text/javascript" src="donutchart.js"></script>
</head>
<body></body>
</html>
I was thinking for 2 different approaches:
1) If we can get Donut chart center point X/Y co-ordinates then we can add sprite to that X/Y co-ordinates.
2) We can add panel to the chart and then add drawComponent or sprite to that panel.
Please let me know how we can do this.
Thanks!!
I passed json encoded string(eg. $TEXT2 consisting ["chrome","15","firefox","20"]) from xcode to an array(eg. arr) in javascript.Now I want to pass this array containing json string dynamically to Highcharts Pie. The HTML code is
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=20, user-scalable=no;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pie chart</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
var arr = $TEXT2;
$(document).ready(function(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Interactive Pie'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: []
}]
});
});
</script>
<body>
<br>
<!-- 3. Add the container -->
<div id="container" style="width: 300px; height: 350px; margin: 0 auto"></div>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
</body>
</html>
I am trying to use getjson method although m unaware of its usage.
Since i want to pass my array i.e arr to data[] in Highcharts,I am doing:
$.getJSON("arr", function(json) {
chart.series = json;
var chart = new Highcharts.Chart(chart);
});
Can anyone help me on dis.
Thanks in advance.
I would wrap the JSON call in the document.ready function and then wrap the plot call in the getJSON's success callback:
$(document).ready(function() {
$.getJSON("arr", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Interactive Pie'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
},
series: [{
type: 'pie',
name: 'Browser share',
data: json
}]
});
});
});
Of course for this to work, you should modify your backend code to return a properly formatted array of arrays that HighCharts expects:
[["chrome",15],["firefox",20]]
You could "fix" your returned array in the JS, but it would be better to do it in the JSON backend call.
<script type="text/javascript">
jQuery(document).ready(function () {
alert('call pie');
var data1 = $("#dataidd").val();
alert('pie data' + data1);
/*--------Pie Chart---------*/
$('#PieChartDiv').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Comparision and Analysis Report'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Issue Details',
// data: jQuery.parseJSON(data1)
data: JSON.parse(data1)
}]
});
});
</script>
Simply do :
Create array with Jquery as bellow :
$.each(data['values'], function(i, val) {
x_values_sub['name'] = i
x_values_sub['y'] = val
x_values.push(x_values_sub);
x_values_sub = {};
});
// Then call this array with HighCharts as data
series: [{
type: 'pie',
name: null,
data: x_values
}]
// Tested and it works with simple javascript object :
Object Part1Name: 25 Part2Name: 75__proto__: Object
You can bind chart with JSON data, directly. You just need to set the json property names as highchart standard. 'Y' for value and 'name' for label.
Your JSON should be as like follow:
[ { name: "Chrome", y: 25 }, { name: "Firefox", y: 20 } ]