Here is my dataset
var dataset = [{ x: 0, y: 100 }, { x: 1, y: 833 }, { x: 2, y: 1312 },
{ x: 3, y: 1222 }, { x: 4, y: 1611 },
{ x: 0, y: 200 }, { x: 1, y: 933 }, { x: 2, y: 1412 },
{ x: 3, y: 1322 }, { x: 4, y: 1711 },]
I'm not sure where to specify the name of each dataset, How should this be modified to allow for a Group Name to be passed and what changes should be made in my D3.JS code ?
Fiddle https://jsfiddle.net/qvrL3ey5/
Using http://jsfiddle.net/2N2rt/15/ I was able to resolve this issue.
Example
var data = [
{name: 'John', values: [0,1,3,9, 8, 7]},
{name: 'Harry', values: [0, -100, 7, 1, 1, 111]},
{name: 'Steve', values: [3, 1, 4, 4, 4, 107]},
{name: 'Adam', values: [4, 77, 2, 13, 11, 130]}
];
Related
I'm having few documents which is of the form
{
...id information and so on,
coordinates: [{x, y}]
...few other indexes
}
I want to generate an elastic search aggregation which will combine whole coordinates array into a single array. For example
The documents are
[
{
...
coordinates: [
{x: 20, y: 30},
{x: 50, y: 10},
{x: 40, y: 20}
],
...
},
{
...
coordinates: [
{x: 10, y: 5},
{x: 20, y: 15},
{x: 60, y: 90},
{x: 70, y: 50}
],
...
},
{
...
coordinates: [
{x: 90, y: 20},
{x: 80, y: 70}
],
...
},
]
In the output I need to generate something like this using the aggregation
[
{x: 20, y: 30},
{x: 50, y: 10},
{x: 40, y: 20},
{x: 10, y: 5},
{x: 20, y: 15},
{x: 60, y: 90},
{x: 70, y: 50},
{x: 90, y: 20},
{x: 80, y: 70}
]
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 observed that while providing duplicate ticklabels (with an aim to mention the class of categorical variable), plotly creates a unique set and displays only the non-repeated tick labels. Is there a way to by-pass this feature and allow duplicate tick-labels?
var data = [
{
z: [[1, 20, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
x: ['Healthy', 'Healthy', 'Moderate', 'Diseased', 'Diseased'],
y: ['Morning', 'Afternoon', 'Evening'],
type: 'heatmap'
}
];
Plotly.newPlot('myDiv', data);
Following is the jsfiddle depicting the issue:
https://jsfiddle.net/mam8sgwx/
Set the layout with ticktext:
var layout = {
xaxis: {
tickmode: "array",
ticktext: ['Healthy', 'Healthy', 'Moderate', 'Diseased', 'Diseased'],
tickvals: [0, 1, 2, 3, 4]
}
}
Here is the demo:
var data = [{
z: [
[1, 20, 30, 50, 1],
[20, 1, 60, 80, 30],
[30, 60, 1, -10, 20]
],
y: ['Morning', 'Afternoon', 'Evening'],
type: 'heatmap'
}];
var layout = {
xaxis: {
tickmode: "array",
ticktext: ['Healthy', 'Healthy', 'Moderate', 'Diseased', 'Diseased'],
tickvals: [0, 1, 2, 3, 4]
}
}
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myDiv"></div>
I am using 2 chart of canvasjs plugin piechart and columnchart.
In piechart labels of the elements are so fine it uses all the spaces into content free but column chart if one label is length is big it skipped. But I dont want it to skip.
so this is my question, is there any way using labels(X-Axis only) in column chart(barchart) like just like in piechart ?
Thank you.
Note: I parse it, change it etc. everything comes up another problem if I interrupt the plugin itself so I need though solution.
Charts automatically skips label when they are too close to avoid overlapping. You can override this behavior by setting interval to 1.
Refer Axis X Interval for more detail.
Here is an example:
var chart = new CanvasJS.Chart("chartContainer",
{
axisX:{
title: "Axis X with interval 1",
interval: 1
},
data: [
{
type: "column",
dataPoints: [
{ x: 1, y: 71 },
{ x: 2, y: 55 },
{ x: 3, y: 50 },
{ x: 4, y: 65 },
{ x: 5, y: 95 },
{ x: 6, y: 68 },
{ x: 7, y: 28 },
{ x: 8, y: 34 },
{ x: 9, y: 14 },
{ x: 10, y: 14 },
{ x: 11, y: 71 },
{ x: 12, y: 55 },
{ x: 13, y: 50 },
{ x: 14, y: 65 },
{ x: 15, y: 95 },
{ x: 16, y: 68 },
{ x: 17, y: 28 },
{ x: 18, y: 34 },
{ x: 19, y: 14 }
]
}
]
});
chart.render();
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
Hi i tried to create a nvd3 multibarchart but i can't get x-axis display.
I searched online but cannot find a solution to my issue.
here is complete code please help. i also attached a pix for output. Thanks!
<script>
function data0() {
var a0 = [],
a1 = [];
a0.push({ x: 1, y: 5065});
a0.push({ x: 2, y: 11464});
a0.push({ x: 3, y: 200});
a0.push({ x: 4, y: 100});
a0.push({ x: 5, y: 0});
a0.push({ x: 6, y: 0});
a0.push({ x: 7, y: 100});
a0.push({ x: 8, y: 2200});
a0.push({ x: 9, y: 2200});
a0.push({ x: 10, y: 0});
a0.push({ x: 11, y: 0});
a0.push({ x: 12, y: 0});
a0.push({ x: 13, y: 0});
a0.push({ x: 14, y: 0});
a1.push({ x: 1, y: 148});
a1.push({ x: 2, y: 2966});
a1.push({ x: 3, y: 1200});
a1.push({ x: 4, y: 79});
a1.push({ x: 5, y: 0});
a1.push({ x: 6, y: 0});
a1.push({ x: 7, y: 0});
a1.push({ x: 8, y: 2185});
a1.push({ x: 9, y: 2185});
a1.push({ x: 10, y: 0});
a1.push({ x: 11, y: 0});
a1.push({ x: 12, y: 0});
a1.push({ x: 13, y: 0});
a1.push({ x: 14, y: 0});
return [
{
values: a1,
key: 'Queue',
color: '#04B45F'
},
{
values: a0,
key: 'In Progress',
color: '#DBA901',
area: true
}
];
}
nv.addGraph(function () {
var chart = nv.models.multiBarChart()
.margin({ left: 65, right: 40, bottom: 45 })
.stacked(true)
.showControls(false)
;
chart.xAxis
.axisLabel("Daily")
.rotateLabels(0)
.tickValues([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14])
.tickSize(12)
.showMaxMin(false)
.tickFormat(function (d) {
var _tools = ["", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N"]
return _tools[d]
});
chart.yAxis
.axisLabel("Number of[enter image description here][1]")
.tickFormat(d3.format(',.0f'));
d3.select('#BarChart-Cell svg')
.datum(data0)
.transition()
.duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});
</script>
[ http://i.stack.imgur.com/HNNJf.png ]