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/
have some problem with AMCharts library.
With Java have build a service which return datas in JSON format like this:
[{"datum":"2017-11-05 14:30:00","temperatura":17.2754,"slanost":38.0844},
{"datum":"2017-11-05 14:00:00","temperatura":17.1836,"slanost":38.1}]
What I want is to have datetime on x axis and temperature or / and salinity on y axis..
my html code is like this:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"dataLoader": {
"url": "rest/podatki/tempslajson"
},
"categoryField": "datum",
"dataDateFormat": "YYYY-MM-DD JJ:NN:SS",
"startDuration": 1,
"rotate": false,
"categoryAxis": {
"parseDates": true,
"minPeriod": "ss"
},
"graphs": [ {
"valueField": "temperatura",
"bullet": "round",
"bulletBorderColor": "#FFFFFF",
"bulletBorderThickness": 2,
"lineThickness ": 2,
"lineAlpha": 0.5
}]
} );
The problem is that I'm not shure if the dataDateFormat is right?!
the result I get is like this (but is wrong)
what I'am doing wrong?!
Date-based data must be in ascending order in AmCharts, as noted in the parseDates documentation. Per the docs:
Important: If this is set to true, the data points needs to come pre-ordered in ascending order. Data with incorrect order might result in visual and functional glitches on the chart.
Your sample data is in descending order, which is likely causing your issue.
I need to display string labels for y-Axis, with datetime as the x-Axis. My series data looks like -
data: [{"y":1.0,"x":1487548800000},{"y":1.0,"x":1487894400000},{"y":1.0,"x":1494547200000}]
The categories I am providing looks like - ["A","B","C","D"] where A can be mapped to 1.0, B to 2.0, C to 3.0, and so on.
my yAxis config is:
yAxis: {
categories: scope.defaultTag.yAxis!== undefined ? scope.defaultTag.yAxis.categories : null,
labels: {
formatter: function () {
return this.value;
}
}
}
What can I do to make the string labels appear instead of the numbers? Also, the graph is generic, and I can't hard code the categories.
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 use chart JS
var chartGood = "rgba(50,182,93,0.5)";
var lineChartData = {
labels : ["3/14","3/15","3/16","3/17","3/18","3/19","3/20","3/21","3/22","3/23"],
datasets : [
{
fillColor : chartGood,
strokeColor : "rgba(255,255,255,1)",
pointColor : "rgba(50,182,93,1)",
pointStrokeColor : "#fff",
data : [12, 21, 28, 29, 31, 55, 52, 50, 49, 59]
}
]
}
var myLine = new Chart(document.getElementById("cpu-chart").getContext("2d")).Line(lineChartData);
I have 2 questions
How to make last bar another color
How to make last label as image
You can use the ChartNew.Js libary available at https://github.com/FVANCOP/ChartNew.js/ . This libary adds the functionality to add an array of object for the color options. It does add some options for changing the labels as well, but I do not think it is possible to use an image for the actual chart's labels. You may be able to modify the tooltip that pops up for that label doing something like: How to add image to chart.js tooltip?, but I cant say for sure. Here is some code that I used in a recent app to color code each bar based on the percent value of the data:
//Set all canvas options and fill with data
self.chartJs = function () {
//create an array for each column to be set into the chart properties -- also create arrays for the colors of the columns
var arrayOfJobData = self.chartData();
var descArray = [];
var effArray = [];
var colorArray = [];
for (i = 0; i < arrayOfJobData.length; i++) {
//console.log(arrayOfJobData[i].Cost_Code_Description);
descArray.push(arrayOfJobData[i].Cost_Code_Description);
//console.log(arrayOfJobData[i].Efficency);
effArray.push(arrayOfJobData[i].Efficency);
//Create an array of colors to match with the corresponding efficency % to show a + - relationship in the color scheme
if (arrayOfJobData[i].Efficency < 100) {
colorArray.push("red");
}
else if (arrayOfJobData[i].Efficency >= 100) {
colorArray.push("green");
}
}
//chart data is set and colors selected
var barChartData = {
labels: descArray, //array labels holding the desc for each cost code
datasets: [
{
type: "Bar",
//label: "Efficency %",
fillColor: colorArray,
strokeColor: "black",
pointColor: "rgba(220,220,220,1)",
pointstrokeColor: "white",
drawMathLine: "mean", //using the math functions add-in draw a line with the average %
mathLineStrokeColor: "orange",
data: effArray //array of efficency percent values
}]
}
You can basically build your own array of colors using a method somewhat like was mentioned by the other guy to set only the last color if you want too. The important thing is that you should use ChartNew.js to do what you want with ease.
Here is something more aligned with what you want in colors:
var chartGood = "rgba(50,182,93,0.5)";
var lineChartData = {
labels : ["3/20","3/21","3/22","3/23"],
datasets : [
{
fillColor: ["chartGood ","chartGood ","chartGood ","red"],
strokeColor : "rgba(255,255,255,1)",
pointColor : "rgba(50,182,93,1)",
pointStrokeColor : "#fff",
data : [ 52, 50, 49, 59]
}
]
}
There is also pretty good documentation for ChartNew.js at : https://github.com/FVANCOP/ChartNew.js/wiki/100.Available_options
for the point 1 :
To plot your last bar with different color, you can divide your dataset to different data arrays as follow : the first data array : you replace the last value by null ... and for the second data array, all the values are null except the last one !!
"datasets": [{
fillColor : chartGood,
strokeColor : "rgba(255,255,255,1)",
pointColor : "rgba(50,182,93,1)",
pointStrokeColor : "#fff",
data : [12, 21, 28, 29, 31, 55, 52, 50, 49, null]
},
{
fillColor : chartGood,
strokeColor : "rgba(255,0,0,1)",
pointColor : "rgba(50,182,93,1)",
pointStrokeColor : "#fff",
data : [null, null, null, null, null, null, null, null, null, 59]
}],
For the second point :
If you want that the last label will be an image : this is not possible with Chart.js .... however you can use some (html, css) tricks to place your image over the last label ...
As example you can plot a table below the labels, the number of columns = length of the labels set (in your case = 10)
You set as style = visibility: hidden for each column .. only the last one (visible)
You put a negative margin-top value (to place your image over the label)
Hope this help