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 have an MVC5 project with the following Index.aspx
When I run the project in VS2013 I can only see the top branches of the tree, with no apparent way to expand them.
Resharper indicates that my references are OK.
I am new to HTML5 programming and Angular. How do I go about trouble shooting this problem?
Index.aspx is
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html data-ng-app="myApp">
<head runat="server">
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<link rel="stylesheet" type="text/css" href="/Content/dx.common.css"/>
<link rel="stylesheet" type="text/css" href="/Content/dx.light.css"/>
<script src="/Scripts/jquery-2.1.4.min.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-sanitize.js"></script>
<script src="/Scripts/jquery.globalize/globalize.js"></script>
<script src="/Scripts/dx.webappjs.js"></script>
<script src="/MyJS/script_Angular.js"></script>
</head>
<body>
<div ng-controller="demoController">
<div dx-tree-view="{
dataSource: treeViewData,
dataStructure: 'plain'
}">
</div>
</div>
</body>
</html>
and script_Angular is
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
$scope.treeViewData = dataArray;
});
var dataArray = [
{
id: 1,
text: "Animals",
items: [
{
id: 2,
text: "Cat",
items: [
{ id: 5, text: "Abyssinian" },
{ id: 6, text: "Aegean cat" },
{ id: 7, text: "Australian Mist" }
]
},
{
id: 3,
text: "Dog",
items: [
{ id: 8, text: "Affenpinscher" },
{ id: 9, text: "Afghan Hound" },
{ id: 10, text: "Airedale Terrier" },
{ id: 11, text: "Akita Inu" }
]
},
{
id: 4,
text: "Cow"
}
]
},
{
id: 12,
parentId: 0,
text: "Birds",
items: [
{ id: 13, text: "Akekee" },
{ id: 14, text: "Arizona Woodpecker" },
{ id: 15, text: "Black-chinned Sparrow" }
]
}
];
You should not set option
dataStructure: 'plain'
as it is hierarchical in your case
Removing dataStructure option should help
Docs are here
I need make zoom in graphic. I am using angular js and nvd3.
this is a part of my Code, html and angular module:
var app = angular.module('DL', ['nvd3']);
app.controller('daCtrl', function($scope) {
$scope.graphic = [{key: "a", values: [[243434, 1],[363352, 2],...]}, [[243434, 1],[363352, 2],...]},... ];
$scope.options = {
chart: {
type: "lineChart",
height: 450,
margin : {
top: 20,
right: 20,
bottom: 60,
left: 65
},
x: function(d){ return d[0]; },
y: function(d){ return d[1]/100; },
average: function(d) { return d.mean/100; },
color: d3.scale.category10().range(),
transitionDuration: 300,
useInteractiveGuideline: true,
clipVoronoi: false,
xAxis: {
axisLabel: 'Date',
tickFormat: function(d) {
return d3.time.format('%m/%d/%y')(new Date(d));
}
},
yAxis: {
axisLabel: 'Measure',
tickFormat: function(d){
return d3.format('.02f')(d);
},
axisLabelDistance: 20,
showMaxMin: true,
staggerLabels: true
}
}
};
});
<link rel="stylesheet" type="text/css" href="../bower_components/nvd3/nv.d3.css">
<script src="../bower_components/d3/d3.js"></script>
<script src="../bower_components/nvd3/nv.d3.js"></script>
<script src="../bower_components/angular-nvd3/dist/angular-nvd3.js"></script>
<nvd3 options="options" data="graphic"></nvd3>
The graphic is ok, but I need make zoom over the graphic.
I've seen that D3 is possible, but not if you can with equally nvd3
Try to use a lineWithFocusChart instead of lineChart and then add this options to your chart:
x2Axis: {
tickFormat: function (d) {
return d3.time.format('%m/%d/%y')(new Date(d));
}
},
y2Axis: {
tickFormat: function(d){
return d3.format('.02f')(d);
}
}
I know that I am two years late to the party but zooming in angularjs is totally a thing, just add something like:
zoom: {
enabled: true,
scaleExtent: [1, 10000],
useFixedDomain: false,
useNiceScale: false,
horizontalOff: false,
verticalOff: true,
unzoomEventType: "dblclick.zoom"
}
To your chart options
I changed nvd3 to dygraph using Dygraphs angularjs Directive (https://twittstrap.com/dygraphs-angularjs-directive/)
Now (the same example of website)
HTML:
<head>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/dygraphs/dygraph-combined.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular-dygraphs/src/angular-dygraphs.js"></script>
<!--<link rel="stylesheet" type="text/css" href="bower_components/angular-dygraphs/demo/demo.css"/>-->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-app="demoApp">
<div ng-controller="DemoCtrl">
<ng-dygraphs data="graph.data" options="graph.options" legend="graph.legend"></ng-dygraphs>
<div>
</body>
js:
var example = angular.module('demoApp', [
"angular-dygraphs"
]);
demoApp.controller('DemoCtrl', function ($scope) {
$scope.graph = {
data: [
],
options: {
labels: ["x", "A", "B"]
},
legend: {
series: {
A: {
label: "Series A"
},
B: {
label: "Series B",
format: 3
}
}
}
};
var base_time = Date.parse("2008/07/01");
var num = 24 * 0.25 * 365;
for (var i = 0; i < num; i++) {
$scope.graph.data.push([ new Date(base_time + i * 3600 * 1000),
i + 50 * (i % 60), // line
i * (num - i) * 4.0 / num // parabola
]);
}
});
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 } ]