I want to implement a kendo DataViz chart i.e., Bar chart locally using Angular binding, also i want to show bars of different colours as shown in the image:
Kindly advice me how to implement.
A sample was created here http://plnkr.co/edit/?p=catalogue
Start with something like this:
HTML:
<body ng-app="app" ng-controller="myCtrl">
<div kendo-chart k-options="barOptions" />
</body>
JavaScript:
var app = angular.module('app', ['kendo.directives']);
app.controller("myCtrl", function($compile, $scope) {
$scope.barOptions = {
title: {
text: "Gross domestic product growth /GDP annual %/"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "India",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
color: "#FF0000"
}, {
name: "Russian Federation",
data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3],
color: "#FF00A0"
}, {
name: "Germany",
data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995],
color: "#FFDD00"
}, {
name: "World",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: 0
},
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
line: {
visible: false
},
labels: {
padding: {
top: 145
}
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
};
});
You can adjust the bar colors using the color configuration option (demo).
Related
I am creating a project using JavaScript with Kendo. I am the beginner in Kendo.
I have problem while integrating the pie chart.I want to this type of chart:
But when I integrate the code according to reference site then my chart shapes become:
Here is the code:
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
var data = [
{
"source": "Hydro",
"percentage": 22,
"explode": true
},
{
"source": "Solar",
"percentage": 2
},
{
"source": "Nuclear",
"percentage": 49
},
{
"source": "Wind",
"percentage": 27
}
];
function createChart() {
$("#chart").kendoChart({
title: {
text: "Break-up of Spain Electricity Production for 2008"
},
legend: {
position: "bottom"
},
dataSource: {
data: data
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
seriesColors: ["#03a9f4", "#ff9800", "#fad84a", "#4caf50"],
tooltip: {
visible: true,
template: "${ category } - ${ value }%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
Add this to your definition to remove shadow and border and keep the same skin
seriesDefaults: {
overlay: { gradient: "none" },
border: {
width: 0,
color: ""
}
}
If your problem is only with the styling, you can set your chart theme. Just add theme: "material" and you should get a plain color.
A list of themes can be found on kendo UI docs https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling
I am struggling with adding multiple texts on the x-axis. Most of the things like giving name field in x-axis don't work with Sankey diagram.
Problem: I need to add 2 texts just below my x-axis on my Sankey diagram. The first text just below and center of the blue bar. The second text I need just below gray bar but it should be in the same line with respect to first text
Here is my code
Highcharts.chart('container', {
title: {
text: ''
},
xAxis: {
type: 'football league'
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Football', 'Messi', 20 ],
['Football', 'ronaldo', 3 ],
//['Challenged', 'Terminated', 0 ],
['Football', 'sachin', 1 ],
['Messi', 'sehqag', 12 ],
//['Instituted', ' Terminated', 0 ],
['Messi', 'ashwin', 6 ],
['Messi', ' ramesg', 2 ],
],
type: 'sankey',
name: 'Sankey demo series'
}]
});
JSFiddle: https://jsfiddle.net/anikettiwari/kLzv8sp0/26/
To add text to the chart, you can use annotations module or Highcharts.SVGRenderer:
annotations: [{
labels: [{
text: 'annotations',
point: {
x: 100,
y: 380
}
}, {
text: 'annotations2',
point: {
x: 400,
y: 380
}
}]
}]
Live demo: https://jsfiddle.net/BlackLabel/odc4jsku/
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
Docs: https://www.highcharts.com/docs/advanced-chart-features/annotations-module
I achieved this by below code
chart: {
showAxes: true
},
xAxis: {
categories: ['ANIKET','SHivam'],
labels: {
style: {
color: '#000000'
}
}
},
yAxis: {
title: '',
labels: {
formatter: function() {
return '';
},
style: {
color: '#4572A7'
}
}
},
For the y-axis it was giving me default label so for removing it I wrote the above yaxis code
I am using the echarts.js library for pie charts,
I would like to make each slice in the pie hyperlink to another page.
Im using static data points for now, to test if it will work - and will update to dynamic data after.
Below is an example of pie1a - i would like T2, T2, T4 and N/A to reference their own pages. T2 = "http://localhost/T2.html".
//ECHART_PIE1a
var echartPie1a = echarts.init(document.getElementById('echart_pie1a'), theme);
echartPie1a.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x: 'right',
y: 'bottom',
data: ['T2', 'T3', 'T4', 'N/A']
},
calculable: true,
series: [{
name: '(TB)',
type: 'pie',
radius: '54%',
center: ['54%', '36%'],
data: [{
value: 438,
name: 'T2'
}, {
value: 1109,
name: 'T3'
}, {
value: 42,
name: 'T4'
}, {
value: 389,
name: 'N/A'
}]
}]
});
echartPie1a.setOption(option);
echartPie1a.on('click', function (params)
{window.open('' + encodeURIComponent(params.name) + '.html', '_self');
});
Seems to have done the trick.
Hi I'm working for the first time with the charts of the DevExtreme Framework, because I'm searching for a good chart plugin for my web-application, which can solve some of my special requirements. At the moment my chart looks like this (I can't put it in a fiddle or in the stackoverflow snippet, because there I got an error, when a put an external library for globalize/chartjs.js so I copied into the question):
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DevExtreme Chart</title>
<!--FRAMEWOKR-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="./lib/globalize.min.js"></script>
<script src="./lib/dx.charts.js"></script>
<!--JS-->
<script type="text/javascript" src="chart.js"></script>
</head>
<body>
<div id="chartContainer" style="width:100%; height: 600px"></div>
</body>
</html>
JS:
$(document).ready(function(){
var dataSource = [
{
argument: '15.06.2016',
puls: 102,
temperatur: 37.6,
weight: 89
},
{
argument: '16.06.2016',
puls: 99,
temperatur: 35.1,
weight: 88
},
{
argument: '17.06.2016',
puls: 87,
temperatur: 38.0,
weight: 87
},
{
argument: '18.06.2016',
puls: 91,
temperatur: 36.3,
weight: 88
},
{
argument: '19.06.2016',
puls: 112,
temperatur: 37.1,
weight: 90
}
];
$("#chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
type: "spline",
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
axis: "pulsAxe"
},
tooltip: {
enabled: true
},
series: [
{
name: "Puls",
valueField: "puls",
},
{
name: "Temperatur",
valueField: "temperatur",
axis: "temperaturAxe"
},
{
name: "Gewicht",
valueField: "weight",
axis: "weightAxe"
}
],
valueAxis: [
{
name: "pulsAxe",
title: "Puls",
label: {
customizeText: function(value) {
return value.value + " bpm"
}
}
},
{
name: "temperaturAxe",
title: "Temperatur",
position: "right",
label: {
customizeText: function(value) {
return value.value + " °C"
}
}
},
{
name: "weightAxe",
title: "Gewicht",
position: "right",
label: {
customizeText: function(value) {
return value.value + " kg"
}
}
}
]
});
});
My result:
Now I would like to change the red line like the blue line in this example (this chart is not devextreme, it's highcharts):
My goal is, also to mix line-style in the same line on a specific zone (I would like to say, this part is solid, and this is dotted). How can I do this with devextreme charts? Is this possible?
I would be thankfull for some help.
Cheers.
At the moment the chart doesn't have the capability to display one series with the mix-line style.
There is, however, a way to create two series for one line. The first series can be used to show the solid-style part of the line and the second series for the dot-style part. Here is an example of such an approach:
$("#container").dxChart({
dataSource: [{
arg: 1,
val1: 10
}, {
arg: 2,
val1: 15
}, {
arg: 3,
val1: 8
}, {
arg: 4,
val1: 6
}, {
arg: 5,
val1: 12
}, {
arg: 5,
val2: 12
}, {
arg: 6,
val2: 17
}],
legend: { visible: false },
series: [{
color: "#334455",
valueField: "val1",
point: { visible: false }
}, {
color: "#334455",
valueField: "val2",
point: { visible: false },
dashStyle: "dot",
hoverStyle: {
dashStyle: "dot"
}
}]
});
I'm looking to export a customized chart simliar to the post here Export Highcharts to PDF (using javascript and local server - no internet connection) that references http://fiddle.jshell.net/leighking2/dct9tfvn/. This has the exact functionality that I'm looking for, however I have my chart/data in a sepearte file/controller. Does anyone know how I could take the concept from the post I listed above, but incorporate it into my controller?
Didn't want to include my whole index.html file but here are the two charts from it.
<div id="allCharts" class="col-md-6" >
<button class="export_all" >export all</button>
<highchart id="chart1" config="chartConfig" class="span9 myChart" ></highchart>
<hr>
<highchart id="chart2" config="chartConfig2" class="span9 myChart" ></highchart>
</div>
'use strict';
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
$scope.chartConfig = {
options: {
chart: {
type: 'line'
},
xAxis: {
categories: ['Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5'],
title: {
text: null
}
},
plotOptions: {
line: {
events: {
legendItemClick: function () {
return false;
}
}
}, allowPointSelect: false,
series: {
stacking: ''
}
}
},
series: [{ "name": "Purchase Costs", data: $scope.purchaseChartData }, { "name": "Rental Costs", data: $scope.rentalChartData }],
title: {
text: 'Rental and Purchase Costs'
},
credits: {
enabled: true
},
loading: false,
size: {}
};
$scope.chartConfig2 = {
options: {
chart: {
type: 'column'
},
xAxis: {
categories: ['Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5'],
title: {
text: null
}
},
plotOptions: {
column: {
events: {
legendItemClick: function () {
return false;
}
}
}, allowPointSelect: false,
series: {
stacking: ''
}
}
},
exporting:{
allowHTML:true
},
series: [{ "name": "Annual Savings", data: $scope.savingsChartData }],
title: {
useHTML:false,
text: 'Savings Compounded Annually'
},
credits: {
enabled: true
},
loading: false,
size: {}
};
$scope.reflow = function () {
$scope.$broadcast('highchartsng.reflow');
};
});
Question Update
Thanks Vaelyr! I now have the print button working; however I only have it adding text. I'm just having trouble linking my chart to the imageData. For now I just have the script within my html page until I get this working.
Attaching the charts to the imageData (via a loop) isn't working for me. I have class="myCharts" attached to both of my charts, but no luck. Now I'm just bacially trying to add my charts to the imageData.
<div id="allCharts" class="col-md-6" >
<button class="exportAll" onClick="printPDF()" id="export_btn">export all</button>
<highchart id="chart1" config="chartConfig" class="span9 myChart" ></highchart>
<hr>
<highchart id="chart2" config="chartConfig2" class="span9 myChart" ></highchart>
function printPDF() {
var doc = new jsPDF();
// chart height defined here so each chart can be palced
// in a different position
var chartHeight = 80;
// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.setFontSize(40);
doc.text(35, 25, "My Exported Charts");
//loop through each chart
$('.myChart').each(function (index) {
var imageData = $(this).highcharts().createCanvas();
// add image to doc, if you have lots of charts,
// you will need to check if you have gone bigger
// than a page and do doc.addPage() before adding
// another image.
/**
* addImage(imagedata, type, x, y, width, height)
*/
doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
//add.addImage();
});
//save with name
doc.save('demo.pdf');
};
I found the functionality that I was looking for here https://github.com/pablojim/highcharts-ng/issues/185.
--moe