It is necessary that all lines had different colors
The lines can be a maximum of 10 pieces
help me please
http://demos.telerik.com/kendo-ui/bar-charts/stacked-bar (It was not possible to make different color lines in each category :( )
You can use the colorField property (API: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.colorField)
var data = [
{x: "Name 1", y: 16, valueColor: "#556270"},
{x: "Name 2", y: 13, valueColor: "#4ECDC4"},
{x: "Name 3", y: 15, valueColor: "#C7F464"},
{x: "Name 4", y: 14, valueColor: "#FF6B6B"},
{x: "Name 5", y: 16, valueColor: "#C44D58"},
];
$("#chart").kendoChart({
dataSource: data,
series: [{
type: "bar",
field: "y",
categoryField: "x",
colorField: "valueColor"
}],
});
DEMO
Related
I have a line plot created using d3plus, and I need to have multiple line annotations (one horizontal and two vertical) with Shape labels to identify them. I am able to get the lines to show properly, but I am unable to get multiple labels to show up on the graph.
Here is my set of data:
[
{"id":"line","myDate":"Sep 2011","value":8303269},
{"id":"line","myDate":"Jul 2012","value":8389066},
{"id":"line","myDate":"Sep 2012","value":8632844},
{"id":"line","myDate":"Mar 2013","value":8926414},
{"id":"line","myDate":"Jun 2013","value":9169985},
{"id":"line","myDate":"Mar 2014","value":9273689},
{"id":"line","myDate":"Sep 2014","value":9343712},
{"id":"line","myDate":"Dec 2014","value":9416974},
{"id":"line","myDate":"May 2015","value":9546380},
{"id":"line","myDate":"Sep 2015","value":10484320},
{"id":"line","myDate":"Sep 2015","value":11455165},
{"id":"line","myDate":"Dec 2015","value":11997581},
{"id":"line","myDate":"Apr 2016","value":12104931},
{"id":"line","myDate":"May 2016","value":12111915},
{"id":"line","myDate":"Jun 2016","value":12127119},
{"id":"line","myDate":"Jul 2016","value":12800226},
{"id":"line","myDate":"Mar 2017","value":12915303},
{"id":"line","myDate":"Nov 2017","value":12947360},
{"id":"line","myDate":"Nov 2018","value":12957309}
]
and here is my LinePlot annotations array.
new LinePlot()
.select("#demo")
.height(500)
.config({
data: vm.plotData,
x: 'myDate',
y: 'value',
groupBy: 'id',
annotations: [
{
data: [
{id: "start", x: "Jul 2012", y: 8000000},
{id: "start", x: "Jul 2012", y: 20000000},
{id: "end", x: "Nov 2017", y: 8000000},
{id: "end", x: "Nov 2017", y: 20000000},
{id: "dotted", x: "Sep 2011", y: this.item.ceilingValue},
{id: "dotted", x: "Nov 2018", y: this.item.ceilingValue}
],
shape: "Line",
stroke: function(d) {
return d.id === "box" ? "blue" : "green";
},
strokeDasharray: "10",
strokeWidth: 2
},
{
data: [
{
x: 'Jul 2012',
y: 20000000,
width: 100,
height: 25
}
],
fill: "#0c1971",
label: "Start Date",
labelConfig: {
textAnchor: "middle",
verticalAlign: "middle"
},
shape: "Rect"
},
{
data: [
{
x: 'Nov 2017',
y: 20000000,
width: 10,
height: 25
}
],
fill: "#255832",
label: "End Date",
labelConfig: {
textAnchor: "middle",
verticalAlign: "middle"
},
shape: "Rect"
}
]
})
.render()
What happens is that when I just have the Start Date item, it works fine, but when I add the End Date object, the first one disappears, and the second one isn't fully rendered.
According to the docs, annotations accepts
custom config objects for the Shape class, either a single config object or an array of config objects.`,
which is what I've provided, so I'm not sure where the problem is. What do I need to change to get all of my labels to appear properly?
I was able to figure it out based on this comment. The gist is that you have to combine all items of a particular Shape into one object:
annotations: [
{
data: [
{id: "start", x: "Jul 2012", y: 8000000},
{id: "start", x: "Jul 2012", y: 20000000},
{id: "end", x: "Nov 2017", y: 8000000},
{id: "end", x: "Nov 2017", y: 20000000},
{id: "dotted", x: "Sep 2011", y: this.item.ceilingValue},
{id: "dotted", x: "Nov 2018", y: this.item.ceilingValue}
],
shape: "Line",
stroke: function(d) {
return d.id === "box" ? "blue" : "green";
},
strokeDasharray: "10",
strokeWidth: 2
},
{
data: [
{
id: 'start',
label: 'Start Date',
x: 'Jul 2012',
y: 20000000,
width: 100,
height: 25
},
{
id: 'end',
label: 'End Date',
x: 'Nov 2017',
y: 20000000,
width: 100,
height: 25
}
],
fill: function(d) {
let result;
switch (d.id) {
case 'start':
result = "#0c1971";
break;
case 'end':
result = "#255832";
break;
}
return result;
},
label: function (d) {
let result;
switch (d.id) {
case 'start':
result = "Start Date";
break;
case 'end':
result = "End Date";
break;
}
return result;
},
labelConfig: {
textAnchor: "middle",
verticalAlign: "middle"
},
shape: "Rect"
}
]
I use canvasJS to make a line graph report, the issue now is it didn't show properly in tooltip using yValueFormatString.
my goal is to display the value:
{
type:"stepLine",
name: "title",
showInLegend: true,
connectNullData: true,
yValueFormatString: "##.## %",
dataPoints: [
{ x: new Date(2019, 1, 20), y: 12.78 },
{ x: new Date(2019, 1, 19), y: 12.79 },
{ x: new Date(2019, 1, 18), y: 12.80 },
]
}
in tooltip, it shows
1278 %
1279 %
1280 %
I think there's something wrong with it, I wanted to display like:
12.78 %
12.79 %
12.80 %
any idea?
According to documentation, "%" Multiplies a number by 100 i.e. 12.78("##.## %") => 1278%. Instead setting yValueFormatString to "##.#0 '%'" should work fine in this case.
Here is an example:
var chart = new CanvasJS.Chart("chartContainer", {
data: [{
type:"stepLine",
name: "title",
showInLegend: true,
connectNullData: true,
yValueFormatString: "##.#0 '%'",
dataPoints: [
{ x: new Date(2019, 1, 20), y: 12.78 },
{ x: new Date(2019, 1, 19), y: 12.79 },
{ x: new Date(2019, 1, 18), y: 12.80 },
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="width: 100%; height: 260px"></div>
I want to generate an array of charts and insert them into the DOM.
(I want to use these charts as templates and insert them at the right time)
like that:
Var array = [];
array[0].kendoChart ({// .........});
array[1].kendoChart ({// .........});
array.forEach (function (el) {
$('body').append(el);
})
Tell me how to be?
I would keep an array of the data used to generate the charts, and then generate them at the time of insert.
In HTML provide a container for the charts to be inserted (could be body as in your example):
<div id="chartsContainer" ></div>
Then in script have an array of the data needed to generate the multiple charts, e.g. :
var charts = [
{
chartid: "id1", title: "Chart 1",
data: [{ x: "item1", y: 2}, { x: "item2", y: 4},{ x: "item3", y: 1}]
},
{
chartid: "id2", title: "Chart 2",
data: [{ x: "item1", y: 8}, { x: "item2", y: 3},{ x: "item3", y: 7},{ x: "item4", y: 2}]
},
{
chartid: "id3", title: "Chart 3",
data: [{ x: "item1", y: 1}, { x: "item2", y: 2},{ x: "item3", y: 4} ]
},
];
Finally loop through the array, insert DIVs in the container and create a chart in each DIV:
$("#chartsContainer").empty();
var arrayLength = charts.length;
for (var i = 0; i < arrayLength; i++) {
var div = $('<div id="' + charts[i].chartid + '"></div>');
$("#chartsContainer").append(div);
div.kendoChart({
theme: "Flat",
chartArea: { height: 200 },
dataSource: {data: charts[i].data },
title: { text: charts[i].title},
seriesDefaults: {type: "column"},
series: [{field: "y" }],
categoryAxis: {
field: "x",
majorGridLines: {visible: false },
}
});
}
Working DEMO
As I keep adding dimensions to my data set, I encounter an issue of having my bar chart not displaying values of my "account" dimension.
Here is my current fiddle: https://jsfiddle.net/eugene_goldberg/yv3nnred/18/
var data = [
{date: "2015-03-25T12:10:00", resolver: "Group 1", escalation_pct: 20, bubble: 5,account: "Aon", region: "Americas", x: 1},
{date: "2015-03-25T12:15:00", resolver: "Group 2", escalation_pct: 10, bubble: 5,account: "Boeing", region: "AMEA", x: 1},
{date: "2015-03-25T12:25:00", resolver: "Group 3", escalation_pct: 50, bubble: 10,account: "Zurich", region: "Nordics", x: 1},
{date: "2015-03-25T12:40:00", resolver: "Group 4", escalation_pct: 30, bubble: 1,account: "Aon", region: "Americas", x: 1},
{date: "2015-03-25T12:35:00", resolver: "Group 5", escalation_pct: 5, bubble: 10,account: "Boeing", region: "Australia", x: 1},
{date: "2015-03-25T12:45:00", resolver: "Group 6", escalation_pct: 13, bubble: 1,account: "Zurich", region: "UK&I", x: 1}
];
var dimAccount = ndx.dimension(function(d) {return + d.account;});
var accountGroup = dimAccount.group().reduceSum(function(d) {return d.x});
var accountChart = dc.barChart("#account-chart");
accountChart.width(480)
.height(150)
.dimension(dimAccount)
.group(accountGroup)
.x(d3.scale.linear().domain([0, 10]))
.elasticY(true)
.xAxis().tickFormat();
It must be something very basic, I'm just not grasping it yet...
In my case, going with a row chart was what I needed.
A fully working fiddle is below:
https://jsfiddle.net/eugene_goldberg/yv3nnred/25/
var dimAccount = ndx.dimension(function(d) {return d.account;});
var accountGroup = dimAccount.group().reduceSum(function (d) {
return d.x;
});
var accountChart = dc.rowChart("#account-chart");
accountChart
.width(500)
.height(500)
.dimension(dimAccount)
.group(accountGroup);
A row chart works good. But another option is a selectmenu, because the height of the bar doesnt represent anything you could have a simple dropdown menu with the options.
(dc.selectMenu on 2.1 branch)
Currently, it seems that CanvasJS only supports angling labels in one direction (with the baseline on the left), as shown in the image below. I would like to rotate the text in the opposite direction (With the baseline for the text being on the right), as shown by the arrows.
So far, I have tried setting the axisX labelAngle to 90, 270, -45, -90, and -270. None of these have resulted in shifting the baseline to the right like I want, and have all forced the text to a max of 90 degrees with the baseline on the left.
Is this possible in the current version? #Devs: If not available in current version, would it be possible to add in support for this?
You can set angle to negative value to make it rotated the other way-round, as shown in this screenshot.
Here is an example.
var chart = new CanvasJS.Chart("chartContainer",
{
axisX:{
title: "labels at -45 deg",
labelAngle: -45
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71, label: "cat 1" },
{ x: 20, y: 55, label: "cat 2" },
{ x: 30, y: 50, label: "cat 3" },
{ x: 40, y: 65, label: "cat 4" },
{ x: 50, y: 95, label: "cat 5" },
{ x: 60, y: 68, label: "cat 6" },
{ x: 70, y: 28, label: "cat 7" },
{ x: 80, y: 34, label: "cat 8" },
{ x: 90, y: 14, label: "cat 9" }
]
}
]
});
chart.render();
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>