I have implemented the following project. There are two lines on the chart.
However, I want to change position of x axis to move 0 at the center.
seriesDefaults: {
type: "scatterLine",
},
series: [{
name: "Path1",
data: stats,
markers: {
visible: false,
color: 'red'
}
}, {
name: "Path2",
data: stats2,
markers: {
visible: false
}
}],
http://jsfiddle.net/3yhbyy2g/13/
I need to customize x axis and reverse the datasource to display as follows:
Here is the solution:
All I did is to add the following lines of code:
min:-5000,
axisCrossingValue: [-5000, 0],
http://jsfiddle.net/3yhbyy2g/19/
Related
My Y axis is four categories.
My X Axis is 6 categories.
I won't always have data for each, but I need to show the tick marks all the times.
I've gone with inserting 0 counts for points that I don't want to show. But that still triggers mouseover events for hovering (which seems to be unacceptable). When I filter our the non-data all my tick marks go away.
Any suggestions?
Try 'null' instead of '0'
Here, 'gnu' still shows up as a category
var chart = c3.generate({
data: {
xs: {
setosa: 'setosa_x',
versicolor: 'versicolor_x',
},
// iris data from R
columns: [
["setosa_x", "ant", "bat", "cat", "dog"],
["versicolor_x", "eel", "fox", "gnu", "hen"],
["setosa", "0.2, 0.2, 0.2, 0.2"],
["versicolor", 1.3, 1.3, null, 1.3],
],
type: 'scatter'
},
axis: {
x: {
label: 'Sepal.Width',
tick: {
fit: false
},
type: "category"
},
y: {
label: 'Petal.Width',
type: "category"
}
}
});
Working with tooltips in Highcharts I can see that not all type of series are included in the same tooltip. In the definition of my Highcharts object the property of tooltip look like:
tooltip: {
positioner : function (boxWidth, boxHeight, point) {
return {
x : point.plotX - 100,
y : point.plotY
};
},
shared : true
}
And how I am setting the tooltip property for each series is:
public getDefaultTooltip() {
return {
pointFormat : '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} </b><br/>'
};
}
After read the documentation of tooltip I can see that shared property is not valid for series of type 'scatter', what is exactly the type of series that is not working for me. So, is there some workaround in order to make available all the data in the same shared tooltip?
in the example bellow I want to show all the series data in the same tooltip but the scatter serie is using a different popover. http://jsfiddle.net/rolandomartinezg/a6c4c4tv/1/
The ScatterSeries is defined in highcharts with noSharedTooltip = true. I think this is because the scatter series show both the x and y in their tooltips.
var ScatterSeries = extendClass(Series, {
type: 'scatter',
sorted: false,
requireSorting: false,
noSharedTooltip: true,
trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
takeOrdinalPosition: false, // #2342
kdDimensions: 2,
kdComparer: 'distR',
drawGraph: function () {
if (this.options.lineWidth) {
Series.prototype.drawGraph.call(this);
}
}
});
To get around this, you can use a line series instead of the scatter series with the lineWidth = 0. You also need to turn off the hover state for the series to avoid the line showing up on hover.
, {
type: 'line',
name: 'Average',
lineWidth: 0,
states: {
hover: {
enabled: false
}
},
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}
http://jsfiddle.net/a6c4c4tv/2/
when the values of y axis are all 0, the 0 line runs at the middle of the chart which is not very good-looking. I want to push the 0 line to the bottom of the chart. I tried the solution on this post but not working
Highcharts: Ensure y-Axis 0 value is at chart bottom
http://jsfiddle.net/tZayD/58/
$(function () {
$('#container5').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['mon','tue','wed','thu','fri','sat']
},
yAxis: {
title: {text: ''},
min:0
},
series: [{
name: 'Total Appts',
data: [0,0,0,0,0,0]
}, {
name: 'Confirmed',
data: [0,0,0,0,0,0]
}, {
name: 'no-shows',
data: [0,0,0,0,0,0]
}]
});
})
To make the 0 "yValue" appear at the bottom of a chart instead of floating in the middle of the chart space you need to set the yAxis.max value as well. Set it to some arbitrary value that is within you expected value range.
To remove the gridlines and just have the 0 "yValue" grid you can set the gridLineWidth to 0.
Sample:
yAxis: {
title: {text: ''},
min:0,
max: 10,
gridLineWidth: 0
},
Trying to Style up the Bullet Graph to be exactly as Marketing desires. The desired Graph looks like:
How do you add the labels at the top of the bars?
I've tried to set the labels property from the Kendo Documentation:
labels:
{
visible: true,
format: "{0}",
font: "14px Arial",
},
Here is my script that isn't working:
$barChart = $("#bar-chart").empty();
$barChart.kendoChart({
theme: global.app.chartsTheme,
renderAs: "svg",
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column"
},
series: [
{
type: "verticalBullet",
currentField: "score",
targetField: "average",
target: {
color: "#444",
dashType: "dot",
line: {
width: 1,
}
},
labels:
{
visible: true,
format: "{0}",
font: "14px Arial",
},
data: [
{
score: 93.7,
average: 65.2,
}, {
score: 80.2,
average: 22.2,
}, {
score: 60.8,
average: 35.2,
}, {
score: 82.1,
average: 45.2,
}, {
score: 74.2,
average: 55.2,
}
]
}
],
categoryAxis: {
labels: { rotation: -45 },
categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
line: {
visible: false
},
color: "#444",
axisCrossingValue: [0, 0, 100, 100]
},
tooltip: {
visible: false
}
}).data("kendoChart");
Any help would be greatly appreciated.
Because this is not a supported feature, any attempt to do this is by it's nature a hack. I had a look at kendo demo and noticed that there is a tooltip element with class k-tooltip that contains the total for a bar on mouseover. You should take a look into that mouseover to display the totals.
What you're attempting to do is possible. I've created an example on our Try Kendo UI site here: http://trykendoui.telerik.com/#jbristowe/aDIf/7
To recap, bullet charts don't support that type of label you need, and bar charts don't support the visual you need (the special line on the chart).
You could switch back to bar charts and write a custom visual. However, an easier way is to use a plotband on the value axis: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/valueaxis.plotbands
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
If you make a very narrow band, it will work pretty. It won't be dotted as in your reference image, and it will be behind the bar, which might be a problem... To go deeper, you would need a custom visual, and it's going to be involved: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.visual
I am expecting pretty weird problem with flot v.0.7. I have multiple axes, configured like that:
var plotData = [
{ data: data1 },
{ data: data2, yaxis: 2 }];
var options = {
selection: { mode: "x" },
xaxis: { mode: "time" },
yaxis: [
{ min: 0 },
{
min: 0,
position: "right",
zoomRange: false,
alignTicksWithAxis: 1,
tickFormatter: formatter,
}
],
grid: { markings: weekendAreas },
zoom: { interactive: true },
grid: {
clickable: true,
hoverable: true,
borderWidth: 1,
},
legend: { show: false },
};
var plot = $jq.plot(container, plotData, options);
But what I get is that both Y series are located on the right (not only second Y series). There is no formatter for my second series tick. Y values can be less then zero, if zooming. If I don't use array type for yaxis and define it as it would only be one series, then everything works fine. What am I doing wrong?
Instead of yaxis: [ ... ], use yaxes: [ ... ].
See the section of the docs entitled Multiple Axes for more info.