I have different libraries which I am trying to figure our which one works with multiple markers on same single series line chart.
Lets say 1 series is there v = [11, 12, 43, 21, 22]
I want point 11 to be rectangular, 12 to be concentric circle, 43 to be square and 21 and 22 be circle.
I tried going through the docs but could not find anything.
Please let me know if its possible on ZingChart, devexpress chart, telerik chart, flot chart, fusion chart or wijmo chart angularJs libraries.
You can do this with ZingChart very easily. We have a jsRule which allows you to define a function. Within the function you return our marker syntax to change the style of the marker or node as its most common name.
Another way is to explicitly code the syntax within our rules which is a hardcoded form of jsRule.
I have added both in the following demo. You can add any attributes from the marker object into the following syntax.
/*
* callback argument format:
{
"id":"myChart",
"graphid":"myChart-graph-id0",
"graphindex":0,
"plotid":"",
"plotindex":0,
"nodeindex":7,
"key":7,
"scaleval":7,
"scaletext":"7",
"value":85,
"text":"%v",
"ev":null
}
*/
window.changeMarker = function(e) {
// this function is called once for every node
var returnObj = {
type: 'square'
}
if (e.nodeindex % 2 == 0) {
returnObj.type = 'star5';
returnObj.backgroundColor = 'black';
returnObj.size = 10;
}
// you can put any sort of logic to transform the marker nodes
//console.log(JSON.stringify(e))
return returnObj;
}
var myConfig = {
type: 'line',
series: [
{
values: [35,42,67,89,25,34,67,85],
marker: {
jsRule: 'changeMarker()'
}
},
{ // you can also explicitly set them with rules
values: [135,142,167,189,125,134,167,185],
marker: {
rules: [
{
rule: '%i == 0',
type: 'square'
},
{
rule: '%i == 1',
type: 'triangle',
size:10
},
{
rule: '%i == 2',
type: 'star5'
},
{
rule: '%i == 3',
type: 'diamond',
backgroundColor: 'black'
},
{
rule: '%i == 4',
type: 'plus',
size:15
},
{
rule: '%i == 5',
type: 'star3',
size:12
},
{
rule: '%i == 6',
type: 'rpoly6',
size:9
},
{
rule: '%i == 7',
type: 'star4',
size: 6
}
]
}
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
References:
https://blog.zingchart.com/2016/05/09/make-a-custom-tooltip/?q=make%20a%20custom%20tooltip%20in%20zingchart%20using%20functions
https://www.zingchart.com/docs/tutorials/chart-elements/create-javascript-rules/
https://www.zingchart.com/docs/api/json-configuration/graphset/plot/marker/
https://www.zingchart.com/docs/api/json-configuration/graphset/plot/rules/
Related
I have three time series which are plotted on the same graph using null values so that only one series is displayed for any one time, basically to get different colouring for rising and falling points.
Does anyone know how I can link the points together with lines even though they are from different series? I know with a bar chart you can use a group feature for different series to have them display on top of each other, however this doesn't seem to work for line. Here is a picture of the unconnected dots:
If you present the data to C3 as separate series with nulls where the series should not plot, then you get something like your required affect. In this snippet I have used two series - you would want a series per rising and falling set of points.
var chart = c3.generate(
{
bindto: '#chart',
size: {
width: 600,
height: 180
},
data: {
x: 'xLabels',
columns: [
['xLabels', '2015-09-17 00:00:00','2015-09-18 00:00:00','2015-09-19 00:00:00','2015-09-20 00:00:00','2015-09-21 00:00:00','2015-09-22 00:00:00','2015-09-23 00:00:00','2015-09-24 00:00:00'],
['data1', 5,10,12,17,null,null,null,null],
['data2', null,null,null,null,17,13,12,11],
['data3', null,null,null,17,17,null,null,null],
],
xFormat: '%Y-%m-%d %H:%M:%S', // ### IMPORTANT - this is how d3 understands the date formatted in the xLabels array
types: {
'data1': 'area-spline',
'data2': 'area-spline',
'data3': 'line'
},
colors: {
data3: '#cccccc'
}
},
point: {
show: true
},
legend: {
position: 'inset',
inset: {
anchor: 'top-left',
x: 20,
y: 10,
step: 2
}
},
axis: {
y: {
tick: {
format: function (d) { return d + "%"; }
}
},
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d' // how the date is displayed
}
}
},
tooltip:{
format:{
title:function (x) { return x.getDate() + "/" + x.getMonth() + "/" + x.getFullYear() + " " + x.getHours()+ ":" + x.getMinutes() },
}
}
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.js"></script>
<div class='chart-wrapper'>
<div class='chat' id="chart"></div>
</div>
I have been trying to add plotBands by date on a kendo chart as in the snippet. plotBands doesn't seems to be at the correct position.
Note the TimeWindows object at the snippet. It should start after the first point.
tideSet is the object with Tides and TideWindows collections
How can I configure plotBands in the correct positions?
var tideSet={
"Tides":[
{
"timeStamp":"2018-07-24T00:33:00",
"pred":0.660
},
{
"timeStamp":"2018-07-24T06:09:00",
"pred":6.350
},
{
"timeStamp":"2018-07-24T12:32:00",
"pred":0.400
},
{
"timeStamp":"2018-07-24T18:51:00",
"pred":7.410
},
{
"timeStamp":"2018-07-25T01:19:00",
"pred":0.570
},
{
"timeStamp":"2018-07-25T06:58:00",
"pred":6.380
}
],
"TideWindows":[
{
"WindowsStart":"2018-07-24T02:03:00",
"WindowEnd":"2018-07-24T08:39:00"
}
]
};
var plots = new Array();
for (var i = 0; i < tideSet.TideWindows.length; i++) {
plots.push(
{
from: new Date(tideSet.TideWindows[i].WindowsStart),
to: new Date(tideSet.TideWindows[i].WindowEnd),
color: "#007eff"
});
}
$("#kendoChartTides").kendoChart({
dataSource: {
data: tideSet.Tides,
schema: {
model: {
fields: {
pred: { type: "string" },
timeStamp: { type: "date" }
}
}
}
},
series: [{
type: "line",
style: "smooth",
field: "pred",
categoryField: "timeStamp"
}],
title: {
text: "Tides"
},
valueAxis: {
title: {
text: "Predictions"
}
},
categoryAxis: {
field: "timeStamp",
type: "date",
labels: {
rotation: 40,
template: "#= kendo.format('{0:dd/HH:mm}', new Date(value)) #"
},
baseUnit:"minutes",
baseUnitStep: "auto",
plotBands: plots
},
tooltip:
{
visible: true,
template: "#= kendo.format('{0:dd/HH:mm}', new Date(category)) # <br /> Value: #= value # "
}
});
<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script></head>
<div id="kendoChartTides"> </div>
This happens because the plot bands are aligned to the category axis' steps. You currently have your chart's baseUnitStep to "auto". This causes the steps to be too far apart and your plot bands get "rounded" to the nearest steps, so to speak. Here's what you can do to work around this problem:
Change the baseUnitStep to 1. This will give you a precision of 1
minute for your plot bands. However this will also result in grid
lines and axis labels at an interval of 1 minute, which will be slow
and look horrible. We'll fix that in the following steps.
Add a step value of 180 (or similar) to your labels' config. This will make the
category labels appear every 3 hours.
Add a majorGridLines configuration section and set the step of the grid lines to 180, so that they appear as frequently as the labels.
Add a majorTicks config section and set the step interval to 60 or something.
Your categoryAxis config section should look similar to this:
categoryAxis: {
field: "timeStamp",
type: "date",
labels: {
rotation: 40,
template: "#= kendo.format('{0:dd/HH:mm}', new Date(value)) #",
step: 180
},
baseUnit:"minutes",
baseUnitStep: 1,
plotBands: plots,
majorTicks: {
step: 60
},
majorGridLines: {
visible: true,
step: 180
}
}
You can see your code snippet with these changes on this dojo: https://dojo.telerik.com/EFEjezoR
Bottom of highcharts rendered chart in pdf
I am attempting to render a highcharts chart inside a blade template and then pass the resulting view/html to DocRaptor in order to turn it into a pdf. The view is rendered with Laravel's View::make and then the render() function. Everything is working as expected except the rendered bars do not match up to the tick marks on the yAxis (horizontal).
I've included an image of what I'm referring to. In the image 2 of the bars (Saturn and Lexus) should be past the 1M tick and I would expect Acura to be further right towards the 1M tick mark. The image only contains the last 3 bars in the graph, but the same holds true for the series as whole.
Less relevent is that I've essentially split up the series data into small enough chunks such that the chart would fit on a page (hence the jQuery $.each()).
The code that produces the chart is below. The code inside the load and render functions are both executed as the document.write debug statements. Any help/ideas would be appreciated.
$("div[id^='Chart_chunk_count_']").each(function() {
var myChart = Highcharts.chart($(this).attr("id"), {
chart: {
borderWidth: 0,
events: {
load: function(event) {
document.write('In load event');
},
render: function(event) {
document.write('In render event');
}
},
height: j_audience_chart_chunks['metadata']['page'][$(this).data("chart-page")]['height'],
type: 'bar',
width: 650
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
bar: {
borderRadius: 3,
borderWidth: 0,
color: j_audience_chart_chunks['metadata']['count_chart']['color'],
pointWidth: 30,
turboThreshold: 0
},
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
/* allowOverlap: true, */
/* backgroundColor: '#FA9005', */
color: '#606060',
crop: false,
defer: false,
enabled: true,
format: '{point.y:,.0f}',
inside: true,
/* overflow: 'none', */
style: {
fontSize: "11px",
fontWeight: "normal",
textOutline: 'none'
}
}
}
},
title: {
text: (type == "index") ? "Index Against Profiled Audience" : "Audience Count"
},
tooltip: {
enabled: false
},
xAxis: {
categories: j_audience_chart_chunks['audience_data'][$(this).data("chart-page")]['categories'],
minorTickInterval: null,
title: {
text: null
}
},
yAxis: {
min: (type == 'count') ? 0 : -100,
max: j_audience_chart_chunks['metadata']['count_chart']['max'],
title: {
text: null
},
labels: {
/* format: '{point.y:,.0f}', */
overflow: 'justify'
/*
style: {
color: '#fa9005'
}
*/
}
},
series: j_audience_chart_chunks['audience_data'][$(this).data("chart-page")]['series']
});
});
What's happening is that the JavaScript finishes and DocRaptor/Prince begins building the PDF, but the default Highcharts animations haven't finished running. Disabling animations chart wide fixes this.
You need set chart.animation to false like:
chart: {
animation: false
}
Help me, please.
How to change the labels to the image (icon) in bar chart.js ?
I mean, change from this
change labels: "LifeWall_files/logo.png","Bodily Functions","Sleep"
to this
bottom icons
The easiest way to do this would be to get a font that includes these icons and then set the font family for the ticks
...
options: {
scales: {
xAxes: [{
ticks: {
fontFamily: 'FontAwesome'
}
}]
}
}
};
and then specify the appropriate character codes in your labels
labels: ["\uf24e", "\uf1b9", "\uf242", "\uf0fc", "\uf236"],
With the FontAwesome CSS, the above would give you
The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw images (icons) instead of tick labels directly on the canvas using CanvasRenderingContext2D.
You'll also have to instruct Chart.js not to display the default tick labels. This can be done through the following definition inside the chart options.
scales: {
xAxes: [{
ticks: {
display: false
}
}],
Further you need to define some padding at the bottom of the chart, otherwise you'll see only part of the images.
layout: {
padding: {
bottom: 30
}
},
Please have a look at the runnable code snippet below.
const labels = ['red vans', 'blue vans', 'green vans', 'gray vans'];
const images = ['https://i.stack.imgur.com/2RAv2.png', 'https://i.stack.imgur.com/Tq5DA.png', 'https://i.stack.imgur.com/3KRtW.png', 'https://i.stack.imgur.com/iLyVi.png'];
const values = [48, 56, 33, 44];
new Chart(document.getElementById("myChart"), {
type: "bar",
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
xAxis.ticks.forEach((value, index) => {
var x = xAxis.getPixelForTick(index);
var image = new Image();
image.src = images[index],
ctx.drawImage(image, x - 12, yAxis.bottom + 10);
});
}
}],
data: {
labels: labels,
datasets: [{
label: 'My Dataset',
data: values,
backgroundColor: ['red', 'blue', 'green', 'lightgray']
}]
},
options: {
responsive: true,
layout: {
padding: {
bottom: 30
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
display: false
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
How to draw a vertical line in a line chart using Html5 and kendo UI ? can anyone help me out to solve this problem ?
Try this:
// let chart be the id
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
data: [{
value: new Date(2012, 0, 3),
label: {
text: "-" //text you want to show
}
}]
}
}
});
Demo: http://jsbin.com/obuweca/26
/* WITHOUT CIRCLE */
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
icon: {
border: {
width: 0
}
},
// Initial notes
data: [{
value: new Date(2012, 0, 3)
}]
}
}
});
DEMO: http://jsbin.com/obuweca/29/
In kendo documentation is example how do draw custom lines on chart. Horizontal and vertical.
http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands
You can customize lines by editing stroke:
stroke: {
color: "red",
width: 1,
dashType:"dash"
}
You can also try to use the column-Chart.
Just extend the series:
series: [{
type: "line",
field: "value",
categoryField: "date"
},
{
type:"column",
field: "valueColumn",
gap: 300
}]
and the dataSource.data with a new field like: valueColumn.
See also the Example.