I am using highcharts in my MVC3 application and I am trying to refresh once the data is modified but the chart doesnot refresh.
I am drawing the chart as follows:-
function initializeChart() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'funnel'
},
title: {
text: 'Deal Funnel Stats',
x: -50
},
legend: {
enabled: false
},
exporting: {
buttons: {
exportButton: {
enabled:false
},
printButton: {
enabled:false
}
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: 'black',
softConnector: true
},
neckWidth: '0%',
neckHeight: '0%'
//-- Other available options
// height: pixels or percent
// width: pixels or percent
}
},
series: [{
data: #Html.Raw(Model.seriesData)
}]
});
}
Model.seriesData is coming from the the class.
Once the data is refreshed i want to reinitialize the chart with new data but it is again drawing the same chart.
Update:
The data I am having first time is:
The data I am having second time is:
Please help.
Thanks.
Related
is there a way to reduce the width of x-axis (see picture) in c3? Even if I tried to set "stroke-width" attribute to the "<"path">" tag with different values - it didn't make any visual changes. Thank you for your advices in advance.
Picture
var chart = c3.generate({
bindto: '#' + chartId,
data: {
columns: columns,
type: 'bar',
labels: true
},
interaction: {
enabled: false
},
tooltip: {
show: false
},
color: {
pattern: colorPattern
},
bar: {
width: { ratio: 0.7 },
space: 0.25
},
size: settings.ChartSizes.BarChart,
legend: {
position: 'right',
grouped: true,
item: {
onclick: function (d) {
counter++;
if (counter === 1) {
chart.hide();
chart.show(d);
} else {
chart.show();
counter = 0;
}
}
}
},
axis: {
x: {
type: 'category',
categories: categories,
show: showAxe
},
y: {
show: false
}
}
});
This is a common issue, caused by you not picking up the c3.css file - see https://github.com/c3js/c3/issues/1962
If you can fix that, the problem goes away
Bottom of highcharts rendered chart in pdf
I am attempting to render a highcharts chart inside a blade template and then pass the resulting view/html to DocRaptor in order to turn it into a pdf. The view is rendered with Laravel's View::make and then the render() function. Everything is working as expected except the rendered bars do not match up to the tick marks on the yAxis (horizontal).
I've included an image of what I'm referring to. In the image 2 of the bars (Saturn and Lexus) should be past the 1M tick and I would expect Acura to be further right towards the 1M tick mark. The image only contains the last 3 bars in the graph, but the same holds true for the series as whole.
Less relevent is that I've essentially split up the series data into small enough chunks such that the chart would fit on a page (hence the jQuery $.each()).
The code that produces the chart is below. The code inside the load and render functions are both executed as the document.write debug statements. Any help/ideas would be appreciated.
$("div[id^='Chart_chunk_count_']").each(function() {
var myChart = Highcharts.chart($(this).attr("id"), {
chart: {
borderWidth: 0,
events: {
load: function(event) {
document.write('In load event');
},
render: function(event) {
document.write('In render event');
}
},
height: j_audience_chart_chunks['metadata']['page'][$(this).data("chart-page")]['height'],
type: 'bar',
width: 650
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
bar: {
borderRadius: 3,
borderWidth: 0,
color: j_audience_chart_chunks['metadata']['count_chart']['color'],
pointWidth: 30,
turboThreshold: 0
},
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
/* allowOverlap: true, */
/* backgroundColor: '#FA9005', */
color: '#606060',
crop: false,
defer: false,
enabled: true,
format: '{point.y:,.0f}',
inside: true,
/* overflow: 'none', */
style: {
fontSize: "11px",
fontWeight: "normal",
textOutline: 'none'
}
}
}
},
title: {
text: (type == "index") ? "Index Against Profiled Audience" : "Audience Count"
},
tooltip: {
enabled: false
},
xAxis: {
categories: j_audience_chart_chunks['audience_data'][$(this).data("chart-page")]['categories'],
minorTickInterval: null,
title: {
text: null
}
},
yAxis: {
min: (type == 'count') ? 0 : -100,
max: j_audience_chart_chunks['metadata']['count_chart']['max'],
title: {
text: null
},
labels: {
/* format: '{point.y:,.0f}', */
overflow: 'justify'
/*
style: {
color: '#fa9005'
}
*/
}
},
series: j_audience_chart_chunks['audience_data'][$(this).data("chart-page")]['series']
});
});
What's happening is that the JavaScript finishes and DocRaptor/Prince begins building the PDF, but the default Highcharts animations haven't finished running. Disabling animations chart wide fixes this.
You need set chart.animation to false like:
chart: {
animation: false
}
I am working on kendo chart. I am loading 30k data on the chart.
You can see in the code I have attached that, when I zoom in and out with mouse scroll, the process becomes very slow. Is it possible to reduce time of execution for each processes? And also first time loading of the chart is also very slow.
I want to know that is 30k data on Kendo chart should be loaded? Is there any limit that Kendo has set for data loading on the chart?
var Chartdata = [];
function createChart() {
$("#chart").kendoChart({
dataSource: {
data: Chartdata
},
series: [{
type: "scatterLine",
xField: "date",
yField: "close"
}, {
type: "scatterLine",
xField: "date",
yField: "volume"
}, {
type: "scatterLine",
xField: "date",
yField: "high"
}, {
type: "scatterLine",
xField: "date",
yField: "low"
}, {
type: "scatterLine",
xField: "date",
yField: "open"
}, {
type: "scatterLine",
xField: "date",
yField: "symbol"
}],
xAxis: {
name: "Date",
baseUnit: "minutes",
BaseUnitSteps: {
second: [1]
},
labels: {
visible: true,
step: 50,
font: "8px Arial,Helvetica,sans-serif",
template: "#= kendo.toString(new Date(value), 'MM/dd/yyyy HH:mm:ss') #"
},
majorUnit: 1,
majorTickType: "none",
majorGridLines: {
step: 5,
},
minorGridLines: {
visible: true,
step: 1,
},
minorTickType: "none",
majorTickType: "none",
},
yAxis: {
majorUnit: 25,
majorTickType: "none",
majorGridLines: {
step: 1,
},
minorGridLines: {
visible: true,
step: 1,
},
minorTickType: "none",
majorTickType: "none",
},
transitions: false,
zoomable: {
mousewheel: {
lock: "y"
},
selection: {
lock: "y"
}
},
zoom: setRange,
}).data("kendoChart");
}
function setRange(e) {
var chart = e.sender;
var options = chart.options;
e.originalEvent.preventDefault();
var xRange = e.axisRanges.Date;
if (xRange) {
var xMinonzoom = xRange.min;
var xMaxonzoom = xRange.max;
var dMaxonzoom = new Date(xMaxonzoom.getYear(), xMaxonzoom.getMonth(), xMaxonzoom.getDay(), xMaxonzoom.getHours(), xMaxonzoom.getMinutes(), xMaxonzoom.getSeconds());
var dMinonzoom = new Date(xMinonzoom.getYear(), xMinonzoom.getMonth(), xMinonzoom.getDay(), xMinonzoom.getHours(), xMinonzoom.getMinutes(), xMinonzoom.getSeconds());
var diff = dMaxonzoom - dMinonzoom;
if (xMaxonzoom - xMinonzoom < 10) {
return;
}
options.xAxis.min = xMinonzoom;
options.xAxis.max = xMaxonzoom;
chart.refresh();
}
}
$(document).ready(function() {
$.ajax({
type: "GET",
cache: true,
url: "https://api.myjson.com/bins/1uan0",
async: false
}).success(function(result) {
var dataresult = result;
$(dataresult).each(function(e, data) {
Chartdata.push({
"date": new Date(Date.parse(data.date)),
"close": data.close,
"volume": data.volume,
"high": data.high,
"low": data.low,
"open": data.open,
"symbol": data.symbol
});
});
createChart();
});
});
#chart circle {
display: none;
}
<link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://kendochart.webashlar.com/kendochart/Javascripts/kendo.all.min.js"></script>
<div id="chart"></div>
Thank you
I have created a dojo for you so hopefully this points you to the right direction.
Chart Dojo
All I have done is added in some simple filtering so that based on the min and max zoom you have selected for the grid it will only call those items into the datasource for you rather than the entire dataset.
This is achieved via this bit of code:
var datasource = chart.dataSource;
console.log("DataSource Total before Filtering is:: " + datasource.total());
datasource.filter();
datasource.filter([{field:"date", operator:"gte",value : xMinonzoom }, {field:"date", operator: "lte", value:xMaxonzoom}]);
console.log("DataSource Total after Filtering is:: " + datasource.total());
So this shows you the effect the filtering is having on the data source you are returning back.
If you wanted to speed things up further you could potentially look at grouping for larger data sets i.e. when you first load the grid up as the data to me at that point is just noise (in my opinion) and is not really meaningful to me (but it maybe in your use case).
Think how mapping works with instances zoomed out summarized as a number rather than trying to show all the individual data points until you start zooming in and seeing the data individually.
If you need more info then let me know and I will expand the answer/ provide more info if I can.
I receive an array json object. And now I don't know how I can process it in javascript code to series section data. I use this example of highchart column-rotated-labels. In this object has two columns AVG and other title, and length of this object might 20.
This is my codes:
$('#showresult').click(function() {
$.ajax({
url : "../../coursestatus",
type : "get",
data : {
major : $('#get').val(),
year : $('#yearlist').val(),
semester : $('#semester').val()
},
success : function(data) {
alert(data.length);
$(function () {
$('#container').highcharts({
chart: { type: 'column'
},
title: { text: 'World\'s largest cities per 2014' },
xAxis: {
type: 'category',
labels: {
rotation: -45,
}
},
yAxis: { min: 0,
title: {
text: 'Population (millions)'
} },
legend: { enabled: false },
tooltip: { pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>' },
series: [{ // I don't know how I can process data object to set that's elements to this
name: 'Population',
data: [
JSON.parse("[" + data + "]")
],
dataLabels: { enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: { fontSize: '13px',
fontFamily: 'Verdana, sans-serif', textShadow: '0 0 3px black'
}
}
}]
});
});
And this object include this elements:
title columns includes course name and avg columns includes mark for that course.
And this is data is in data object:
[{"title":"Math","avg":20},{"title":"Network","avg":18},{"title":"Operating system","avg":16}]
And above data is has 3 length and it is simple, in fact this object maybe that's length is >10.
Thank u!
I founded similar problem in this page and I solved my problem.
Populate Highcharts with JSON data using jQuery
How can I explode pie chart in Kendo DataViz,
my data is coming from database, and my code is like this:
dataSource: {
data: StageData
},
title: {
align: "center",
text: "Clients by Stage",
font: "14px Open Sans",
color: "#3cb2e1"
},
legend: {
visible: false
},
series: [{
type: "pie",
field: "CountClients",
aggregate: "sum",
categoryField: "StageId",
explodeField: function(){
if(categoryField=="Advocate"){
$(this).explode = true;
}
},
overlay: {
gradient: "none"
}
Here I am trying to explode pie when categoryField is "Advocate", But this is not working.
Could anyone suggest me how can I achieve this.
Thanks
I would probably iterate through the StageData, and set an explode value for each object.
$.each(StageData, function(i, s) {
if(s.StageId === 'Advocate') {
s.explode = true;
}
else {
s.explode = false;
}
});
Sample... http://jsbin.com/hiqaj/1/edit