bootstrap-slider working, displays as intended, however the rangeHighlights do not seem to be appearing.
Copied the html/css/js code from http://seiyria.com/bootstrap-slider into my projects as it is on the site.
What am i doing wrong here?
$('#ex22').slider({
id: 'slider22',
min: 0,
max: 20,
step: 1,
value: 14,
rangeHighlights: [{
"start": 2,
"end": 5,
"class": "category1"
},
{
"start": 7,
"end": 8,
"class": "category2"
},
{
"start": 17,
"end": 19
},
{
"start": 17,
"end": 24
},
{
"start": -3,
"end": 19
}
]
});
#slider22 .slider-selection {
background: #2196f3;
}
#slider22 .slider-rangeHighlight {
background: #f70616;
}
#slider22 .slider-rangeHighlight.category1 {
background: #FF9900;
}
#slider22 .slider-rangeHighlight.category2 {
background: #99CC00;
}
<!DOCTYPE html>
<!-- saved from url=(0036)http://seiyria.com/bootstrap-slider/ -->
<html lang="en" style="" class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet" />
</head>
<body>
<div id="example-22" class="slider-example">
<input id="ex22" type="text" data-slider-id="slider22" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" data-slider-rangeHighlights='[{ "start": 2, "end": 5, "class": "category1" },
{ "start": 7, "end": 8, "class": "category2" },
{ "start": 17, "end": 19 },
{ "start": 17, "end": 24 }, //not visible - out of slider range
{ "start": -3, "end": 19 }]' />
</div>
<script src="http://seiyria.com/bootstrap-slider/dependencies/js/jquery.min.js"></script>
<script src="http://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
</body>
</html>
Probably you use bootstrap 4. For now it won't work with this version. Use bootstrap 3 or you have to adjust bootstrap-slider to new bootstrap.
Related
I'm am trying to create a chart using AmCharts by loading JSON output from a webservice using the dataloader plugin from this URL http://portal.eyeo.se/datapump_amchart.ashx. For some reason, only a few items from my data are visible as you can see here: http://portal.eyeo.se/historychart
What am I doing wrong?
Code below:
<script src="amcharts/amcharts.js"></script>
<script src="amcharts//serial.js"></script>
<script src="amcharts/plugins/export/export.min.js"></script>
<script src="amcharts/plugins/dataloader/dataloader.min.js"></script>
<link rel="stylesheet" href="amcharts/plugins/export/export.css" type="text/css" media="all" />
<script src="amcharts/themes/light.js"></script>
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataLoader": {
"url": "datapump_amchart.ashx",
"format": "json",
"async": "True"
},
"categoryField": "timestamp",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"rotate": false,
"valueAxes": [{
"position": "left",
"title": "SensorVärde"
}],
"categoryAxis": {
"parseDates": true,
"minPeriod": "ss",dateformat that is wron
},
"graphs": [{
"valueField": "value1",
"id": "g1",
"bullets": "round",
"balloon": {
"drop": false,
"adjustBorderColor": false,
"color": "#ffffff",
"type": "smoothedLine"
},
"fillAlphas": 0.2,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 10,
"hideBulletsCount": 50,
"lineThickness": 5,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value1",
"fillAlphas": 0.4,
"balloonText": "<div style='margin:5px; font-size:10px;'>Sensorvärde:<b>[[value1]]</b></div>"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"zoomable": false,
"valueZoomable": true,
"valueLineAlpha": 0.5,
"categoryBalloonDateFormat": "HH:NN:SS, DD MMMM",
"cursorPosition": "mouse"
},
"chartScrollbar": {
"graph": "g1",
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"export": {
"enabled": true
},
});
</script>
<!-- HTML -->
<div id="chartdiv"></div>
The issue is that your date-based data is in the wrong order. It must be in ascending order when you're using parseDates as mentioned in the documentation.
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.
Fixing the order of your data should solve your problem.
My previous issue was to get json data attached to amcharts, after struggling for a while, I got it running the way I want. But when I move it from test page to page where it would be listed with other charts it doesn't seem to work. When I click on blank chart this error appears in the console
Uncaught TypeError: Cannot read property 'length' of undefined
at Object.xToIndex (serial.js:14)
at b.handleCursorMove (serial.js:8)
at Object.a.inherits.b.fire (amcharts.js:1)
at Object.dispatchMovedEvent (amcharts.js:27)
at Object.handleMouseDown (amcharts.js:26)
at b.handleMouseDown (serial.js:1)
at HTMLDivElement.<anonymous> (amcharts.js:18)
Below is the code which is working when I have it on separate page
var chart = AmCharts.makeChart("chart1", {
"type": "serial",
"dataLoader": {
"url": "#myURL"
},
"valueAxes": [{
"title": "Load Average",
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"id": "AmGraph-1",
"lineThickness": 3,
"valueField": "LoadAverage"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "EndTimeLoop",
"categoryAxis": {
"title": "End Time Loop",
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20,
"labelRotation": 90
}
});
function setDataSet(dataset_url) {
AmCharts.loadFile(dataset_url, {}, function(data) {
chart.dataProvider = AmCharts.parseJSON(data);
chart.validateData();
});
};
this is the part where select happens in html side
<div class="chartWrapper" id="chartSingleTest1">
<select onchange="showChart(this.options[this.selectedIndex].value);">
<option value="chart1">Chart #1</option>
<option value="chart2">Chart #2</option>
<option value="chart3">Chart #3</option>
</select>
<div id="chart1" class="chartBoxSingle" style="display: none;"></div>
<div id="chart2" class="chartBoxSingle" style="display: none;"></div>
<div id="chart3" class="chartBoxSingle" style="display: none;"></div>
</div>
and here is js part where selects the first option on page load
var currentChart;
function showChart( divid ) {
if (currentChart !== undefined)
currentChart.style.display = "none";
if ( divid ) {
currentChart = document.getElementById(divid);
currentChart.style.display = "block";
}
else {
currentChart = undefined;
}
}
$(document).ready(function() { showChart('chart1'); });
You have to call the chart object's validateSize method when toggling the display of a chart from none to block as shown in this example that uses tabs. Here's another example using your structure:
var charts = {};
charts["chart1"] = AmCharts.makeChart("chart1", {
type: "serial",
dataProvider: [{
"value": 1,
"category": "Category 1"
}, {
"value": 2,
"category": "Category 2"
}, {
"value": 3,
"category": "Category 3"
}],
categoryField: "category",
graphs: [{
valueField: "value",
type: "column",
fillAlphas: .8
}]
});
charts["chart2"] = AmCharts.makeChart("chart2", {
type: "pie",
dataProvider: [{
"value": 2,
"title": "Slice 1"
}, {
"value": 2,
"title": "Slice 2"
}, {
"value": 2,
"category": "Slice 3"
}],
titleField: "title",
valueField: "value"
});
var currentChart;
function showChart(divid) {
if (currentChart !== undefined)
currentChart.style.display = "none";
if (divid) {
currentChart = document.getElementById(divid);
currentChart.style.display = "block";
charts[divid].validateSize();
} else {
currentChart = undefined;
}
}
$(document).ready(function() {
showChart('chart1');
});
.chartBoxSingle {
width: 100%;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/pie.js"></script>
<div class="chartWrapper" id="chartSingleTest1">
<select onchange="showChart(this.options[this.selectedIndex].value);">
<option value="chart1">Chart #1</option>
<option value="chart2">Chart #2</option>
</select>
<div id="chart1" class="chartBoxSingle" style="display: none;"></div>
<div id="chart2" class="chartBoxSingle" style="display: none;"></div>
</div>
I have a chart that refuses to render properly if I include the categoryAxis property in the chart options. By "render properly", I mean that the plot area shows up, the title is displayed, but none of the columns are rendered.
I am using an AmCharts serial chart with GrantMStevens amChartsDirective because my project is built in Angularjs.
Here is a plunk with the categoryAxis commented out. If you enable that line of code, the chart will immediately exhibit this behavior.
This chart uses text values for the categoryField and numeric vlaues for the valueField. I have another chart that uses date values for the categoryField and numeric values for the valueField and it works just fine.
I am assuming that there some interaction between the fact that this a not a categoryField is not a date value that causes this but I cannot find any combination of properties that lets me set properties on the categoryField.
This is what I WANT to do:
categoryAxis: {
gridAlpha: 0.3,
gridColor: "GRAY"
},
Does anyone know why this doesn't work?
Here is the HTML:
<html ng-app="amChartsDirectiveExample">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div ng-controller="amChartsController2" style="height: 400px; width: 600px;">
<am-chart id="mySecondChart" options="amChartOptions2"></am-chart>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/amcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/serial.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/light.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/chalk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/black.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/dark.js"></script>
<script src="https://rawgit.com/ThumbsAlmighty/amCharts-Angular/master/dist/amChartsDirective.js"></script>
<script src="script.js"></script>
<script src="theme.js"></script>
</body>
And here is the JavaScript:
angular.module('amChartsDirectiveExample', ['amChartsDirective'])
.controller('amChartsController2', function($scope) {
$scope.chartData = [
{
"EscalationCount": "2",
"Area": "One"
},
{
"EscalationCount": "9",
"Area": "Two"
},
{
"EscalationCount": "5",
"Area": "Three"
},
{
"EscalationCount": "4",
"Area": "Four"
},
{
"EscalationCount": "3",
"Area": "Five"
}];
$scope.amChartOptions2 = {
type: "serial",
categoryField: "Area",
startDuration: 1,
rotate: true,
theme: "light",
trendLines: [],
//categoryAxis: {}, // Uncomment this line to break the chart.
graphs: [{
balloonText: "[[title]] for [[category]]: [[value]]",
fillAlphas: 1,
id: "AmGraph-1",
title: "Escalation Volume",
type: "column",
valueField: "EscalationCount"
}],
guides: [],
valueAxes: [{
id: "ValueAxis-1",
title: "EscalationCount",
}],
allLabels: [],
balloon: [],
legend: {
enabled: false
},
titles: [{
id: "Title-1",
size: 15,
text: "Lookit me! I rendered the Chart title!"
}],
data: $scope.chartData
};
});
For some reason the angular directive sets parseDates to true by default if you have a categoryAxis defined, which breaks if your chart isn't date-based. If you set parseDates: false in your categoryAxis, it will work.
categoryAxis: {
parseDates: false,
gridAlpha: 0.3,
gridColor: "#d3d3d3"
},
Here's your updated plunk: http://plnkr.co/edit/TYZdR0KEOAKcbHnGdTfP?p=preview
Note, I changed your gridColor to the hex equivalent. While named colors will work, if you plan on using the export plugin, you'll need to set your colors as a hex string.
I an new to jqgrid with json. I have reviewed the various questions and answers; however, I am still not able to get the data to display in the grid. Below are my results from the PERL script, the HTML page, and a screen shot of the results. Any help will be very much appreciated.
PERL Results
{"addressInfo": { "page": "1", "total": "5","records": "61","rows:"[ { "Id": 1, "lname": "Adams", "fname": "Mr and Mrs David ", "address": "3800 Maplewood Dr", "address2": "", "city": "Lafayette","state": "IN", "zip": "47905", "got-card": "2015", "status": "Active"}, { "Id": 2, "lname": "Baker", "fname": "Mrs Ellen ", "address": "1857 North Colebrook Rd", "address2": "", "city": "MANHIEM","state": "PA ", "zip": "17545", "got-card": "2015", "status": "Active"}, { "Id": 3, "lname": "Banzhof", "fname": "Mr and Mrs Don ", "address": "107 Wellington Rd", "address2": "", "city": "Lancaster","state": "PA ", "zip": "17603", "got-card": "2015", "status": "Active"}] }}
HTML code
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" />
<script src="jqgrid/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script>
//<![CDATA[
jQuery(document).ready(function () {
jQuery("#list2").jqGrid({
url:'/perl/addrlist2x.pl',
datatype: "json",
mtype: 'GET',
colNames:['Id','Last Name', 'Name','Address','Address 2','City','State','Zip','Got-Card','Status'], //define column names
colModel:[
{name:'id', index:'id', width:25},
{name:'lname', index:'lname', width:100, formatter:'showlink', formatoptions:{baseLinkUrl:'http://localhost/html/addr-update2.html', idName:'Id'}},
{name:'fname', index:'lname', width:200},
{name:'address', index:'lname', width:250},
{name:'address2', index:'lname', width:250},
{name:'city', index:'lname', width:100},
{name:'state', index:'lname', width:45},
{name:'zip', index:'lname', width:40},
{name:'got-card', index:'lname', width:40},
{name:'status', index:'lname', width:50}
], //define column models
jsonReader: {
repeatitems: false,
id: "Id",
root: 'addressInfo.rows',
page: function (obj) { return 1; },
total: function (obj) { return 1; },
rows: function (obj) { return obj.addressInfo.rows.length; }
},
width: 900, //specify width; optional
rowNum:10,
loadonce: true,
rowList:[15,30,45, 60],
pager: '#pager2',
sortname: 'lname',
viewrecords: true,
sortorder: "asc",
caption:"Christmas Address List"
});
});
//]]>
</script>
</head>
<body>
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>
Screen Shot of Resultsenter image description here
The JSON data is wrong. You should fix "rows:" [{ to "rows": [{. I'd recommend you to validate JSON data in http://jsonlint.com/.
I am using the following pykcahrts example
<head>
<link rel="stylesheet" type="text/css" href="pykcharts.1.1.0.min.css">
<script src="pykcharts.1.1.0.min.js"></script>
</head>
<body>
<div id="my_chart"></div>
<script>
window.PykChartsInit = function (e) {
var k = new PykCharts.multiD.scatter({
//Chart Container Id
"selector": "#my_chart",
//Data file path
"data": "https://s3-ap-southeast-1.amazonaws.com/chartstore.io-data/scatter.csv",
//Chart mode
"mode": "default",
//Chart Size Parameters
"chart_width": 620,
"chart_height": 400,
"chart_margin_left": 50,
"chart_margin_right": 25,
"chart_margin_top": 35,
"chart_margin_bottom": 35,
//Chart color parameters
"chart_color": [
"#255aee",
"#517bf1",
"#7c9cf5",
"#a8bdf8"
],
//X-Axis parameters
"axis_x_enable": "yes",
"axis_x_title": "",
"axis_x_position": "bottom",
"axis_x_pointer_position": "bottom",
"axis_x_line_color": "#1D1D1D",
"axis_x_pointer_size": 12,
"axis_x_pointer_color": "#1D1D1D",
"axis_x_no_of_axis_value": 5,
"axis_x_pointer_padding": 6,
"axis_x_outer_pointer_length": 0,
"axis_x_pointer_values": [],
"axis_x_time_value_datatype": "",
"axis_x_time_value_interval": 0,
//Y-Axis parameters
"axis_y_enable": "yes",
"axis_y_title": "",
"axis_y_position": "left",
"axis_y_pointer_position": "left",
"axis_y_line_color": "#1D1D1D",
"axis_y_pointer_size": 12,
"axis_y_pointer_color": "#1D1D1D",
"axis_y_no_of_axis_value": 5,
"axis_y_pointer_padding": 6,
"axis_y_pointer_values": [],
"axis_y_outer_pointer_length": 0,
"axis_y_time_value_datatype": "",
"axis_y_time_value_interval": 0,
//Chart labels parameters
"label_size": 13,
"label_weight": "normal",
"label_family": "Helvetica Neue,Helvetica,Arial,sans-serif",
//Realtime data parameters
"real_time_charts_last_updated_at_enable": "no",
"real_time_charts_refresh_frequency": 0,
//chart border parameters
"border_between_chart_elements_thickness": 1,
"border_between_chart_elements_style": "solid",
//Chart-interactive parameters
"chart_onhover_highlight_enable": "yes",
"tooltip_enable": "yes",
"transition_duration": 0,
//Chart legends parameters
"legends_enable": "yes",
"legends_display": "horizontal",
"legends_text_weight": "normal",
"legends_text_family": "Helvetica Neue,Helvetica,Arial,sans-serif",
//Scatter parameters
"scatterplot_pointer_enable": "no",
"scatterplot_radius": 20,
"variable_circle_size_enable": "yes",
"zoom_enable": "no",
//Chart title parameters
"title_text": "Enter title here",
"title_size": 2,
"title_weight": "bold",
"title_family": "Helvetica Neue,Helvetica,Arial,sans-serif",
"title_color": "#1D1D1D",
//Chart subtitle parameters
"subtitle_text": "Enter subtitle here",
"subtitle_size": 1,
"subtitle_weight": "normal",
"subtitle_family": "Helvetica Neue,Helvetica,Arial,sans-serif",
"subtitle_color": "black",
//Credits parameters
"credit_my_site_name": "PykCharts",
"credit_my_site_url": "http://pykcharts.com"
});
k.execute();
}
</script>
</body>
If i change "data": "https://s3-ap-southeast-1.amazonaws.com/chartstore.io-data/scatter.csv", to scatter.csv where the local file is literally the web file saved locally the plot does not appear.
has anyone experienced this?
any insight?
What worked for me:
I was using chrome and the library was not working on the local file.
I tried firefox and it works perfectly.