I have a generic script to create charts for multiple graphs.
I want to populate multiple y axes, based on the json response I would get from the web API.
If my json is as below:
'{ "GraphName": "test", "GraphType": 0, "GraphOptionsCollection": [{ "yLabel": "label1", "yAxisPosition": 0, "backgroundColor": "blue", , "name": "prop1" }, { "yLabel": "label2", "yAxisPosition": 1, "backgroundColor": "yellow", "name": "prop2" }] }';
would it be possible to dynamically add a new y axis to chart.options.yAxes collection?
You can update chart options and then call update() method on your chart instance.
For example:
initially create a secondary Y axe with display: false;
update secondary Y axe options when needed and then update chart
See my fiddle: https://jsfiddle.net/beaver71/hw8ozgh4/
Related
I created a graph where it is possible to add several Y and X axes and change between them, comparing the data between one and the other, but when I try to place more than one point per dataset, the graph breaks
the code:
JSfiddle
I'm trying to add more than one data (point) per dataset, each dataset must contain about 10 points for comparison, but when I add one more array inside Value, I can't display it on the chart or filter, like this:
const data = {
datasets: [{
label: "Dataset 1",
data: [{
Value: {
Height: 4,
Width: 2,
Weight: 3
},{
Height: 5,
Width: 3,
Weight: 2
}
}],
parsing: {
xAxisKey: "Value.Width",
yAxisKey: "Value.Height"
}
} ...
Using C3.js, I am trying to generate a graph whose x-axis is a linear list of kilometres, and y-axis is the corresponding time - in format MM:SS.
The best I have been able to generate is the result of the below, which is the reverse of what I'm looking for. This produces a graph with times on the x-axis and kilometres on the y-axis. Could anyone advise how I could convert the below to a generate a graph with the x-axis KMs, and y-axis times. Thank you.
var km_chart = c3.generate({
"data": {
"x": "time",
"y": "kms",
"columns": [
["time", "04:00", "04:00", "04:15", "04:30", "04:15"],
["kms", 1, 2, 3, 4, 5]
]
},
"axis": {
"x": {
"type": "category"
}
},
"bindto": "#km_chart"
});
The simpliest solution would be to rotate your graph with:
"axis":{
<your stuff>
rotate: true
}
The y-axis is only accepting values, so you can switch your x/y-axis with rotate or you have to convert your time into some value. You could use 1234 as 12:34 for example.
I'm trying to figure out how to make a dynamic bar chart using CanvasJs.
The basic set up for the chart is as follows:
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",//theme1
title:{
text: "Basic Column Chart - CanvasJS"
},
animationEnabled: false, // change to true
data: [
{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
My goal is to use a simple variable to update the dataPoints instead of static numbers such as 10,15, 25.
User's will input numbers and the chart should update based on their input.
Is this possible to do? Setting "Y" to a variable breaks the chart thus far. I'm unsure how to make this work.
I've also tried setting var input = $('input').html
and setting y as input but it does not work.
Thanks!
If anyone else is trying to figure this out here is how this is handled:
Use variable to assign data points in creating CanvasJS graph?.
This also works with Charts.JS.
JS FIDDLE
I am using ChartJs http://www.chartjs.org/ in my project.
While using Line Chart, I populate data with numbers. The requirement is to convert the numbers to lacs/crores.
When I convert the numbers to lacs/crores & apply these values to the Chart, the Chart doesn't display any lines, but i can see the actual data converted in lacs/crores as a tooltip.
var lineChartData = {
"datasets": [{
"data": [
numConvertion(10000000),
numConvertion(12000000),
numConvertion(18000000),
numConvertion(22000000)],
"pointStrokeColor": "#fff",
"fillColor": "rgba(220,220,220,0.5)",
"pointColor": "rgba(220,220,220,1)",
"strokeColor": "rgba(220,220,220,1)"
}],
"labels": [
"Jun-2015",
"July-2015",
"Aug-2015",
"Sep-2015", ]
};
How to solve this issue for displaying numbers in lacs/crores format in chart.js?
You should use the chart's scaleLabel option to format your Y axis label. I have updated the jsfiddle
I am trying to create a fiddle, mocking up the image attached
in following jsfiddle
http://jsfiddle.net/2TuCW/162/
The problem is I want the plotLines between blue line and green column.
I tried changing the zIndexes of plotLines (10) , between blue line (15) and green column (5) in following fiddle
http://jsfiddle.net/2TuCW/163/
//plotLines zIndex
"plotLines" : [
{
"color": '#E5E7EB',
"zIndex": 10,
"width": 2,
"value": 20
},
....
....
//Series data z-index
"series": [{
"type":"column",
"data": [35,39,49,50,57,58],
"zIndex":5
....
....
"series": [{
"type":"line",
"data": [35,39,49,50,57,58],
"zIndex":15
But it is not working as expected. Please suggest how to achieve it.
It is related with fact that all series have the same zIndex.
Related topic: https://github.com/highslide-software/highcharts.com/issues/3321
Try to adjust the values of the plotLines.
If you want a plot line to be between blue line and green column the value of the plotLines has to be between the data of blue line and data of column.
Unfortunately, it seems that plotLines can either be in front of all series or behind all series. This is because all series are grouped under a common element. A plotLine element is a sibling to the group element, not a sibling to the individual series elements.
This issue relates to the fact that all series are drawn within the same group, and therefore have the same z-index related to other groups. A related GitHub issue has discussion and code examples.
See this one example solution, proposed by Torstein Hønsi (Highcharts creator). I've made a modified, minimal, reproducible example here:
/**
* Plugin to allow plot band Z indexes in between series
*/
Highcharts.wrap(Highcharts.PlotLineOrBand.prototype, 'render', function (proceed) {
var chart = this.axis.chart;
proceed.call(this);
if (!chart.seriesGroup) {
chart.seriesGroup = chart.renderer.g('series-group')
.attr({ zIndex: 3 })
.add();
}
if (this.svgElem.parentGroup !== chart.seriesGroup) {
this.svgElem
.attr({ zIndex: this.options.zIndex })
.add(chart.seriesGroup);
}
return this;
});
Highcharts.chart('container', {
xAxis: {
plotLines: [{
color: 'red',
width: 2,
value: 3.5,
zIndex: 10
}]
},
series: [{
data: [7988, 12169, 15112, 22452, 34400, 34227],
zIndex: 9
}, {
data: [8105, 11248, 8989, 11816, 18274, 18111],
zIndex: 11
}]
});
The code uses Torsteins plugin to allow the plotline in between series. See the GitHub issues for discussion on caveats and potential improvements.