I have a single chart showing on my site. Viewers can then click links beside the chart in order to change the chart data. My problem is that the data will not show in the chart upon initialization - only if you start clicking the buttons beside the chart will the data load. I load data into the charts using JSON. I have been told that the problem might be that the JSON data is loaded after the chart is first displayed (an asynchronous problem), but I don't know how to fix this.
Below is the code I use for setting the first chart I have (chartOptions.chart1) into the "container" div. This will initialize the chart structure but it will not call my data - the data will only show if I start clicking the div-links.
$('chart').ready(function() {
//common options
Highcharts.setOptions({
chart: {
marginRight: 0
},
legend: {
enabled: false
},
plotOptions: {
bar: {
pointPadding: .01
},
column: {
borderWidth: 0.5
},
line: {
lineWidth: 1
},
},
series: [{
color: '#027ff7',
data: []
}]
});
$('#container').highcharts(chartOptions.chart1);
chart = $('#container').highcharts();
$(document).on('click', '.chart-update', function() {
$('div').removeClass('selected');
$(this).addClass('selected');
chart.destroy();
$('#container').highcharts(chartOptions[$(this).data('chartName')]);
chart = $('#container').highcharts();
});
});
</script>
</head>
<body>
<span class="wrapper">
<span class="block chart"><div id="container" style="width:400px;height:300px;float:left;"></div></span>
<span class="block buttons">
<div id="divchart" class="chart-update selected" data-chart-name="chart1">Chart1</div>
<div id="divchart" class="chart-update" data-chart-name="chart2">Chart2</div>
</span>
</span>
</body>
So I am wondering if I can use something else instead of the
$('#container').highcharts(chartOptions.chart1);
in order to have the first chart initialized in the container-div when visitors first enter the site? Of if there is some javascript code that will automatically trigger the on-"click" part - since this works just fine.
Related
I want to dynamically create a CanvasJS chart depending on N amount of objects from a JSON array. If a JSON array has 3 objects, the web page should be able to display 3 charts.
<div class="container-fluid" id="spectraContainers">
</div>
Through the id "spectraContainers", I have a javascript function that dynamically creates a new div with a unique id. In that same function, a new chart is created with its unique id.
document.getElementById("chartContainers").innerHTML += '<div class="row"> <div id="chart_container_' + chartNumber + '" style="width: 100 %; height: 500px; ">Container </div></div>';
...
...
...
var chartContainerID = "chartcontainer_" + chartNumber;
var chart = new CanvasJS.Chart(chartContainerID, {
animationEnabled: true,
zoomEnabled: true,
theme: "light2",
title: {
text: chartTitle,
},
axisX: {
title: "x axis label",
gridDashType: "dash",
gridThickness: 2
},
axisY: {
title: "y axis label",
gridDashType: "dash",
gridThickness: 2
},
dataPointMaxWidth: 20,
dataPointWidth: 10,
data: [{
type: "column",
dataPoints: points
}]
});
chart.render();
I've verified that all values are valid. It seems like only ONE canvasJS chart (the third object from the json array) can be rendered in a page within this function. If I were to specifically generate a chart for index 0 or 1 in the json array, the specified index for the chart will be rendered.
I know it's possible to render multiple canvasJs charts by manually creating a new chart variable for each uniqueID. However, I would like to dynamically generate N-amount of charts. I am pretty new to javascript and would appreciate any advice!!
Using innerHTML replaces the contents of div element rather than appending child element. Try using append method.
I'm new in js and design generally,i try my best to explain the problem i have as best as i can,i have a column and bar charts,when i click on the bars,it should give me another 3 different charts accordingly,implementing this is not a big deal,but the user interface is becoming a pain,i want to know whats the logical suggestion for a problem like this,it should be modal or just different div's on the page,to show the charts?
maybe the example below can make my point better:
Here is my HTML:
<div style="width:100%">
<div id="chart" style="width:30% ;float:left"></div>
<div id="chart2" style="width:35%;float:right"></div>
<div id="chart3" style="width:25%;float:left"></div>
</div>
here is JS:
$("#chart").kendoChart({
series: [{
data: [1, 2],
color: function(point) {
if (point.value > 1) {
return "red";
}
// use the default series theme color
}
}],
seriesClick:seriesClick
});
function seriesClick(){
$("#chart2").kendoChart({
command:{ text: "View Details" },
series: [{
data: [5, 6],
color: function(point) {
if (point.value > 5) {
return "blue";
}
}
}],
});
$("#chart3").kendoChart({
command:{ text: "View Details" },
series: [{
data: [1, 3],
color: function(point) {
if (point.value > 1) {
return "green";
}
}
}],
});
}
here is the DEMO:
Demo
You can try modifying the existing bar chart. The existing bars can be modified. Using the existing resources to slide to the next is always good and seems much better than randomly popping out the bars out of nowhere.
Just check out this link http://nivo.rocks/bar . Click on the roll the dice button on the right or change the stacked option to grouped which is present below, you will get an idea regarding it.
Thanks to anyone willing to help! I new around here and hope I'm following the right format.
I have several horizontal bar charts made with flot charts in jquery. Most render the data perfectly fine. One does not. In this chart, the axis labels and data series labels show up, as do the tick labels and my vertical scroll bar. However, no actual axes or data get rendered in the chart.
One main difference is that this chart has more data than the others - about 500 rows as opposed to about 50. The chart area of all charts are adjusted to the number of rows using jquery .css so that the height of the charts are all different. I am wondering if there is simply a limit to how much data flot charts can take for the horizontal bar chart format. I found some stack overflow questions about flot chart line charts, which said you could have max one point per pixel on the x axis in this format - so I'm wondering if there is something similar going on for height with horizontal bar charts.
Or, does anyone see anything else in my code that could be causing the data and axes not to render?
The data is called via an API from mySQL into a jSON object, which I format in javascript for use in flot charts in the form of [[data, index]]. The chart should load on page ready into the div class "pd_level". There is also a filter function with a drop down menu, which when something from the drop-down is selected, new charts show in both div classes "pd_level" and "conversions". This filter is on a number of my other charts and is working fine on those.
The html:
<div class="filter">
<select id="selec" name="pd_id" class="form-control form-filter input-sm">
<option id="pd_id" value="">Filter by Product...</option>
</select>
</div>
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart"></i>Product Performance
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<div id="box" style="height: 600px; overflow: scroll;">
<div id="chart_1_2" class="chart pd_level">
</div>
</div>
<div id="box">
<div id="chart_1_2" class="chart conversions">
</div>
</div>
</div>
</div>
The javascript:
var load = function () {
$.getJSON('api/db/product_conversions_pd_level', function (data) {
var i = 0;
var dta0 = [], dta1 = [], ticks = [];
var dtlist = [dta0, dta1];
var calcs = ['view', 'choose'];
//this runs through each row and grabs the relevant values and adds them to an array of arrays for the chart data
$.each(data, function (key, val) {
for (n = 0; n < calcs.length; n++) {
var s = this[calcs[n]];
var dt = parseInt(s);
var d = dtlist[n];
d.push([dt, i]);
}
var labellist = this.pd_name;
console.log(labellist);
var tks = [i, labellist];
ticks.push(tks);
i++;
});
$('.pd_level').css('height', (ticks.length * 6 * 25) + 'px').css('width', '95%');
//this sets the value of the dataset and its labels, as well as plot options for the chart
var dataset = [{label: "Views", data: dta0}, {label: "Selections", data: dta1}];
var options = {
series: {bars: {show: true}},
bars: {
align: "center",
barWidth: .10,
horizontal: true,
order: 2,
fillColor: {colors: [{opacity: .9}, {opacity: .9}]}
},
pan: {interactive: true},
yaxis: {axisLabel: 'Products', ticks: ticks, align: "center", tickLength: .5, tickSize: 2, panRange: [0, 5]},
xaxis: {position: 'top', axisLabel: 'Number of Actions'},
legend: {noColumns: 1, labelBoxBorderColor: "#000000", position: "ne"},
colors: ["#85adf4", "#92acac", "#8b9ef4", "#b6acac", "#97b690", "#7abeda"],
grid: {hoverable: true}
};
//this plots the chart in the div
toolt(ticks, 5, 50, '.pd_level', 'h');
$.plot($('.pd_level'), dataset, options);
});
};
load();
I had a simular issue with the bas not showing in my graph.
My graph worked with a dynamic width and I found out the graph got blank when the width got bigger then proximately 32750px.
I recently updated highstock in which I used a chart that displayed values with an "extended range", i.e. where the min and max date is set outside the boundaries of the chart data.
After the update (which fixed some other bugs) I noticed that the last data point in the navigator series at the bottom is not correct according to the data in the actual series. As can be seen, there's an additional data point at the far right in the bottom that doesn't exist in the actual series.
This can be viewed at http://jsfiddle.net/ab96pnjf/ as well
The code that creates the chart is the following
$(function () {
var fromdate = new Date('2011-04-01');
var todate = new Date('2012-05-21');
var series = [{
color: 'red',
data: MSFT,
name: 'MSFT'
}];
$('#container').highcharts('StockChart', {
navigator: {
series: {
data: series[0].data,
color: '#4572A7',
fillOpacity: 0.05
}
},
xAxis: {
ordinal: false,
min: fromdate.getTime(),
max: todate.getTime()
},
legend: {
enabled: true
},
series: series
});
});
Now, if I change the navigator.series property to
navigator: {
series: series
}
the navigator chart is correct, as in the values are cut off at the right when there is no more data available. This is what I want; the only problem is that the color is the same as the series, and I want it to use my custom color, as in the first example.
So how do I configure HighStock to cut off the last value in the navigator chart while at the same time being able to use a custom color for the series?
Hm, well I have a "quick fix" to this problem, as I am not sure how I would configure highcharts to do it for me.
Using jQuery I can extract the line in the navigator, since highcharts (at least) applies a class to the series. It sets the class name for all series including the one in the "main area", but the last one is the navigator series it seems, or every odd series if there is more than one highcharts chart in the document.
$(function () {
// ... as previous
$('#container').highcharts('StockChart', {
navigator: {
series: series
},
// ... as previous
});
// added code to apply a custom style to the navigator line diagram
var navseries = $('.highcharts-series:last').children();
// can be undefined if the series has no data points
if (navseries) {
navseries.css('stroke', '#4572A7');
navseries.css('strokeWidth', 1);
navseries.css('fillOpacity', 0.05);
}
});
I need to know how can with jquery maybe show a better pie chart with morris.js...with jquery flot the library I can hide the result with per example less than 100 coincidences but with morris I don't know how?
Here the capture:
and I want to show it like this one:
here is the jquery i use:
<script type='text/javascript' charset='utf-8'>
$(function () {
var pie = {
element: 'pie',
hideHover: 'auto',
resize: true,
data: <?php include('graficas6.php'); ?>,
colors: [
'#1424b8',
'#0aa623',
'#940f3f',
'#148585',
'#098215',
'#b86c14',
'#b83214'
],
formatter: function (y) {
return y + " "
}
}
donut1 = Morris.Donut(pie)
});
</script>
I would suggest if you have the large data then you should use pagination ,so that data will be shown on each of the different pages.
There are many benefits if you look into these website.
https://demo.aheadmetrics.com/#UIJGJX6MIQ
I am currently making my ecommerce sales report . Once it gets love i will put that link over here