Chartist.js add graph in a modal - javascript

I have a small problem using the library Chartist.js (Link). I'm able to reproduce a graph on the html pages but, when I try tu put in a bootstrap modal, the graph just squeeze to 1 pixel. Example of this can be found here: http://jsfiddle.net/qw2Lnqng/4/. I udnerstood that the problem is due to the fact that the graph doesn't know the available space. The same happens with the tab (Link). The solution with the tab is here: http://jsbin.com/bawofakogu/1/edit?html,js,output. The solution was to add this piece of code:
$('[data-tab]').on('toggled', function (event, tab) {
tab.find('.ct-chart').each(function(i, e) {
e.__chartist__.update();
});
});
I have tried to do the same with the modal but without success. Can you please show me hot wo solve this problem?
Thanks All!

Ok I found a solution. You can update the chart after the modal begin show; by using this jQuery piece of code :
First of all, store your chart in a variable :
var yourchart = new Chartist.Line('.ct-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});
Then with this code, you'll be able to update your chart to the new size of it's container :
$('#popOverlay').on('shown.bs.modal', function (e) {
yourchart.update();
});

Related

Adding vanilla js library to Nuxt

I'm trying to add Chartist library to existing NuxtJs project.
Below is a configuration I have:
> npm i chartist
~plugins/chartist.js:
import Chartist from 'chartist'
export default Chartist
nuxt.config.js:
module.exports = {
plugins: [{src:'~plugins/chartist.js', ssr:false}],
build: {
vendor: ['chartist']
}
}
index.vue:
<template>
<div>
<div class="ct-chart"></div>
</div>
</template>
<script>
import Chartist from 'chartist'
export default {
mounted(){
var chart=new Chartist.Line('.ct-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});
}
}
</script>
On the first attempt to open page nuxt returns an error:
ReferenceError: window is not defined
After page reload it always returns:
Error: render function or template not defined in component: anonymous
However no errors raising and chart is visible if open page from another page through VueRouter.
But here is another problem - chart is not shown as expected:
I guess this is due to lack of related css styles.
I would appreciate for any advise:
- how to correctly include Chartist (or any other vanilla js library)
- how to attach css related to js library
p.s. I know there are different chartist vue components, but I want to understand how to work with vanilla js libraries in nuxt.
Here below the only working variant which found for the moment:
<script>
import 'chartist/dist/chartist.min.css'
export default {
data() {
return {
chartist: null
}
},
mounted() {
this.chartist = require('chartist')
var z = new this.chartist.Line('.ct-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});
}
}
</script>

Is there any way to plot a just a static image on a webpage with plotly js api?

Hey so I am developing an app that will display certain plots based on csv data and am using the plotly js api. I have found that when a user tries to create a scatter plot with a ton of points (greater than 1000 or so) it really slows down the user's browser. So I want to generate a static plot if the data that they supply exceeds a certain threshold of points.
The problem is that I am not sure how to generate a static plot without first rendering an interactive plot.
I have tried to modify the example given on the plotly js api, but have not been able to figure it out.
Here is the code:
Javascript (CDN Included in the Pen)
function plot() {
var d3 = Plotly.d3;
var img_jpg = d3.select("#jpg-export");
// Ploting the Graph
var trace = {
x: [3, 9, 8, 10, 4, 6, 5],
y: [5, 7, 6, 7, 8, 9, 8],
type: "scatter"
};
var trace1 = {
x: [3, 4, 1, 6, 8, 9, 5],
y: [4, 2, 5, 2, 1, 7, 3],
type: "scatter"
};
var data = [trace, trace1];
var layout = { title: "Simple Javascript Graph" };
Plotly.plot("plotly_div", data, layout)
// static image in jpg format
.then(function(gd) {
Plotly.toImage(gd, { height: 300, width: 300 }).then(function(url) {
img_jpg.attr("src", url);
return Plotly.toImage(gd, { format: "jpeg", height: 400, width: 400 });
});
});
}
HTML
<h1>Interactive Plot</h1>
<div id="plotly_div" />
<h1>Static Plot</h1>
<img id="jpg-export"></img>
<button onclick="plot()">Run the function</button>
Thanks!
I think you can add that as a config :
Plotly.newPlot('myDiv', data, layout, {staticPlot: true});

Javascript Plotly box plot issue

I want to display a box plot using Plotly Javascript library.
I set the type of chart box but it shows a line.
var data = [
{
y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
boxpoints: 'all',
jitter: 0.3,
pointpos: -1.8,
type: 'box'
}
];
Plotly.newPlot('myDiv', data);
JSFiddle
Box plots are not part of the basic plotlyjs bundle.
You'll need to upgrade to plotlyjs advanced.

Highcharts: Add point to chart, then remove, then add it again... then repeat

I am using the Highcharts API, and am using a Column Range chart to represent a schedule of events. The vertical axis represents event IDs, the horizontal axis represents the time.
User should be able to add a single event by clicking the chart.
Once added, user should be able to click the newly added event to remove it.
After removal, user should then be able to click the chart again to re-add the new event in another location.
For the most part, this all works fine - See JS Fiddle Demo
On the demo, first click the chart to add a red bar. Then click the red bar to remove it. This is exactly as it should work. The problem is that if you try to add the red bar again after removing it, the categories on the vertical axis increase.
How do I add a point, then remove it, then add it again without "regenerating" extra categories on the vertical axis?
Here's the code (working JS fiddle is linked above). I've tried to simplify it as much as possible in order to focus on the problem at hand.
$(function () {
var flag = false;
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true,
events: {
click: function (e) {
if (!flag) {
var y = e.yAxis[0].value;
this.series[0].addPoint({
name: 'New',
low: y,
high: (y + 10),
color: 'red',
events: {
click: function () {
this.remove();
flag = false;
}
}
});
flag = true;
}
}
}
},
xAxis: {
categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
tooltip: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[3.2, 8.5]
]
}]
});
});
I've read through the Highcharts API and tried everything I can think of but to no avail. Any help is appreciated. Thanks.
A collaborative effort between the OP and myself ...
Re-inject the original x-axis categories and series data :
events: {
click: function () {
this.remove();
chart.xAxis[0].update({
categories: xAxisCategories
});
chart.series[0].update({
data: seriesData
});
flag = false;
}
}
where :
chart = $('#container').highcharts()
xAxisCategories = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
seriesData = [....] (the original series data)
updated fiddle

Jqplot situation with the last bar in the graph

Situation
I'm trying to have some space over the last xaxis options.
For example:
xaxis. min:-max:6
Only half of the last bar is shown, and if I try to use tickOption, it doesn't appear because it is outside of the canvas.
code:
http://jsfiddle.net/chalien/zEQe7/
THANKS
Your array isn't set right for the bar chart. You don't need to tell the plot rendered it is point number 1, 2, 3, etc... It knows it by himself.
Just change the array definition to:
[[4, 6, 2, 5, 6]]
And your graph will be rendered correctly, with or without the min and max definitions.
Here is the full code:
<script type="text/javascript">
$.jqplot('chart2', [[4, 6, 2, 5, 6]],
{ title:'Exponential Line',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true
}
},
axes: {
xaxis: {
max:6,
min:0,
renderer: $.jqplot.LinearAxisRenderer
}
}
});
</script>

Categories