I have an Angular Chart Bar-Line chart, and it works, but the tooltop is different of this:http://jtblin.github.io/angular-chart.js/examples/stacked-bars.html
My chart tooltip is "static" like this:
http://jsfiddle.net/masiht/r5g6a3cd/
<div id="chart-area"><canvas id="bar" width="250" height="250" style="width:250px; height: 250px;"></canvas> <div id="legend"></div></div>
My own have no animation and dont show the "arrow head" in tooltops.
I tried adding css, bootstrap and nothing works.
you need to change animation to true:
var bar = new Chart(canvas.getContext('2d')).Bar(barChartData, {
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>kb",
animation: true,
});
Related
My canvasjs chart floats right then on inspection gets back to its original position. What might be the issue?
I have 2 dynamic canvasjs charts in my site inside to tab-body. The 1st chart is displaying fine but when I click on the 2nd tab the chart inside it floats left and then after inspection gets to its original position. All of the data is fine just want to know the js or css issue.
i did the php like this data are all fine and are working good.
<div class="charcon_n" id="chartContainer_n<?php echo $i; ?>" style="height: 350px; width: 100%;" data-point='<?php echo json_encode($data_n, JSON_NUMERIC_CHECK); ?>'></div>
Whenever a tab is switched, the render method of each of the chart in the activated tab should be called so that chart can take the actual dimensions of its container.
$("#tabs").tabs({
create: function (event, ui) {
//Render Charts after tabs have been created.
$("#chartContainer1").CanvasJSChart(options1);
$("#chartContainer2").CanvasJSChart(options2);
},
activate: function (event, ui) {
//Updates the chart to its container size if it has changed.
ui.newPanel.children().first().CanvasJSChart().render();
}
});
Please take a look at jQuery gallery example.
I've create a Wordpress Theme with Bootstrap & have been trying to load just the basic red square from the tutorial onto the canvas in my html.
// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');
// create a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
// "add" rectangle onto canvas
canvas.add(rect);
The script is loaded & when I console.log the canvas object it outputs the canvas object & it's properties. But, nothing will appear on the canvas. I've made sure my id's match & that my canvas is between a wrapper & has 1000 / 1000 px space set, which is centered.
Below is my Template Code
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="test-header">Test Your Ad Here!</h1>
</div>
</div>
</div>
<div>
<canvas id="c" width="1000" height="1000"> </canvas>
</div>
<hr/>
<?php get_footer(); ?>
Thanks!
Not sure why it's not rendering but one thing to try is calling canvas.renderAll() to make sure fanric knows it's time to render it's data to the canvas.
I've this AngularJS demo app using Highcharts:
http://jsfiddle.net/dennismadsen/dpw8b8vv/1/
<div ng-app="myapp">
<div ng-controller="myctrl">
<button ng-click="hideView()">1. Hide</button>
<button ng-click="showView()">2. Show</button>
<div id="container" ng-show="show">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
</div>
If you change the width of the result view in JSFiddle, the Highchart will automatically resize it's width to the size of the container (the div with black border).
I've noticed that if Highchart is hidden, and the window is resized, it is not resized automatically (like iPad changing Landscape/Portrait orientation). Try this out by first clicing the "1. hide" button, change size of the result view, and then press the "2. show" button. See this example:
How can I force the highchart to resize even if it's not visible?
As per the documentation, we need to trigger the reflow method in scenarios where resize event cannot be captured by the chart.
Triggering reflow method in $timeout will render the chart properly.
$scope.showView = function () {
$scope.show = true;
$timeout(function () {
$scope.highchartsNG.getHighcharts().reflow()
});
}
Working Fiddle
I think it's a correct behaviour.
But considering that the resize event event fix the graph size, you can trigger a resize after the graph is shown, like:
setTimeout(function () {
$(window).trigger('resize');
}, 1);
It's the jQuery way, I think there's an angular too, but I'm not familiar with it.
I have a nice chart in highcharts that the user can zoom into. I really don't like the built-in ZOOM RESET button, and would like to add my own custom zoom reset button into a nav bar already present.
So my questions are:
1. Is there a way to hide the default highcharts ZOOM RESET button?
2. Is there a method/function I can call to perform the ZOOM RESET? (I can call that from my own button click)
You can pass resetZoomButton as display: none and call zoomOut.
chart: {
resetZoomButton: {
theme: {
display: 'none'
}
}
}
$('#resetZoom').click(function() {
chart.zoomOut();
});
<input type="button" value="reset zoom" id="resetZoom"/>
Demo
Just get the chart and call zoomout:
chart = $("#your-chart").highcharts();
chart.zoomOut();
I found a nice looking app made by Kap Lab. I like the components on the left, especially the grey background with rounded corners. It feels like one solid piece of GUI, despite it's made of four different components. I tried to put VBox, make its background grey, round corners and put other components with sligtly less width on the top of it, but it doesn't seem to work. The corners are not rounded and whole thing looks rather ugly :)
It looks like a panel with a tab navigator inside it. CSS for the panel like this:
Panel {
borderStyle: solid;
borderColor: #d2d2d2;
borderThickness: 1;
roundedBottomCorners: true;
backgroundColor: #e1e1e1;
dropShadowEnabled: false;
}
I used Flex 3 Style Explorer to generate that. You could try messing around with it to get the styles you want.
If you mean the box titled "LAYOUT", then it must be a Panel component, which can be easily customized using styles to look that way:
<mx:Style>
.panelTitle
{
font-weight: bold;
color: #ffffff;
}
</mx:Style>
<mx:Panel x="300" title="LAYOUT" headerHeight="20" backgroundColor="#CCCCCC" titleStyleName="panelTitle"
headerColors="[#333333, #333333]" highlightAlphas="[0, 0]"
borderThicknessLeft="3" borderThicknessRight="3" borderThicknessBottom="3" borderThicknessTop="3">
<mx:VBox height="300" width="200" backgroundColor="#FFFFFF" />
</mx:Panel>
Top component is just a VBox.
Inside it, you first have a TabNavigator then a DataGrid and the last component is also a VBox which contains a Hbox with a simple Label and an Accordion
Vbox
TabNavigator
DataGrid
VBox
Hbox
Label
Accordion