How to display highcharts using highchartsJS in aspmvc - javascript

I cannot display a chart when creating it with the following code:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
however when i change it to this:
$(function () {
Create the chart
chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container'
},
it does display the graph.
My issue is that i need to display the graph in the first way for an additional java script method to run.
the code im working with comes from the following example:

Related

How to add a second series in highcharts [duplicate]

This question already has an answer here:
Retrieving JSON data for Highcharts with multiple series?
(1 answer)
Closed 2 years ago.
I have been trying to display the second value of my json file in highcharts for two days.
my json file:
[[1591518187000,17.3,12.7],[1591518135000,17.2,12.7]...[1591518074000,17.2,12.6],[1591518020000,17.2,12.7]]
The time and the first value are displayed correctly.
my script in php file:
<script type="text/javascript">
var chart;
function requestData() {
$.getJSON('../****json.php',
function (data) {
var series = chart.series[0];
series.setData(data);
}
);
}
(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
marginRight: 10,
marginBottom: 25,
events: { load: requestData }
},
.....
series: [{
name: 'Temperatur',
data: []
},
{
name: "Taupunkt",
data: []
......
</script>
Does anyone happen to have a way of drawing the second values ​​as a line?
You could process your data and make two data sets for both series. Both data sets will have the same x values, but different y values. The code could look something like this:
$.getJSON('../****json.php',
function (data) {
var dataSetOne = [],
dataSetTwo = [];
data.forEach(function(point) {
dataSetOne.push([point[0], point[1]);
dataSetTwo.push([point[0], point[2]);
});
chart.series[0].setData(dataSetOne);
chart.series[1].setData(dataSetTwo);
}
);

Angular HighChart in tabs width

Okay so i have the following highChart tag:
<highchart id="chart1" config="chartConfig" ></highchart>
Now in my system i have several tabs. it happens to be that the high chart is not under the first tab.
Now when i press the tab that contains the chart, the chart looks abit odd:
(You can't tell from this picture but it is only using like 30% of the total width)
But change the browser size and then changing it back to normal the chart places it self correctly inside the element (this also happens if i just open the console while i am inside the tab):
I am guessing that it has something to do with the width of the element once it has been created (maybe because it is within another tab) but i am unsure how to fix this.
I attempted to put a style on the element containg the highchart so that it would look something like this: <highchart id="chart1" config="chartConfig style="width: 100%"></highchart>
However this resulted in the chart running out of the frame.
My chart config
$scope.chartConfig = {
};
$scope.$watchGroup(['login_data'], function(newValues, oldValues) {
// newValues[0] --> $scope.line
// newValues[1] --> $scope.bar
if(newValues !== oldValues) {
$scope.chartConfig = {
options: {
chart: {
type: 'areaspline'
}
},
series: [{
data: $scope.login_data,
type: 'line',
name: 'Aktivitet'
}],
xAxis: {
categories: $scope.login_ticks
},
title: {
text: ''
},
loading: false
}
}
});
Can you try one of the following in your controller? (or perhaps both!)
$timeout(function() {
$scope.chartConfig.redraw();
});
$timeout(function() {
$scope.chartConfig.setSize();
});
Calling the reflow method solved my similar issue on showing chart in a modal. Hope this will help others :D
Add this to your controller after $scope.chartConfig:
$scope.reflow = function () {
$scope.$broadcast('highchartsng.reflow');
};

How do you make reusable/template charts in c3js

I'm trying to use C3.js(c3js.org) to make charts, but I want to specify everything but the data(and any other minor deviations unique to that chart) once then reuse that for all charts of that variation(a specific configuration of a chart).
All the documentation and all examples I've found for C3.js only deal with how you make a single chart. Applying that to multiple charts means a lot of repeated code and doesn't ensure consistency when making changes.
The only thing related to this that I've found is a concept on making reusable charts in D3.js(d3js.org), the underlying library used by C3.js, and an implementation inspired by that concept. That doesn't really help me because I want the higher-level abstraction that C3.js provides but these may give you an idea what I'm looking for.
I have found no info on this but one idea is to make a chart type that is based on an existing type but that also include the extra configuration(for example make a new chart type called 'horizontalbar' based on the existing 'bar' chart type).
Here is a chart I've made, bindto and columns are the unique parts of this chart, the rest should be part of a template, but I don't know how.
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 125.2],
['data2', 282.7],
['data3', 3211.1],
['data4', 212.2],
['data5', 131.1],
['data6', 329.7]
],
type: 'pie',
order: null
},
pie: {
label: {
format: function (value, ratio, id) {
return d3.format('.1f')(ratio*100)+'%'; //percent with one decimal
}
}
},
tooltip: {
format: {
value: function (value, ratio, id, index) {
return value+'mkr ('+d3.format('.1f')(ratio*100)+'%)'; //example: 155.2mkr (3.3%)
}
}
},
legend: {
item: {
onclick: function () {} //disable clicking to hide/show parts of the chart
}
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.js"></script>
<div id="chart"></div>
I have this in my html:
<script src="../static/js/test.js"></script> <!-- this is the js file contains the drawChart function -->
<div class='chart'>
<div id='chart1'></div>
</div>
<script>drawChart('chart1','pathToCsvData',ture, 200);</script>
in my js code:
function drawChart(toChart,dataURL,showLegend,chartHeight)
{
var chart1 = c3.generate({
bindto: toChart,
data: {
url: dataURL,
labels: false
},
color: {pattern: ['green','black']},
zoom: {enabled: false},
size: {height: chartHeight},
transition: {duration: 0},
legend: {show: showLegend}
});
}
the js code serve as a template, and I can as many different template I want, put them in functions, with customized chart parameters, and the call the js function in html code.

Update HighCharts chart when AJAX Updates my data on my page

I have a Page where I have some Project Stats based on different Project Task Statuses. On this page I use AJAX to update my Stat values as they change.
I am now trying to integrate a Highcharts bar chart/graph and I need to update it;s chart when my data changes.
There is a JSFiddle here showing the chart I am experimenting with now http://jsfiddle.net/jasondavis/9dr345og/1/
$(function () {
$('#container').highcharts({
data: {
table: document.getElementById('datatable')
},
chart: {
type: 'column'
},
title: {
text: 'Project Stats'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Total'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
},
subtitle: {
enabled: true,
text: 'Project Stats'
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
}
});
// Button Click to Simulate my Data updating. This increments the Completed Tasks bar by 1 on each click.
$(".update").click(function() {
var completedVal = $('#completed').text();
++completedVal
$('#completed').text(completedVal)
});
});
So this example is getting the data from a Table but I do not have to use this method, I could also set it with JavaScript if needed.
I just need to figure out how I can update all these values on the fly as my real live page updates my task stat values using AJAX so I would like this chart to update live as well.
Any help on how to make it update? When my AJAX code is ran, I could call some JavaScript at that point if there is a function that rebuilds the chart?
I would drop the use of the table, especially since it looks like you are building it just for highcharts to consume it. Instead return your data via AJAX as a Highcharts series object. and then use the Series.setData method to update your plot. This would be the right way to do it.
If you really want to use the table, you could query out the data and still use setData (this is what Highcharts is doing for you under the hood). Updated fiddle.
$(".update").click(function() {
var completedVal = $('#completed').text();
++completedVal;
$('#completed').text(completedVal);
// get y values
var yValues = $.map($('#datatable tr td'),function(i){return parseFloat($(i).text());});
// set data
Highcharts.charts[0].series[0].setData(yValues);
});

Customizing a Jquery plugin

I am using a jquery plugin called Hight charts that needs to specify in my html a div with #container and then this put in script tags generate some chart :
$(function() {
Highcharts.setOptions({
options: {...},
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
other_options:{...}
});
});
Since I need to call this plugin for each element of a dynamic list of my web page, I want to create a plugin that wraps this one. Before caring of DOM's nodes traversal, I put to test
(function($) {
$.fn.ChartPlugin = function() {
Highcharts.setOptions({
options: {...},
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
other_options:{...}
});
};
})(jQuery);
But now when I call to test $.ChartPlugin(); nothing happens, could someone tell me where I am going wrong ?
Edit : I removed '.fn' and it worked but I don't understand why

Categories