JQPlot shows only bar chart but doesn't draw line - jqplot

I have a problem with JQPlot, I have managed to display bars in my chart but for some reason the lines are not drawn.
You can see the code on JSFiddle (didn't work on Internet Explorer):
http://jsfiddle.net/gkp2N/
If I change "seriesDefaults" to "series" it show two lines but doesn't draw the bar. I have spent two hours figuring this out so hopefully someone can help me, thanks!
Here is the JS code:
var s1 = [
['2013-02-04 4:00PM', 11],
['2013-02-05 4:00PM', 11],
['2013-02-06 4:00PM', 15],
['2013-02-07 4:00PM', 12],
['2013-02-08 4:00PM', 16],
['2013-02-09 4:00PM', 7],
['2013-02-10 4:00PM', 9],
['2013-02-11 4:00PM', 6],
['2013-02-12 4:00PM', 13],
['2013-02-13 4:00PM', 12],
['2013-02-14 4:00PM', 6],
['2013-02-15 4:00PM', 13],
['2013-02-16 4:00PM', 3],
['2013-02-17 4:00PM', 9],
['2013-02-18 4:00PM', 18],
['2013-02-19 4:00PM', 18],
['2013-02-20 4:00PM', 12],
['2013-02-21 4:00PM', 14],
['2013-02-22 4:00PM', 7],
['2013-02-23 4:00PM', 5],
['2013-02-24 4:00PM', 3],
['2013-02-25 4:00PM', 9],
['2013-02-26 4:00PM', 15],
['2013-02-27 4:00PM', 14],
['2013-02-28 4:00PM', 4],
['2013-03-01 4:00PM', 0],
['2013-03-02 4:00PM', 0],
['2013-03-03 4:00PM', 0],
['2013-03-04 4:00PM', 0],
['2013-03-05 4:00PM', 0]
];
var s2 = [
['2013-02-04 4:00PM', 55],
['2013-02-05 4:00PM', 55],
['2013-02-06 4:00PM', 75],
['2013-02-07 4:00PM', 60],
['2013-02-08 4:00PM', 80],
['2013-02-09 4:00PM', 35],
['2013-02-10 4:00PM', 45],
['2013-02-11 4:00PM', 30],
['2013-02-12 4:00PM', 65],
['2013-02-13 4:00PM', 60],
['2013-02-14 4:00PM', 30],
['2013-02-15 4:00PM', 65],
['2013-02-16 4:00PM', 15],
['2013-02-17 4:00PM', 45],
['2013-02-18 4:00PM', 90],
['2013-02-19 4:00PM', 90],
['2013-02-20 4:00PM', 60],
['2013-02-21 4:00PM', 70],
['2013-02-22 4:00PM', 35],
['2013-02-23 4:00PM', 25],
['2013-02-24 4:00PM', 15],
['2013-02-25 4:00PM', 45],
['2013-02-26 4:00PM', 75],
['2013-02-27 4:00PM', 70],
['2013-02-28 4:00PM', 20],
['2013-03-01 4:00PM', 0],
['2013-03-02 4:00PM', 0],
['2013-03-03 4:00PM', 0],
['2013-03-04 4:00PM', 0],
['2013-03-05 4:00PM', 0]
];
var plot = $.jqplot('placeholder', [s1, s2], {
// Turns on animatino for all series in this plot.
animate: true,
// Will animate plot on calls to plot1.replot({resetAxes:true})
animateReplot: true,
cursor: {
show: true,
zoom: true,
looseZoom: true,
showTooltip: false
},
seriesColors: ["#eee", "#ccc"],
highlighter: {
show: true,
showLabel: true,
tooltipAxes: 'y',
sizeAdjust: 7.5,
tooltipLocation: 'ne'
},
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
xaxis: 'xaxis',
yaxis: 'yaxis',
rendererOptions: {
// Speed up the animation a little bit.
// This is a number of milliseconds.
// Default for bar series is 3000.
animation: {
speed: 2500
},
barWidth: 15,
barPadding: -15,
barMargin: 0,
highlightMouseOver: false
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: 30
},
showTicks: false
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickInterval: '1 day'
},
x2axis: {
renderer: $.jqplot.DateAxisRenderer
}
}
});

Don't forget to include the needed plugins (barRenderer) :
<script class="include" src="
http://www.jqplot.com/deploy/dist/plugins/jqplot.barRenderer.min.js"></script>
Edit
Working example on Fiddle

Related

page length not showing after adding export option in DataTables Library

page length not showing after adding export option in DataTables Library.
dom: 'Bfrtip',
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]], // page length options
buttons: [
{
extend: 'copy',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
}
},
https://nimb.ws/OlUrQ6
Bfrtip to lBfrtip
dom: 'lBfrtip',
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]], // page length options
buttons: [
{
extend: 'copy',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
}
},

I need to filter elements in google.visualization.datatable used in Google Charts

