We Keep Coding

is it possible to use data group with filter to change X and Y axis in chartjs?

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"
}
} ...

Plotly.js define shape of data

I'm pulling data from an API that comes back in the following format:
[{
"metadata": {"colName": "nameOfCol"},
"value": valueForCol // string or number or whatever
},
...]
But according to Plotly's website, they want two simple arrays of labels and columns:
var data = [{
values: [19, 26, 55],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie'
}];
or:
var data = [{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
type: 'bar'
}];
Now there's quite a big dataset coming back, so I'd prefer to not have to loop through the whole set and extract the labels and values from everything. Is there a nice way to tell Plotly to loop through my data and find the labels and values?
I don't know what this would look like, maybe something like:
var data = [{
source: myData,
labels: "metadata.colName",
values: "value",
type: "pie"
}]

Short answer: no, there is no feature in Plotly.js for this, you'll unfortunately have to loop through and extract.

How can i assign the same yAxis.categories values to series.data in HighCharts?

I'm trying to create a chart where the data that I pass to the series.data property exactly match the values that I go to the categories property on the y-axis. I tried to put the data in decimal form but then the spline points did not match the various categories.
Categories for me represents a array of times.
This is my chart:
Highcharts.chart('container', {
chart: {
type: 'spline'
},
yAxis: {
min: 0,
max: 2,
reversed: true,
tickInterval: 1,
categories: ['0:30', '0:40', '1:00'],
},
series: [{
data: [1, 0.4, 0.3]
}]
});
What I would like to do is assign the values [0:30 ',' 0:40 ',' 1:00 '] to series.data property. But unfortunately you can not assign a string type to data.
How can I get around the problem?

Instead of a decimal value, use index of the specific yAxis category to display value in the right place and modify tooltip to display a category value.
API Reference:
http://api.highcharts.com/highcharts/tooltip.formatter
Example:
http://jsfiddle.net/8wefsL70/1

Highcharts chart categories not displaying correctly

EDIT: Here's a fiddle, thanks to JordanD for getting it displaying something:
jsfiddle.net
EDIT(2): From what I can tell, this is how a single series chart displays. Adding a second series (a second element in the data array) causes the chart to display as I expected it to, but with one series, it is basically centered instead of justified. Therefore, it's not 'broken', it just doesn't behave as I expected it to.
The data series is in the form of an array of objects in the form of:
name: 'string'
data: ['array', 'of', 'data']
As can be seen in the image, my x-axis categories are displaying as a string. It's being set as
categories: dates
Where dates is an array with an array of dates in the first index. It appears that the only thing displaying in the categories is the first element of the array. Even if I try
categories: ['this', 'is', 'a', 'test']
the only thing that will show is 'this'.
and here is the console log to accompany it with a small sample of the data:
and here is the call to instantiate the chart:
$("#chart").highcharts({
chart: {
type: 'column'
},
title: {
text: 'report for ' + result[0].Name
},
xAxis: {
categories: date
},
yAxis: {
title:
{
text: 'Number'
}
},
series: dataSeries
});
What I'm trying to get is for the x-axis labels (and the columns themselves) to be spaced out to take up the full width of the chart.

The problem is that you have 9 series and each point have the same x, so each serie starts on the same tick and you have result which you have.
Solutions:
use one serie and set up a color for each point
use pointStart for each serie
set data as pairs [x,y] but xAxis should be category type.

If I understand your problem correctly an easy fix might be to add a data type to your axis.
type : 'datetime'
$("#chart").highcharts({
chart: {
type: 'column'
},
title: {
text: 'report for ' + result[0].Name
},
xAxis: {
categories: date,
type : 'datetime'
},
yAxis: {
title:
{
text: 'Number'
}
},
series: dataSeries
});

How to give solid colors to bar charts in flot

I need to give solid colors to bar charts...
I have followed this link
Bar chart Example
But i want to give solid colors and also i need to change colors myself... how to do it...

First off, read the API.txt, it answers all your questions. Two things you need to do then. When you specify that you want bars, set fill: 1, which tells flot to make the colors 100% opaque. To specify a colour per series, just add a color:'red' to each data object.
So you end up with a data object like this:
var data = [
{label: 'foo', color:'red', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]},
{label: 'bar', color:'blue', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]},
{label: 'baz', color:'yellow', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]},
];
And flot options like this:
{
series: {
stack: 1,
bars: {
show: true,
barWidth: 0.6,
fill:1
}
}
}
See it in action here: http://jsfiddle.net/ryleyb/kKdxt/