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"
}
}]
});
Related
Hi I am using Highchart for sunburst chart, But getting errors, I am not able to get what is wrong in my code, so please help me.
My HTML code is :
<highcharts-chart
[Highcharts]="highcharts1"
[options]="chartOptions1"
style="width: 100%; height: 200px; display: block;">
</highcharts-chart>
and Ts code is
chartData = [
{
id: '2.13',
parent: '1.3',
name: 'Southern Asia'
}
];
highcharts1: typeof Highcharts = Highcharts;
chartOptions1: Highcharts.Options = <any> {
chart: {
height: '100%'
},
title: {
text: 'World population 2017'
},
subtitle: {
text: 'Source <href="https://en.wikipedia.org/wiki/List_of_countries_by_population_(United_Nations)">Wikipedia</a>'
},
series: [{
type: "sunburst",
data: this.chartData,
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
format: '{point.name}',
filter: {
property: 'innerArcLength',
operator: '>',
value: 16
}
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
}
}
}, {
level: 2,
colorByPoint: true
},
{
level: 3,
colorVariation: {
key: 'brightness',
to: -0.5
}
}, {
level: 4,
colorVariation: {
key: 'brightness',
to: 0.5
}
}]
}]
};
"
getting the below error.
ERROR Error: Highcharts error #17: www.highcharts.com/errors/17
at c.Chart.h (highcharts.js:12) "
Can anyone help me what i am missing in my code
You need to import and initialize the sunburst module:
import * as Highcharts from 'highcharts';
import HC_sunburst from 'highcharts/modules/sunburst';
HC_sunburst(Highcharts);
Docs: https://github.com/highcharts/highcharts-angular#to-load-a-module
The sunburst chart requires the following module modules/sunburst.js.
Sunburst.js location:
https://code.highcharts.com/modules/sunburst.js
API Reference:
https://www.highcharts.com/docs/chart-and-series-types/sunburst-series
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.
I'm kind of new to morris.js and finally got some things work except I don't get how to change values. On the bottom of the charts are years, but I'd like to do distances (let's say KM's / or Miles) and left side minutes.
Example:
Does anyone know how to get this working?
I'm using the following code:
<script>
Morris.Area({
element: 'pace',
data: [
{ distance: '1km', value: 4.30 },
{ distance: '2km', value: 4.35 },
{ distance: '3km', value: 4.21 },
{ distance: '4km', value: 4.30 },
{ distance: '5km', value: 4.35 },
{ distance: '6km', value: 4.35 },
{ distance: '7km', value: 4.30 },
{ distance: '8km', value: 4.40 },
{ distance: '9km', value: 4.34 },
{ distance: '10km', value: 4.32 },
{ distance: '11km', value: 4.20 },
{ distance: '12km', value: 4.19 }
],
xkey: 'distance',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
labels: ['Value'],
lineColors: ['#c20101'],
fillOpacity: 0.1,
pointFillColors: ['#9e0206']
});
</script>
According to https://morrisjs.github.io/morris.js/lines.html, it should work if you set your config like this:
parseTime: false,
xLabelFormat: function(x) { return x.label + ' km' }
Hope it helps
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).