I put sum data in my chart google Areachart
Code google chart
google.setOnLoadCallback(talk);
function talk() {
var data = google.visualization.arrayToDataTable([<?=$talks ?>]);
var options = {
title: 'Nb De J\'aime',
hAxis: {title: 'Jours', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
pointSize: 10
};
var chart = new google.visualization.AreaChart(document.getElementById('parle'));
chart.draw(data, options);
and
$talks=['01',422],['02',440],['03',477],['04',523],['05',565],['06',609],['07',651],['08',708],['09',747],['10',759],['11',793],['12',860],['13',975],['14',1118],['15',1317],['16',1441],['17',1529],['18',1686],['19',1765],['20',1879],['21',2122],['22',2245],['23',2329],['24',2719],['25',3600],['26',4068],['27',4747],['28',5479],['18',1686],['19',1765],['20',1879],['21',2122],['22',2245],['23',2329],['24',2719],['25',3600],['26',4068],['27',4747],['28',5479],['29',6082],
and i have this pic for my graph
#Ti Amo Laky: you didn't ask a question so it's hard to answer :-). But my assumption is that 1st point is missing and step in the middle of chart is bothering you.
You did not define a header for your data. The first array has to be something like:
['Jours', 'Number'], ['01', 422],...
You have duplicated data after point 28: points 18 to 28 are repeated with exactly same values. If you remove those repeated values you will get the following picture:
Related
Categorical Y axis Field aggregated
In this graph, the count aggregation is applied and the yAxis is not ordered.
the yAxis has categorical values (could be seen before aggregation)
this issue is not existant while having the numerical values in the yAxis.
For testing:
https://codepen.io/plotly/pen/veoNdB
In the above code pen, use this code
var score = ['Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly']
var subject = [1,6,2,8,2,9,4,5,1,5,2,8]
instead of
var subject = ['Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly']
var score = [1,6,2,8,2,9,4,5,1,5,2,8]
The above example may look a bit odd but its just for testing
From having found the following subject on stackoverflow: Plotly deactivate x axis sorting, I think the mistakes may arise in your layout type on y axis. Is it set on 'category' ? If so, it is not getting the sort function of Plotly.
Here is the same example shown by Plotly with unordered numbers:
https://codepen.io/Aymer-El/pen/QWNBbge
yaxis: {title: 'Score', range: [0,22], type:"category"}
layout = { title: '<b>Plotly Aggregations</b><br>use dropdown to change aggregation', xaxis: {title: 'Subject'}, yaxis: {title: 'Score', range: [0,22], type:"category"}, height: 600, width: 900,...}
How can I still have Google Charts still show a line chart if my data array looks like this?
[['Date','Line']]
i.e. just the axis are defined. Most of my charts have data imported but some have nil on the data. I would like to display a blank chart. With data above I get an error message instead of a chart.
Here is code in my view
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(#{#visiting_spread_movement_array});
var options = {
title: 'Point Spread Movements for #{#event.visiting_team}'
};
var chart = new google.visualization.LineChart(document.getElementById('show-spread-visiting'));
chart.draw(data, options);
}
Well, to draw the chart you need at least one data point. To archieve this, you could use this workaround:
var data = google.visualization.arrayToDataTable([
[{
f: 'Date',
type: 'date' // wont work whithout this
}, {
f: 'Line',
type: 'number' // wont work whithout this
}], ]);
var options = {
title: 'Company Performance'
};
if (data.getNumberOfRows() == 0) { // if you have no data, add a data point and make the series transparent
data.addRow([new Date(), 0])
options.series = {
0: {
color: 'transparent'
}
}
}
Full fiddle: http://jsfiddle.net/qaLgh955/
I want to plot a graph with the following as the xaxis:
var xaxis = [31.1,31.2,31.3,31.4,31.5, 32.1,32.2,32.3,32.4,32.5];
notice how there is a skip between 31.5 and 32.1. However, when I plot my line graph, there is a large space between these two points. Here's my code:
$(document).ready(function(){
var cust1 = [[31.1,10],[31.2,15],[31.3,25],[31.4, 60],[31.5,95]];
var cust2 = [[31.1,0],[31.2,15],[31.3,30],[31.4, 50],[31.5,85]];
var data = [];
data.push(cust1);
data.push(cust2);
var xaxis = [31.1,31.2,31.3,31.4,31.5, 32.1,32.2,32.3,32.4,32.5];
var plot3 = $.jqplot('line-chart', data,
{
title:'Design Progress',
axes: {
xaxis: {
//renderer: $.jqplot.LineRenderer,
label: 'Work Weeks',
ticks: xaxis
},
yaxis: {
label: "Percent Complete",
max: 100,
min: 0
}
}
}
);
});
I think it's because I'm not specifying a renderer option in my xaxis options. However, I've tried to use $.jqplot.LineRenderer and $.jqplot.CategoryAxisRenderer without any luck (I even set my xaxis values as strings but that didn't work). Anybody know what's going on?
Here's a pic to further clarify:
Reason why it happens : jQuery flot library is building the graph with values that determined by your data.
When you provide such data, the plugin will set the axis values to be as same as the text and with the borders of the numbers you gave.
what you can do, is set the text to be different than the axis value.
You can easily do it by options.xaxis.ticks.push([value, "the text"]).
Pay attention that you are the one who is going to set which label will have which axis value, and this calls for setting the options parameter before calling the $plot
Is it possible to create a line chart with just one data series, showing just one line, but two different vertical axes? The axes differ by a scalar.
Think of a data series of income at different points in time. The first v-axis would correspond the the income levels. The second v-axis would show what percentage that income is of some target or comparison figure. So the values of the second v-axis are just the values of the first divided by the (constant) target values.
I'm currently able to build a chart that is based on two data series, showing two different lines: An income line plotted against the first v-axis, and a percent-of-target line plotted against the second v-axis. These lines follow the same path and are usually almost right on top of each other. The reason they are not directly on top of one another seems to be how the API tends to pick "nice" numbers for the max and min values of each axis. But I think the two lines are confusing and hard to look at. This data can be represented with a single line.
If it is not possible to do directly, can it be hacked? If I have to stick with two different data series, is there a way I can get at the max value for the first v-axis and then set the max-value for the second v-axis so that the two lines fall directly on top of each other? How then might I clean it up so it only looks like there is one line?
There is no way to make it happen with just one series of data. The easy way to get the two lines to align is to set the max value of the income-level axis as the income target used for the percentage (so it corresponds to 100%), and set the min value equal to the min percentage of that income level that you want to show (0% is the easiest to make work, generally). Something like this:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn('number', 'Income');
data.addRows([
[2000, 35000],
[2001, 38000],
[2002, 42000],
[2003, 44000],
[2004, 47000],
[2005, 51000],
[2006, 55000],
[2007, 60000],
[2008, 61000],
[2009, 65000],
[2010, 59000],
[2011, 62000],
[2012, 63000]
]);
var targetIncome = 80000;
var minIncomePercent = 0;
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: 'Percent of Target',
calc: function (dt, row) {
return dt.getValue(row, 1) / targetIncome;
}
}, 1]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(view, {
height: 400,
width: 600,
hAxis: {
format: '####'
},
vAxes: {
0: {
title: 'Income Level',
format: '$#,###',
minValue: targetIncome * minIncomePercent,
maxValue: targetIncome
},
1: {
title: 'Income Percentage of Target',
format: '#%',
minValue: minIncomePercent,
maxValue: 1
}
},
series: {
0: {
targetAxisIndex: 1,
enableInteractivity: false,
pointSize: 0,
lineWidth: 0,
visibleInLegend: false
},
1: {
targetAxisIndex: 0
}
}
});
}
See http://jsfiddle.net/asgallant/6N5mZ/
I have a histogram that i want to render with ColumnCharts, I followed the tutorial and did it and got this as an result:
Note the spacing at the either end of the graph (particularly the left side as the right side have some columns that's very small)
I tried to use viewWindow but it seems to have no particular effect. Here's the code (coffeescript) that's used to draw it. The data has been snipped to save space as they are fairly big
data = google.visualization.arrayToDataTable([
labels, bardata
])
# The labels are ["x", "label for each column" ....]
# bardata is [number, number, number] (these numbers are the height of the column)
chart = new google.visualization.ColumnChart(document.getElementById("enrollment-total-chart"))
chart.draw(data,
width: 400
height: 300
hAxis:
title: "Number of students"
vAxis:
title: "Number of schools"
viewWindow:
max: "auto"
min: 0
viewWindowMode: "explicit"
legend: position: "none"
)
The issue is likely with your data. For instance, if I make this chart:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'A', 'B', 'C', 'D', 'E', 'F'],
['A', 0, 0, 3, 4, 5, 0],
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{width:600, height:400,
hAxis: {title: "Year"}}
);
}
There is a lot of white space at the left/right of the chart due to the zeroes (my guess is that you have a lot of zeroes in the extremes).
I'm a bit confused also by your data -- you say you have many different rows, but a histogram is just a pair of X Y data, so the use of color (differentiating the series) is a bit different than a standard histogram.
If the above doesn't answer your question, could you please include your data so that we can understand a bit better what you're trying to do (anonymized if necessary).