I'm populating my google's datatable via using this code
$.ajax({
url: "Default2.aspx/GetChartData",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function (data) {
chartData = data.d;
},
error: function () {
alert("Error loading data! Please try again.");
}
}).done(function () {
google.charts.setOnLoadCallback(drawChart);
});
function drawChart() {
var data = google.visualization.arrayToDataTable(chartData);
Now I want to delete rows based on some filters which check the particular value(date) from the row of the datatable.
But the problem is that there is not any method in documentation using which i can go through row elements.
you can use a DataView to show only certain rows from the DataTable
using the getFilteredRows and setRows methods...
the getFilteredRows method returns an array of row indexes that meet certain criteria
the criteria is an array of conditions
you pass the column index and the condition
e.g. --> {column: 0, minValue: 2016} -- (first column must be >= 2016)
e.g. --> {column: 0, value: 2017} -- (first column must = 2017)
e.g. --> {column: 0, maxValue: 2015} -- (first column must be <= 2015)
see following DataTable...
var data = google.visualization.arrayToDataTable([
['X', 'Y1', 'Y2'],
[2010, 10, 14],
[2011, 14, 22],
[2012, 16, 24],
[2013, 22, 30],
[2014, 28, 36],
[2015, 30, 44],
[2016, 34, 42],
[2017, 36, 44],
[2018, 42, 50],
[2019, 48, 56]
]);
to filter on the 'X' column (column 0), we could say...
data.getFilteredRows([{column: 0, minValue: 2016}])
you can use multiple criteria as well...
data.getFilteredRows([
{column: 0, minValue: 2016},
{column: 1, minValue: 40}
])`
then pass the returned row indexes to setRows on the data view
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([
{column: 0, minValue: 2016},
{column: 1, minValue: 40}
]));
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['table']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y1', 'Y2'],
[2010, 10, 14],
[2011, 14, 22],
[2012, 16, 24],
[2013, 22, 30],
[2014, 28, 36],
[2015, 30, 44],
[2016, 34, 42],
[2017, 36, 44],
[2018, 42, 50],
[2019, 48, 56]
]);
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([
{column: 0, minValue: 2016},
{column: 1, minValue: 40}
]));
var container = document.getElementById('chart_div');
var chart = new google.visualization.Table(container);
chart.draw(view);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
you can filter on any type, including dates,
here is an example of filtering on exact date...
google.charts.load('current', {
callback: drawChart,
packages: ['table']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y1', 'Y2'],
[new Date(2016, 7, 1), 10, 14],
[new Date(2016, 8, 1), 14, 22],
[new Date(2016, 9, 1), 16, 24],
[new Date(2016, 10, 1), 22, 30],
[new Date(2016, 11, 1), 28, 36],
[new Date(2017, 0, 1), 30, 44],
[new Date(2017, 1, 1), 34, 42],
[new Date(2017, 2, 1), 36, 44],
[new Date(2017, 3, 1), 42, 50],
[new Date(2017, 4, 1), 48, 56]
]);
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([
{column: 0, value: new Date(2016, 11, 1)}
]));
var container = document.getElementById('chart_div');
var chart = new google.visualization.Table(container);
chart.draw(view);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: if the date values include specific time values, then you'll need to use a range, to filter for a specific date...
google.charts.load('current', {
callback: drawChart,
packages: ['table']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y1', 'Y2'],
[new Date(2017, 0, 1, 12, 35, 16), 30, 44],
[new Date(2017, 0, 1, 14, 46, 10), 34, 42],
[new Date(2017, 0, 1, 16, 12, 44), 36, 44],
[new Date(2017, 0, 1, 17, 20, 47), 42, 50],
[new Date(2017, 0, 1, 18, 23, 59), 48, 56],
[new Date(2017, 0, 2, 12, 35, 16), 30, 44],
[new Date(2017, 0, 2, 14, 46, 10), 34, 42],
[new Date(2017, 0, 2, 16, 12, 44), 36, 44],
[new Date(2017, 0, 2, 17, 20, 47), 42, 50],
[new Date(2017, 0, 2, 18, 23, 59), 48, 56]
]);
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{
column: 0,
minValue: new Date(2017, 0, 1, 0, 0, 0),
maxValue: new Date(2017, 0, 1, 23, 59, 59)
}]));
var container = document.getElementById('chart_div');
var chart = new google.visualization.Table(container);
chart.draw(view);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How to allow Duplicate Tick Labels in Plotly?

I observed that while providing duplicate ticklabels (with an aim to mention the class of categorical variable), plotly creates a unique set and displays only the non-repeated tick labels. Is there a way to by-pass this feature and allow duplicate tick-labels?
var data = [
{
z: [[1, 20, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
x: ['Healthy', 'Healthy', 'Moderate', 'Diseased', 'Diseased'],
y: ['Morning', 'Afternoon', 'Evening'],
type: 'heatmap'
}
];
Plotly.newPlot('myDiv', data);
Following is the jsfiddle depicting the issue:
https://jsfiddle.net/mam8sgwx/
Set the layout with ticktext:
var layout = {
xaxis: {
tickmode: "array",
ticktext: ['Healthy', 'Healthy', 'Moderate', 'Diseased', 'Diseased'],
tickvals: [0, 1, 2, 3, 4]
}
}
Here is the demo:
var data = [{
z: [
[1, 20, 30, 50, 1],
[20, 1, 60, 80, 30],
[30, 60, 1, -10, 20]
],
y: ['Morning', 'Afternoon', 'Evening'],
type: 'heatmap'
}];
var layout = {
xaxis: {
tickmode: "array",
ticktext: ['Healthy', 'Healthy', 'Moderate', 'Diseased', 'Diseased'],
tickvals: [0, 1, 2, 3, 4]
}
}
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myDiv"></div>

Processing hierarchical JSON data with d3.js

I'm trying to understand how to use more complicated data sets with d3. Below I will show the JSON data I would like to display;
{
"questions": ["Large choice of food", "Food quality", "Food freshness", "Taste of food", "Waiting time to recieve food", "Value for money"],
"places": ["US", "UK", "TK"],
"dates": ["Jan", "Feb", "Mar"],
"values": [
[
[24, 42, 72],
[29, 45, 79],
[34, 39, 84]
],
[
[33, 73, 41],
[21, 16, 45],
[43, 22, 17]
],
[
[75, 53, 78],
[55, 33, 22],
[94, 83, 99]
],
[
[63, 37, 11],
[47, 67, 62],
[33, 34, 35]
],
[
[43, 89, 78],
[99, 92, 87],
[41, 23, 71]
],
[
[92, 11, 45],
[100, 0, 50],
[40, 72, 62]
]
]
}
From here I would like to be able to select one question, then pair it with a place + date and then retrieve the value based on this.
I have tried to find resources online which could help educate me with how to access this kind of data in this way, but i've had no such luck. I have created a plnk to provide a set up for this.
http://plnkr.co/edit/Cdwm5RXoIdBNg0uxeeP6?p=preview
So the question is how can I retrieve this data in d3, and display it in the console in the order of question+[place + date][values based on this].
Any advice and links to good educational resources would be a big help for me at this stage,
Cheers
EDIT:
The above JSON format may be a little confusing, here is perhaps a more simplified version?
{
"dates": ["Jan", "Feb", "Mar"],
"questions": {
"Large choice of food": {
"US": [11, 15, 13],
"UK": [25, 24, 39],
"TK": [27, 23, 20]
},
"Food quality": {
"US": [11, 15, 13],
"UK": [25, 24, 40],
"TK": [27, 23, 20]
},
}
}
Here is something I put together but it isn't using D3, but vanilla JS. So I'm not sure if you want this but I'll throw it in anyway. Rather self explanatory: http://plnkr.co/edit/ckm45FB3RVhofGbUjdBl?p=preview
Main chunk of code :
var questionData = data.questions;
var monthData = data.dates;
var countryData = data.places;
//populate question drop down
var questionSelect = document.getElementById('questionSelect');
for(i=0;i<questionData.length;i++){
var option = document.createElement('option');
option.text = questionData[i];
option.value = questionData[i];
questionSelect.appendChild(option);
}
var submitButton = document.getElementById('submitButton');
submitButton.addEventListener('click', getData);
function getData(){
var thisQuestion = document.getElementById('questionSelect').value;
var thisCountry = document.getElementById('countrySelect').value;
var thisMonth = document.getElementById('monthSelect').value;
var questionIndex = questionData.indexOf(thisQuestion);
var countryIndex = countryData.indexOf(thisCountry);
var monthIndex = monthData.indexOf(thisMonth);
var getValue = data.values[questionIndex][monthIndex][countryIndex]; //this is the found value
console.log(getValue)
}

Datatable scroll x issue using fixedColumn

im using jquery datatables with fixedColumns. Everything working fine but im having an issue with scroll x.
As u can see, i cant remove the scroll x from fixed column. Any ideas to solve this? Initialization:
$(document).ready(function(){
var oTable = $('#matriz').dataTable({
"bStateSave": true,
"iCookieDuration": 60*60*24*30*365,
"sDom": 'TC<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "xls",
"sButtonText": "Excel",
"mColumns":
[
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
13, 14, 15, 16, 17, 18, 19, 20, 21, 22
]
}
]
},
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets':
[
8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 21, 22, 23
]
}
],
"pagingType": "full_numbers",
"oLanguage": {
"sInfo": "Exibindo de _START_ até _END_. Resultados encontrados: _TOTAL_",
"sSearch": "Pesquisar: ",
"sEmptyTable": "Não existem solicitações para exibir.",
"sLengthMenu": "Visualizar _MENU_ solicitações",
"oPaginate": {
"sFirst": "Primeira",
"sLast": "Última",
"sNext": "Próxima",
"sPrevious": "Anterior"
}
},
"oColVis": {
"buttonText": "Ocultar colunas",
"bRestore": true,
"aiExclude": [ 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 23 ],
"sRestore": 'Restaurar'
},
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todas"]],
"iDisplayLength": 10,
scrollY: 325,
"sScrollX": "100%",
scrollCollapse: true,
fixedColumns: {
leftColumns: 1
}
});
setTimeout(function (){
oTable.fnAdjustColumnSizing();
}, 10 );
});
Adding overflow-x:hidden to the DTFC_LeftBodyLiner div seems to fix the display issue.

Resources