Related
I am using chartjs to render a barchart. For this I need to pass two lists in the format like [1, 2, 3] & [3, 2, 1]. I am making an AJAX call to Django which returns the two lists (I have not added the code to get the data from the database yet). The graph works fine for one list but not sure how to pass the second list.
I tried to pass the two lists as json and tried to use each of the lists in the success function of the ajax call but the graph does not render properly. With one list the graph is working fine
below is the code for the ChartJs AJAX call
$.ajax({
async: pasys,
type: "GET",
url: purl,
data: pdata,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(ldata) {
var barData = {
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct",
"Nov", "Dec", "Jan", "Feb", "Mar"],
datasets: [
{
label: "DL1",
backgroundColor: 'rgba(220, 220, 220, 0.5)',
pointBorderColor: "#fff",
data: ldata.data1
},
{
label: "Non-DL1",
backgroundColor: 'rgba(100, 200, 300, 0.5)',
pointBorderColor: "#aaa",
data: ldata.data2
}
]
};
var barOptions = {
responsive: true
};
var ctx2 =
document.getElementById("opendemandtrend").getContext("2d");
new Chart(ctx2, {type: 'bar', data: barData, options:barOptions});
* below is the code for the django view *
def gldh_productivitymetric_opendemandtrend_get(request):
lcompanyid = request.GET.get("pcompanyid")
lpmid = request.GET.get("ppmid")
data = json.dumps({"data1": "[12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]",
"data2": "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"})
return HttpResponse(data, content_type="application/json")
You're passing in strings as the values, instead of lists. Don't do that.
data = json.dumps({"data1": [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
"data2": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]})
I am currently testing google charts and having difficulty in specifying my own custom tooltips.
my data is declared as below
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([0, 0, 0, 'hello'], [1, 10, 5, 'hello'],
[2, 23, 15, 'hello'],[3, 17, 9, 'hello'], [4, 18, 10, 'hello'],
[5, 9, 5, 'hello'],
see this jsFiddle http://jsfiddle.net/SecretSquirrel/rbwyhx1q/
It appears the custom tooltip is only affecting the first data column?
I thought it was pretty limited to only allow 1 tooltip per row, but if this is only 1 tooltip for the first column this is really quite useless.
Well you have to add another tooltip column for your second graft.
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([
[0, 0,'custom', 0, 'hello'], [1, 10,'custom', 5, 'hello'], [2, 23,'custom', 15, 'hello'],
[3, 17,'custom', 9, 'hello'], [4, 18,'custom', 10, 'hello'], [5, 9,'custom', 5, 'hello'],
[6, 11,'custom', 3, 'hello'], [7, 27,'custom', 19, 'hello'], [8, 33,'custom', 25, 'hello'],
[9, 40,'custom', 32, 'hello'], [10, 32,'custom', 24, 'hello'], [11, 35,'custom', 27, 'hello'],
[12, 30,'custom', 22, 'hello'], [13, 40,'custom', 32, 'hello'], [14, 42,'custom', 34, 'hello'],
[15, 47,'custom', 39,'hello'], [16, 44,'custom', 36,'hello'], [17, 48,'custom', 40, 'hello'],
[18, 52,'custom', 44,'hello'], [19, 54,'custom', 46,'hello'], [20, 42,'custom', 34, 'hello'],
[21, 55,'custom', 47,'hello'], [22, 56,'custom', 48,'hello'], [23, 57,'custom', 49,'hello']
]);
var options = {
width: 1000,
height: 563,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('ex2'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="ex2"></div>
I'm using scatter plot for my application, so I selected google API for scatter charts. For my application I need to connect some points with line marker. I followed this
link for test. please help me to improve.
If you need to connect points on your ScatterChart, you can do so by setting either the lineWidth option (creates lines connecting points for all data series) or the series.<series index>.lineWidth option (which creates lines connecting the points of a single series). Here are some examples:
Use the lineWidth option to connect points in all series (jsfiddle example):
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[0, 2, 5],
[1, 6, 6],
[2, 5, 9],
[3, 6, 5],
[4, 5, 4],
[7, 9, 2],
[8, 4, 6],
[9, 3, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
lineWidth: 1
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
Connect all the points in one data series using the series.<series index>.lineWidth option (jsfiddle example):
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[0, 2, 5],
[1, 6, 6],
[2, 5, 9],
[3, 6, 5],
[4, 5, 4],
[7, 9, 2],
[8, 4, 6],
[9, 3, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
// connect the points in Y1 with a line
lineWidth: 1
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
If you want to connect only certain points in a data series, you must insert null values between all points that you do not want lines to connect. Here's an example connecting points (2, 5) and (3, 6) in series Y1 (jsfiddle example):
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[0, 2, 5],
[null, null, null],
[1, 6, 6],
[null, null, null],
[2, 5, 9],
[3, 6, 5],
[null, null, null],
[4, 5, 4],
[null, null, null],
[7, 9, 2],
[null, null, null],
[8, 4, 6],
[null, null, null],
[9, 3, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
// connect the points in Y1 with a line
lineWidth: 1
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
The important thing to note here is that points which are adjacent in the DataTable will be connected with lines. If you want to connect points which are not adjacent in the chart, you need to re-arrange the data. Here's an example that connects the points (2, 5) and (8, 4) in Y1 and (4, 4) and (8, 6) in Y2 (jsfiddle example):
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[null, null, null],
// Y1 data
// make (2, 5) and (8, 4) adjacent in the DataTable
[2, 5, null],
[8, 4, null],
// split all others with nulls
[null, null, null],
[0, 2, null],
[null, null, null],
[1, 6, null],
[null, null, null],
[3, 6, null],
[null, null, null],
[4, 5, null],
[null, null, null],
[7, 9, null],
[null, null, null],
[9, 3, null],
// Y2 data
// make (4, 4) and (8, 6) adjacent in the DataTable
[4, null, 4],
[8, null, 6],
// split all others with nulls
[null, null, null],
[0, null, 5],
[null, null, null],
[1, null, 6],
[null, null, null],
[2, null, 9],
[null, null, null],
[3, null, 5],
[null, null, null],
[7, null, 2],
[null, null, null],
[9, null, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
// connect the points in Y1 with a line
lineWidth: 1
},
1: {
// connect the points in Y2 with a line
lineWidth: 1
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
That should get you started on connecting points with lines in ScatterCharts.
I search for a solution, to only show every second value on the hAxis label of an Google LineChart.
The hAxis label interval is set by the hAxis.showTextEvery option as described here. This only works for discrete (non-number) horizontal axes. For example:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1', 'Blanket 2'],
['A', 1, 1, 0.5],
['B', 2, 0.5, 1],
['C', 4, 1, 0.5],
['D', 8, 0.5, 1],
['E', 7, 1, 0.5],
['F', 7, 0.5, 1],
['G', 8, 1, 0.5],
['H', 4, 0.5, 1],
['I', 2, 1, 0.5],
['J', 3.5, 0.5, 1],
['K', 3, 1, 0.5],
['L', 3.5, 0.5, 1],
['M', 1, 1, 0.5],
['N', 1, 0.5, 1]
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
hAxis: {showTextEvery: 2}}
);
}
If your axis is numerical, you can set this using the hAxis.minorGridlines.count option, as follows:
hAxis: {minorGridlines: {count: 1}}
This will add a single gridline (with no label) in between every two major gridlines.
I want to draw a Google's line chart in my web page! Here is my js code:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1'],
['A', 1, 10],
['B', 2, 5],
['C', 4, 12],
['D', 8, 5]
]);
var options = {
curveType: 'function',
lineWidth: 2,
hAxis: {
baselineColor: 'red',
textStyle: {color: '#000', fontName: 'Arial', fontSize: 10},
gridlines: { color: '#f3f3f3', count: 5}
},
vAxis: {
baseline: 0,
viewWindowMode: "explicit",
viewWindow:{ min: 0 },
gridlines: { color: '#f3f3f3', count: 6}
}
};
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, options);
}
However, the result chart is drawing without any vertical axis line. How I can add the vertical axis lines as below images:
Thank you so much!
Gridlines are not supported for category axes. Because the data in question is using strings as the categories (X-axis labels), there is no way to tell how they "should" be split. You can get around this, however, with the following techniques.
Trick 1: Turn your Data Numerical
So right now you have strings which means no gridlines. We want gridlines though, so we have to correct that small problem. So we turn our first column (X) in to a number, with a format on it so it says 'A' or 'B' or 'C' when you mouse over it (and in the legend):
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addRows([
[{v: 1, f:'A'}, 1, 10],
[{v: 2, f:'B'}, 2, 5],
[{v: 3, f:'C'}, 4, 12],
[{v: 4, f:'D'}, 8, 5]
]);
This doesn't solve the problem though. Now we have numbers on the bottom axis, cut off at weird 0.8 intervals. So we want to fix that. Unfortunately, with the hAxis, you can't set a min/max value and have it stick (I don't know why). We can fix the min by adding baseline: 0 to our options.
To get the max, we have to add a dummy series.
Put it all together, and we get this:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
// This dummy series is to extend the chart from 0-5 for padding
data.addColumn('number', null);
data.addRows([
[{v: 1, f:'A'}, 1, 10, null],
[{v: 2, f:'B'}, 2, 5, null],
[{v: 3, f:'C'}, 4, 12, null],
[{v: 4, f:'D'}, 8, 5, null],
[{v: 5, f:''}, null, null, {v: 0, f:''}]
]);
options = {
curveType: 'function',
lineWidth: 2,
hAxis: {
// Show a baseline at 0
baseline: 0,
// 6 Gridlines, 4 labels + left and right for padding
gridlines: {
count: 6
},
},
vAxis: {
baseline: 0,
},
series: [
{},
{},
// Hide our dummy series
{
lineWidth: 0,
pointsize: 0,
visibleInLegend: false
},
]
};
chart1 = new google.visualization.LineChart(document.getElementById('visualization'));
chart1.draw(data, options);
}
Now it's looking more like what you want. There are two main issues. One is that if you mouseover the bottom right of the chart, a blank tooltip pops up (this is not a huge issue I'd hope, though you may have to do some error trapping if you make the chart interactive with events). The other is that the bottom of our chart is showing numbers, not letters.
Unfortunately, there is no easy way to format numbers as letters (at least until Google implements the entire ICU pattern set rather than just dates/numbers). So we need to make another workaround. Basically, what I do is create an entirely new chart just to make the labels. I then format it so that it hides everything but the labels, and make sure that it lines up horizontally with the chart above.
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
// This dummy series is to extend the chart from 0-5 for padding
data.addColumn('number', null);
data.addRows([
[{v: 1, f:'A'}, 1, 10, null],
[{v: 2, f:'B'}, 2, 5, null],
[{v: 3, f:'C'}, 4, 12, null],
[{v: 4, f:'D'}, 8, 5, null],
[{v: 5, f:''}, null, null, {v: 0, f:''}]
]);
options = {
curveType: 'function',
lineWidth: 2,
hAxis: {
// Show a baseline at 0
baseline: 0,
// 6 Gridlines, 4 labels + left and right for padding
gridlines: {
count: 6
},
// Hide our labels
textPosition: 'none'
},
vAxis: {
baseline: 0,
},
series: [
{},
{},
// Hide our dummy series
{
lineWidth: 0,
pointsize: 0,
visibleInLegend: false
},
]
};
// Add dummy data for the axis labels
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'x');
data2.addColumn('number', 'dummy');
data2.addRows([
['A', null],
['B', null],
['C', null],
['D', null]
]);
chart1 = new google.visualization.LineChart(document.getElementById('visualization'));
chart1.draw(data, options);
chart2 = new google.visualization.LineChart(document.getElementById('visualization2'));
chart2.draw(data2,
{
chartArea: {
top:0,
height:"0%"
},
min: 0,
max: 0,
hAxis: {
baselineColor: '#FFFFFF'
},
vAxis: {
baselineColor: '#FFFFFF',
direction: -1,
textPosition: 'none',
gridlines: {
color: '#FFFFFF'
}
}
});
}
Just make another below the first one, and use CSS to align it properly (float it around the same position, or whatnot), and it looks like the labels belong to the chart above.
It ain't glorious, but it works.
There is a more elegant solution by using xticks:
To do that we define a datatable like this:
var data = new google.visualization.DataTable();
data.addColumn('number', 'Month');
data.addColumn('number', 'Sales');
data.addRows([
[{v: 0, f:'Jan'}, 1000],
[{v: 1, f:'Feb'}, 1170],
[{v: 2, f:'Mar'}, 660],
[{v: 3, f:'Apr'}, 1030]
]);
Where we set number values but also string labels for the Month axis.
With just this and the format attribute removed, we would get vertical lines but numbers instead of the strings for the x axis labels, which is not what we want.
To fix this we can set xticks to force the correct labels in the plot.
var options = {
title: '',
hAxis: {
title: 'Month',
titleTextStyle: {
color: '#333'
},
baseline: 0,
gridlines: {
color: '#f3f3f3',
count: 4
},
ticks: [{v: 0, f:'Jan'},{v: 1, f:'Feb'},{v: 2, f:'Mar'},{v: 3, f:'Apr'}], // <------- This does the trick
},
vAxis: {
minValue: 0,
gridlines: {
color: '#f3f3f3',
count: 5
}
}
};
Hereby a complete working fiddle to show you how it can be done: http://jsfiddle.net/j29Pt/417/